Ширина столбов заменена на rem. Дубликат константы стоблов удалён

src/pages/Messages.jsx

@@ -14,38 +14,44 @@ const { Search } = Input
 
 // Словарь категорий для строк таблицы
 const categoryDictionary = {
-  1: {title: 'Авария'},
+  1: {title: 'Важное'},
   2: {title: 'Предупреждение'},
   3: {title: 'Информация'},
 }
 
-const columns = [
+// Конфигурация таблицы
+export const columns = [
   {
-    width: '10%',
+    width: '10rem',
     title: 'Дата',
     key: 'date',
     dataIndex: 'date',
     render: item => moment(item).format('DD MMM YYYY, HH:mm:ss'),
+    sorter: (a, b) => new Date(b.date) - new Date(a.date),
+    sortDirections: ['descend', 'ascend'],
   }, {
-    width: '10%',
+    width: '10rem',
     title: 'Глубина',
     key: 'wellDepth',
     dataIndex: 'wellDepth',
     render: depth => <span>{depth.toFixed(2)} м.</span>,
   }, {
-    width: '10%',
+    width: '10rem',
     title: 'Категория',
     key: 'categoryId',
     dataIndex: 'categoryId',
     render: (_, item) => categoryDictionary[item.categoryId].title,
-    style: (_, item) => categoryDictionary[item.categoryId].style,
+    style: (_, item) => categoryDictionary[item.categoryId]?.style,
+    sorter: (a, b) => a.categoryId - b.categoryId,
+    sortDirections: ['descend', 'ascend'],
     ellipsis: true,
   }, {
     title: 'Сообщение',
     key: 'message',
     dataIndex: 'message',
+    onFilter: (value, record) => record.name.indexOf(value) === 0,
   }, {
-    width: '10%',
+    width: '10rem',
     title: 'Пользователь',
     key: 'user',
     dataIndex: 'user',

src/pages/TelemetryView/ActiveMessagesOnline.jsx

@@ -1,51 +1,14 @@
 import {useState, useEffect} from 'react'
-import {Table} from "antd";
-import moment from 'moment'
+import {Table} from 'antd'
 
 import LoaderPortal from '../../components/LoaderPortal'
 import {invokeWebApiWrapperAsync} from '../../components/factory'
+import {columns} from '../Messages'
 
 import {Subscribe} from '../../services/signalr'
 import {MessageService} from '../../services/api'
 import '../../styles/message.css'
 
-// Словарь категорий для строк таблицы
-const categoryDictionary = {
-  1: {title: 'Важное'},
-  2: {title: 'Предупреждение'},
-  3: {title: 'Информация'},
-}
-
-// Конфигурация таблицы
-const columns = [
-  {
-    title: 'Дата',
-    dataIndex: 'date',
-    render: (item) => moment(item).format('DD MMM YYYY, HH:mm:ss'),
-    sorter: (a, b) => new Date(b.date) - new Date(a.date),
-    sortDirections: ['descend', 'ascend'],
-  }, {
-    title: 'Глубина',
-    key: 'wellDepth',
-    dataIndex: 'wellDepth',
-    render: depth => <span>Глубина {depth.toFixed(2)} м.</span>,
-  }, {
-    title: 'Категория',
-    dataIndex: 'categoryId',
-    render: (_, item) => categoryDictionary[item.categoryId]?.title,
-    style: (_, item) => categoryDictionary[item.categoryId]?.style,
-    sorter: (a, b) => a.categoryId - b.categoryId,
-    sortDirections: ['descend', 'ascend'],
-  }, {
-    title: 'Сообщение',
-    dataIndex: 'message',
-    onFilter: (value, record) => record.name.indexOf(value) === 0,
-  }, {
-    title: 'Пользователь',
-    dataIndex: 'user',
-  },
-];
-
 export default function ActiveMessagesOnline({idWell}) {
   const [messages, setMessages] = useState([])
   const [loader, setLoader] = useState(false)
@@ -56,7 +19,7 @@ export default function ActiveMessagesOnline({idWell}) {
     }
   }
 
-  useEffect(() => {    
+  useEffect(() => {
     invokeWebApiWrapperAsync(
     async () => {
         const messages = await MessageService.getMessages(idWell, 0, 4)