Фильтрация сообщений в шапке таблицы

src/pages/Messages.jsx

@@ -10,8 +10,6 @@ import Notification from '../components/Notification'
 
 const {Option} = Select
 
-
-
 // Словарь категорий для строк таблицы
 const categoryDictionary = {
   1: {title: 'Авария'},
@@ -19,54 +17,26 @@ const categoryDictionary = {
   3: {title: 'Информация'},
 }
 
-// Конфигурация таблицы
-const columns = [
-  {
-    title: 'Дата',
-    key: 'date',
-    dataIndex: 'date',
-    render: (item) => moment(item).format('DD MMM YYYY, HH:MM:ss'),
-  },
-  {
-    title: 'Категория',
-    key: 'categoryId',
-    dataIndex: 'categoryId',
-    render: (_, item) => categoryDictionary[item.categoryId].title,
-    style: (_, item) => categoryDictionary[item.categoryId].style,
-    filters: [
-      {text: 'Авария', value: '1'},
-      {text: 'Предупреждение', value: '2'},
-      {text: 'Информация', value: '3'},
-    ]
-  },
-  {
-    title: 'Сообщение',
-    key: 'message',
-    dataIndex: 'message',
-  },
-  {
-    title: 'Пользователь',
-    key: 'user',
-    dataIndex: 'user',
-  },
-];
-
-// Опции для фильра
-
 // Данные для таблицы
 export default function Messages() {
   let {id} = useParams()
   const [messages, setMessages] = useState([])
+  const [filteredInfo, setFilteredInfo] = useState({})
   const [loader] = useState(false)
-
   const filterOptions = [
-    {label: 'Авария', value: 1},
-    {label: 'Предупреждение', value: 2},
-    {label: 'Информация', value: 3},
+    {label: 'Авария', value: '1'},
+    {label: 'Предупреждение', value: '2'},
+    {label: 'Информация', value: '3'},
   ]
 
   const children = filterOptions.map((line) => (<Option key={line.value}>{line.label}</Option>))
 
+  const handleChange = (filters) => {
+    setFilteredInfo({
+      filteredInfo: filters
+    })
+  }
+
   const handleReceiveMessages = (messages) => {
     if (messages) {
       setMessages(messages.items)
@@ -87,6 +57,40 @@ export default function Messages() {
     }
   }, [id])
 
+  const columns = [
+    {
+      title: 'Дата',
+      key: 'date',
+      dataIndex: 'date',
+      render: (item) => moment(item).format('DD MMM YYYY, HH:MM:ss'),
+    },
+    {
+      title: 'Категория',
+      key: 'categoryId',
+      dataIndex: 'categoryId',
+      render: (_, item) => categoryDictionary[item.categoryId].title,
+      style: (_, item) => categoryDictionary[item.categoryId].style,
+      filters: [
+        {text: 'Авария', value: '1'},
+        {text: 'Предупреждение', value: '2'},
+        {text: 'Информация', value: '3'},
+      ],
+      filteredValue: filteredInfo.categoryId,
+      onFilter: (value, record) => record.categoryId.toString() === value,
+      ellipsis: true,
+    },
+    {
+      title: 'Сообщение',
+      key: 'message',
+      dataIndex: 'message',
+    },
+    {
+      title: 'Пользователь',
+      key: 'user',
+      dataIndex: 'user',
+    },
+  ];
+
   return (
     <>
       <h2>Сообщения</h2>
@@ -97,7 +101,7 @@ export default function Messages() {
         allowClear
         placeholder="Фильтр сообщений"
         className="filter-selector"
-        // onChange={messagesFilter}
+        onChange={handleChange}
       >
         {children}
       </Select>