Update react-table to v8 (#2131)

Updating react-table to v8. 
- Migrating the existing table to v8
- Preserving the visuals and logic

What's done?
- Cell components are moved under `Cells` folder
- Old styles for react-table-6 is removed.
- Old types are removed
- All logic was preserved
- Some cell components are removed for simplicity


Fixes: https://github.com/grafana/oss-big-tent-squad/issues/125

.changeset/open-dolls-arrive.md

@@ -0,0 +1,5 @@
+---
+'grafana-zabbix': patch
+---
+
+Upgrade react-table to v8

package.json

@@ -53,6 +53,7 @@
     "@swc/core": "^1.3.90",
     "@swc/helpers": "^0.5.0",
     "@swc/jest": "^0.2.26",
+    "@tanstack/react-table": "^8.21.3",
     "@testing-library/jest-dom": "6.1.4",
     "@testing-library/react": "14.0.0",
     "@types/glob": "^8.0.0",
@@ -93,7 +94,6 @@
     "postcss-scss": "4.0.4",
     "prettier": "^3.0.3",
     "prop-types": "15.7.2",
-    "react-table-6": "6.11.0",
     "react-use": "17.4.0",
     "replace-in-file-webpack-plugin": "^1.0.6",
     "sass": "1.63.2",

src/datasource/types.ts

@@ -108,6 +108,7 @@ export interface ProblemDTO {
   datasource?: DataSourceRef | string;
   comments?: string;
   host?: string;
+  hostInMaintenance?: boolean;
   hostTechName?: string;
   proxy?: string;
   severity?: string;

src/panel-triggers/components/Problems/AckCell.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import { css } from '@emotion/css';
-import { RTCell } from '../../types';
-import { ProblemDTO } from '../../../datasource/types';
-import { FAIcon } from '../../../components';
-import { useTheme, stylesFactory } from '@grafana/ui';
-import { GrafanaTheme } from '@grafana/data';
-
-const getStyles = stylesFactory((theme: GrafanaTheme) => {
-  return {
-    countLabel: css`
-      font-size: ${theme.typography.size.sm};
-    `,
-  };
-});
-
-export const AckCell: React.FC<RTCell<ProblemDTO>> = (props: RTCell<ProblemDTO>) => {
-  const problem = props.original;
-  const theme = useTheme();
-  const styles = getStyles(theme);
-
-  return (
-    <div>
-      {problem.acknowledges?.length > 0 && (
-        <>
-          <FAIcon icon="comments" />
-          <span className={styles.countLabel}> ({problem.acknowledges?.length})</span>
-        </>
-      )}
-    </div>
-  );
-};
-
-export default AckCell;

src/panel-triggers/components/Problems/Cells/AckCell.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { css } from '@emotion/css';
+import { ZBXAcknowledge } from '../../../../datasource/types';
+import { FAIcon } from '../../../../components';
+import { useTheme2 } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+
+const getStyles = (theme: GrafanaTheme2) => {
+  return {
+    countLabel: css`
+      font-size: ${theme.typography.fontSize};
+    `,
+  };
+};
+
+export const AckCell = (props: { acknowledges?: ZBXAcknowledge[] }) => {
+  const acknowledges = props.acknowledges || [];
+  const styles = getStyles(useTheme2());
+
+  return (
+    <div>
+      {acknowledges?.length > 0 && (
+        <>
+          <FAIcon icon="comments" />
+          <span className={styles.countLabel}> ({acknowledges?.length})</span>
+        </>
+      )}
+    </div>
+  );
+};

src/panel-triggers/components/Problems/Cells/HostCell.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import FAIcon from '../../../../components/FAIcon/FAIcon';
+
+interface HostCellProps {
+  name: string;
+  maintenance: boolean;
+}
+
+export const HostCell: React.FC<HostCellProps> = ({ name, maintenance }) => {
+  return (
+    <div>
+      <span style={{ paddingRight: '0.4rem' }}>{name}</span>
+      {maintenance && <FAIcon customClass="fired" icon="wrench" />}
+    </div>
+  );
+};

src/panel-triggers/components/Problems/Cells/LastChangeCell.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import moment from 'moment/moment';
+import { ProblemDTO } from '../../../../datasource/types';
+
+export function LastChangeCell(props: { original: ProblemDTO; customFormat?: string }) {
+  const { original, customFormat } = props;
+  const DEFAULT_TIME_FORMAT = 'DD MMM YYYY HH:mm:ss';
+  const timestamp = moment.unix(original.timestamp);
+  const format = customFormat || DEFAULT_TIME_FORMAT;
+  return <span>{timestamp.format(format)}</span>;
+}

src/panel-triggers/components/Problems/Cells/SeverityCell.tsx

@@ -0,0 +1,42 @@
+import { TriggerSeverity } from '../../../types';
+import { ProblemDTO } from '../../../../datasource/types';
+import _ from 'lodash';
+import React from 'react';
+import { DEFAULT_OK_COLOR } from '../constants';
+import { Cell } from '@tanstack/react-table';
+
+export function SeverityCell(props: {
+  cell: Cell<ProblemDTO, string>;
+  problemSeverityDesc: TriggerSeverity[];
+  markAckEvents?: boolean;
+  ackEventColor?: string;
+  okColor?: string;
+}) {
+  const { cell, problemSeverityDesc, markAckEvents, ackEventColor, okColor = DEFAULT_OK_COLOR } = props;
+  const {
+    row: {
+      original: { severity, acknowledged },
+    },
+  } = cell;
+  let color: string;
+
+  let severityDesc: TriggerSeverity;
+  const severityAsNum = Number(severity);
+  severityDesc = _.find(problemSeverityDesc, (s) => s.priority === severityAsNum);
+  if (severity && cell.getValue() === '1') {
+    severityDesc = _.find(problemSeverityDesc, (s) => s.priority === severityAsNum);
+  }
+
+  color = cell.getValue() === '0' ? okColor : severityDesc.color;
+
+  // Mark acknowledged triggers with different color
+  if (markAckEvents && acknowledged === '1') {
+    color = ackEventColor;
+  }
+
+  return (
+    <div className="severity-cell" style={{ background: color }}>
+      {severityDesc.severity}
+    </div>
+  );
+}

src/panel-triggers/components/Problems/Cells/StatusCell.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Cell } from '@tanstack/react-table';
+import { isNewProblem } from '../../../utils';
+import { ProblemDTO } from '../../../../datasource/types';
+import { DEFAULT_OK_COLOR, DEFAULT_PROBLEM_COLOR } from '../constants';
+
+export function StatusCellV8(props: { cell: Cell<ProblemDTO, string>; highlightNewerThan?: string }) {
+  const { cell, highlightNewerThan } = props;
+  const status = cell.getValue() === '0' ? 'RESOLVED' : 'PROBLEM';
+  const color = cell.getValue() === '0' ? DEFAULT_OK_COLOR : DEFAULT_PROBLEM_COLOR;
+  let newProblem = false;
+  if (highlightNewerThan) {
+    newProblem = isNewProblem(cell.row.original, highlightNewerThan);
+  }
+  return (
+    <span className={newProblem ? 'problem-status--new' : ''} style={{ color }}>
+      {status}
+    </span>
+  );
+}

src/panel-triggers/components/Problems/Cells/StatusIconCell.tsx

@@ -0,0 +1,22 @@
+import { ProblemDTO } from '../../../../datasource/types';
+import { isNewProblem } from '../../../utils';
+import React from 'react';
+import { Row } from '@tanstack/react-table';
+import { cx } from '@emotion/css';
+import { GFHeartIcon } from '../../../../components';
+
+export function StatusIconCellV8(props: { cellValue: string; row: Row<ProblemDTO>; highlightNewerThan?: string }) {
+  const { cellValue, row, highlightNewerThan } = props;
+  const status = cellValue === '0' ? 'ok' : 'problem';
+  let newProblem = false;
+  if (highlightNewerThan) {
+    newProblem = isNewProblem(row.original, highlightNewerThan);
+  }
+  const className = cx(
+    'zbx-problem-status-icon',
+    { 'problem-status--new': newProblem },
+    { 'zbx-problem': cellValue === '1' },
+    { 'zbx-ok': cellValue === '0' }
+  );
+  return <GFHeartIcon status={status} className={className} />;
+}

src/panel-triggers/components/Problems/Cells/TagCell.tsx

@@ -0,0 +1,27 @@
+import { ZBXTag } from '../../../../datasource/types';
+import { DataSourceRef } from '@grafana/schema';
+import React from 'react';
+import { EventTag } from '../../EventTag';
+
+interface TagCellProps {
+  tags?: ZBXTag[];
+  dataSource: DataSourceRef;
+  ctrlKey?: boolean;
+  shiftKey?: boolean;
+  handleTagClick: (tag: ZBXTag, datasource?: DataSourceRef | string, ctrlKey?: boolean, shiftKey?: boolean) => void;
+}
+
+export const TagCell = (props: TagCellProps) => {
+  const { tags, dataSource, handleTagClick } = props;
+
+  return [
+    (tags ?? []).map((tag) => (
+      <EventTag
+        key={tag.tag + tag.value}
+        tag={tag}
+        datasource={dataSource}
+        onClick={() => handleTagClick?.(tag, dataSource)}
+      />
+    )),
+  ];
+};

src/panel-triggers/components/Problems/ProblemDetails.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { css } from '@emotion/css';
-// eslint-disable-next-line
+import moment from 'moment/moment';
-import moment from 'moment';
 import { GrafanaTheme2, TimeRange } from '@grafana/data';
 import { DataSourceRef } from '@grafana/schema';
 import { Tooltip, useStyles2 } from '@grafana/ui';
@@ -15,13 +14,13 @@ import ProblemTimeline from './ProblemTimeline';
 import { AckButton, ExecScriptButton, ExploreButton, FAIcon, ModalController } from '../../../components';
 import { ExecScriptData, ExecScriptModal } from '../ExecScriptModal';
 import ProblemStatusBar from './ProblemStatusBar';
-import { RTRow } from '../../types';
 import { ProblemItems } from './ProblemItems';
 import { ProblemHosts, ProblemHostsDescription } from './ProblemHosts';
 import { ProblemGroups } from './ProblemGroups';
 import { ProblemExpression } from './ProblemExpression';
 
-interface Props extends RTRow<ProblemDTO> {
+interface Props {
+  original: ProblemDTO;
   rootWidth: number;
   timeRange: TimeRange;
   showTimeline?: boolean;

src/panel-triggers/components/Problems/ProblemTimeline.tsx

@@ -2,15 +2,16 @@ import React, { PureComponent } from 'react';
 import _ from 'lodash';
 // eslint-disable-next-line
 import moment from 'moment';
-import { ZBXEvent, ZBXAcknowledge } from '../../../datasource/types';
+import { ZBXAcknowledge, ZBXEvent } from '../../../datasource/types';
 import { TimeRange } from '@grafana/data';
-
+import {
-const DEFAULT_OK_COLOR = 'rgb(56, 189, 113)';
+  DEFAULT_OK_COLOR,
-const DEFAULT_PROBLEM_COLOR = 'rgb(215, 0, 0)';
+  DEFAULT_PROBLEM_COLOR,
-const EVENT_POINT_SIZE = 16;
+  EVENT_POINT_SIZE,
-const INNER_POINT_SIZE = 0.6;
+  EVENT_REGION_HEIGHT,
-const HIGHLIGHTED_POINT_SIZE = 1.1;
+  HIGHLIGHTED_POINT_SIZE,
-const EVENT_REGION_HEIGHT = Math.round(EVENT_POINT_SIZE * 0.6);
+  INNER_POINT_SIZE,
+} from './constants';
 
 export interface ProblemTimelineProps {
   events: ZBXEvent[];

src/panel-triggers/components/Problems/Problems.tsx

@@ -1,21 +1,30 @@
-import React, { PureComponent, useRef, useState, useMemo } from 'react';
+import React, { Fragment, useEffect, useMemo, useRef, useState } from 'react';
+import moment from 'moment/moment';
 import { cx } from '@emotion/css';
-import ReactTable from 'react-table-6';
-import _ from 'lodash';
-// eslint-disable-next-line
-import moment from 'moment';
-import { isNewProblem } from '../../utils';
-import { EventTag } from '../EventTag';
-import { ProblemDetails } from './ProblemDetails';
 import { AckProblemData } from '../AckModal';
-import { FAIcon, GFHeartIcon } from '../../../components';
+import { ProblemsPanelOptions, RTResized } from '../../types';
-import { ProblemsPanelOptions, RTCell, RTResized, TriggerSeverity } from '../../types';
 import { ProblemDTO, ZBXAlert, ZBXEvent, ZBXTag } from '../../../datasource/types';
 import { APIExecuteScriptResponse, ZBXScript } from '../../../datasource/zabbix/connectors/zabbix_api/types';
-import { AckCell } from './AckCell';
 import { TimeRange } from '@grafana/data';
 import { DataSourceRef } from '@grafana/schema';
+import { HostCell } from './Cells/HostCell';
+import { SeverityCell } from './Cells/SeverityCell';
+import { StatusIconCellV8 } from './Cells/StatusIconCell';
+import { StatusCellV8 } from './Cells/StatusCell';
+import { AckCell } from './Cells/AckCell';
+import { TagCell } from './Cells/TagCell';
+import { LastChangeCell } from './Cells/LastChangeCell';
+import {
+  ColumnResizeMode,
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  getExpandedRowModel,
+  getPaginationRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
 import { reportInteraction } from '@grafana/runtime';
+import { ProblemDetails } from './ProblemDetails';
 
 export interface ProblemListProps {
   problems: ProblemDTO[];
@@ -36,6 +45,8 @@ export interface ProblemListProps {
   onColumnResize?: (newResized: RTResized) => void;
 }
 
+const columnHelper = createColumnHelper<ProblemDTO>();
+
 export const ProblemList = (props: ProblemListProps) => {
   const {
     pageSize,
@@ -55,188 +66,345 @@ export const ProblemList = (props: ProblemListProps) => {
     onExecuteScript,
   } = props;
 
-  const [expanded, setExpanded] = useState({});
-  const [expandedProblems, setExpandedProblems] = useState({});
-  const [page, setPage] = useState(0);
   const rootRef = useRef(null);
 
+  // Define columns inside component to access props via closure
+  const columns = useMemo(() => {
+    const highlightNewerThan = panelOptions.highlightNewEvents && panelOptions.highlightNewerThan;
+
+    return [
+      columnHelper.accessor('host', {
+        header: 'Host',
+        size: 120,
+        cell: ({ cell }) => <HostCell name={cell.getValue()} maintenance={cell.row.original.hostInMaintenance} />,
+      }),
+      columnHelper.accessor('hostTechName', {
+        header: 'Host (Technical Name)',
+        size: 170,
+        cell: ({ cell }) => <HostCell name={cell.getValue()} maintenance={cell.row.original.hostInMaintenance} />,
+      }),
+      columnHelper.accessor('groups', {
+        header: 'Host Groups',
+        size: 150,
+        cell: ({ cell }) => {
+          const groups = cell.getValue() ?? [];
+          return <span>{groups.map((g) => g.name).join(', ')}</span>;
+        },
+      }),
+      columnHelper.accessor('proxy', {
+        header: 'Proxy',
+        size: 120,
+      }),
+      columnHelper.accessor('priority', {
+        header: 'Severity',
+        size: 80,
+        meta: {
+          className: 'problem-severity',
+        },
+        cell: ({ cell }) => (
+          <SeverityCell
+            cell={cell}
+            problemSeverityDesc={panelOptions.triggerSeverity}
+            markAckEvents={panelOptions.markAckEvents}
+            ackEventColor={panelOptions.ackEventColor}
+            okColor={panelOptions.okEventColor}
+          />
+        ),
+      }),
+      columnHelper.display({
+        id: 'statusIcon',
+        header: 'Status Icon',
+        size: 50,
+        meta: {
+          className: 'problem-status-icon',
+        },
+        cell: ({ cell }) => (
+          <StatusIconCellV8
+            cellValue={cell.row.original.value}
+            row={cell.row}
+            highlightNewerThan={highlightNewerThan}
+          />
+        ),
+      }),
+      columnHelper.accessor('value', {
+        header: 'Status',
+        size: 70,
+        cell: ({ cell }) => <StatusCellV8 cell={cell} highlightNewerThan={highlightNewerThan} />,
+      }),
+      columnHelper.accessor('name', {
+        header: 'Problem',
+        size: 250,
+        minSize: 200,
+        cell: ({ cell }) => <span className="problem-description">{cell.getValue()}</span>,
+      }),
+      columnHelper.accessor('opdata', {
+        header: 'Operational data',
+        size: 150,
+      }),
+      columnHelper.accessor('acknowledged', {
+        header: 'Ack',
+        size: 70,
+        cell: ({ cell }) => <AckCell acknowledges={cell.row.original.acknowledges} />,
+      }),
+      columnHelper.accessor('tags', {
+        header: 'Tags',
+        size: 150,
+        meta: {
+          className: 'problem-tags',
+        },
+        cell: ({ cell }) => (
+          <TagCell
+            tags={cell.getValue()}
+            dataSource={cell.row.original.datasource as DataSourceRef}
+            handleTagClick={onTagClick}
+          />
+        ),
+      }),
+      columnHelper.accessor('timestamp', {
+        id: 'age',
+        header: 'Age',
+        size: 100,
+        meta: {
+          className: 'problem-age',
+        },
+        cell: ({ cell }) => moment.unix(cell.row.original.timestamp),
+      }),
+      columnHelper.accessor('timestamp', {
+        id: 'lastchange',
+        header: 'Time',
+        size: 150,
+        meta: {
+          className: 'last-change',
+        },
+        cell: ({ cell }) => (
+          <LastChangeCell
+            original={cell.row.original}
+            customFormat={panelOptions.customLastChangeFormat && panelOptions.lastChangeFormat}
+          />
+        ),
+      }),
+      columnHelper.display({
+        header: null,
+        id: 'expander',
+        size: 60,
+        meta: {
+          className: 'custom-expander',
+        },
+        cell: ({ row }) => (
+          <button
+            onClick={row.getToggleExpandedHandler()}
+            style={{ cursor: 'pointer' }}
+            className={row.getIsExpanded() ? 'expanded' : ''}
+          >
+            <i className="fa fa-info-circle" />
+          </button>
+        ),
+      }),
+    ];
+  }, [panelOptions]);
+
+  // Convert resizedColumns from old format to column sizing state
+  const getColumnSizingFromResized = (resized?: RTResized): Record<string, number> => {
+    if (!resized || resized.length === 0) {
+      return {};
+    }
+    const sizing: Record<string, number> = {};
+    resized.forEach((col) => {
+      sizing[col.id] = col.value;
+    });
+    return sizing;
+  };
+
+  const [columnSizing, setColumnSizing] = useState<Record<string, number>>(
+    getColumnSizingFromResized(panelOptions.resizedColumns)
+  );
+  const [columnResizeMode] = useState<ColumnResizeMode>('onChange');
+
   // Default pageSize to 10 if not provided
   const effectivePageSize = pageSize || 10;
 
-  const handleProblemAck = (problem: ProblemDTO, data: AckProblemData) => {
+  // Pagination state
-    return onProblemAck!(problem, data);
+  const [pagination, setPagination] = useState({
-  };
+    pageIndex: 0,
+    pageSize: effectivePageSize,
+  });
 
-  const handlePageSizeChange = (pageSize, pageIndex) => {
+  // Update pagination when pageSize prop changes
-    onPageSizeChange?.(pageSize, pageIndex);
+  useEffect(() => {
-  };
+    setPagination((prev) => ({
+      ...prev,
+      pageSize: effectivePageSize,
+    }));
+  }, [effectivePageSize]);
 
-  const handleResizedChange = (newResized, event) => {
+  const table = useReactTable({
-    onColumnResize?.(newResized);
+    data: problems,
-  };
+    columns,
+    enableColumnResizing: true,
+    columnResizeMode,
+    state: {
+      columnSizing,
+      pagination,
+    },
+    onPaginationChange: setPagination,
+    meta: {
+      panelOptions,
+    },
+    initialState: {
+      columnVisibility: {
+        host: panelOptions.hostField,
+        hostTechName: panelOptions.hostTechNameField,
+        groups: panelOptions.hostGroups,
+        proxy: panelOptions.hostProxy,
+        severity: panelOptions.severityField,
+        statusIcon: panelOptions.statusIcon,
+        opdata: panelOptions.opdataField,
+        ack: panelOptions.ackField,
+        tags: panelOptions.showTags,
+        age: panelOptions.ageField,
+      },
+    },
+    onColumnSizingChange: (updater) => {
+      const newSizing = typeof updater === 'function' ? updater(columnSizing) : updater;
+      setColumnSizing(newSizing);
 
-  const handleExpandedChange = (expandedChange: any, event: any) => {
+      // Convert to old format for compatibility
-    reportInteraction('grafana_zabbix_panel_row_expanded', {});
+      const resized: RTResized = Object.entries(newSizing).map(([id, value]) => ({
-    const newExpandedProblems = {};
+        id,
+        value: value as number,
+      }));
 
-    for (const row in expandedChange) {
+      onColumnResize?.(resized);
-      const rowId = Number(row);
+    },
-      const problemIndex = effectivePageSize * page + rowId;
+    getRowCanExpand: () => true,
-      if (expandedChange[row] && problemIndex < problems.length) {
+    getCoreRowModel: getCoreRowModel(),
-        const expandedProblem = problems[problemIndex].eventid;
+    getExpandedRowModel: getExpandedRowModel(),
-        if (expandedProblem) {
+    getPaginationRowModel: getPaginationRowModel(),
-          newExpandedProblems[expandedProblem] = true;
+  });
-        }
-      }
-    }
-
-    const nextExpanded = { ...expanded };
-    nextExpanded[page] = expandedChange;
-
-    const nextExpandedProblems = { ...expandedProblems };
-    nextExpandedProblems[page] = newExpandedProblems;
-
-    setExpanded(nextExpanded);
-    setExpandedProblems(nextExpandedProblems);
-  };
 
   const handleTagClick = (tag: ZBXTag, datasource: DataSourceRef, ctrlKey?: boolean, shiftKey?: boolean) => {
     onTagClick?.(tag, datasource, ctrlKey, shiftKey);
   };
 
-  const getExpandedPage = (page: number) => {
+  // Helper functions for pagination interactions
-    const expandedProblemsPage = expandedProblems[page] || {};
+  const reportPageChange = (action: 'next' | 'prev') => {
-    const expandedPage = {};
+    reportInteraction('grafana_zabbix_panel_page_change', { action });
-
-    // Go through the page and search for expanded problems
-    const startIndex = effectivePageSize * page;
-    const endIndex = Math.min(startIndex + effectivePageSize, problems.length);
-    for (let i = startIndex; i < endIndex; i++) {
-      const problem = problems[i];
-      if (expandedProblemsPage[problem.eventid]) {
-        expandedPage[i - startIndex] = {};
-      }
-    }
-
-    return expandedPage;
   };
 
-  const columns = useMemo(() => {
+  const reportPageSizeChange = (pageSize: number) => {
-    const result = [];
+    reportInteraction('grafana_zabbix_panel_page_size_change', { pageSize });
-    const highlightNewerThan = panelOptions.highlightNewEvents && panelOptions.highlightNewerThan;
+  };
-    const statusCell = (props) => StatusCell(props, highlightNewerThan);
-    const statusIconCell = (props) => StatusIconCell(props, highlightNewerThan);
-    const hostNameCell = (props) => (
-      <HostCell name={props.original.host} maintenance={props.original.hostInMaintenance} />
-    );
-    const hostTechNameCell = (props) => (
-      <HostCell name={props.original.hostTechName} maintenance={props.original.hostInMaintenance} />
-    );
 
-    const allColumns = [
+  const handlePageInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      { Header: 'Host', id: 'host', show: panelOptions.hostField, Cell: hostNameCell },
+    const inputValue = e.target.value;
-      {
+    if (!inputValue) {
-        Header: 'Host (Technical Name)',
+      return;
-        id: 'hostTechName',
-        show: panelOptions.hostTechNameField,
-        Cell: hostTechNameCell,
-      },
-      { Header: 'Host Groups', accessor: 'groups', show: panelOptions.hostGroups, Cell: GroupCell },
-      { Header: 'Proxy', accessor: 'proxy', show: panelOptions.hostProxy },
-      {
-        Header: 'Severity',
-        show: panelOptions.severityField,
-        className: 'problem-severity',
-        width: 120,
-        accessor: (problem) => problem.priority,
-        id: 'severity',
-        Cell: (props) =>
-          SeverityCell(
-            props,
-            panelOptions.triggerSeverity,
-            panelOptions.markAckEvents,
-            panelOptions.ackEventColor,
-            panelOptions.okEventColor
-          ),
-      },
-      {
-        Header: '',
-        id: 'statusIcon',
-        show: panelOptions.statusIcon,
-        className: 'problem-status-icon',
-        width: 50,
-        accessor: 'value',
-        Cell: statusIconCell,
-      },
-      { Header: 'Status', accessor: 'value', show: panelOptions.statusField, width: 100, Cell: statusCell },
-      { Header: 'Problem', accessor: 'name', minWidth: 200, Cell: ProblemCell },
-      { Header: 'Operational data', accessor: 'opdata', show: panelOptions.opdataField, width: 150, Cell: OpdataCell },
-      {
-        Header: 'Ack',
-        id: 'ack',
-        show: panelOptions.ackField,
-        width: 70,
-        Cell: (props) => <AckCell {...props} />,
-      },
-      {
-        Header: 'Tags',
-        accessor: 'tags',
-        show: panelOptions.showTags,
-        className: 'problem-tags',
-        Cell: (props) => <TagCell {...props} onTagClick={handleTagClick} />,
-      },
-      {
-        Header: 'Age',
-        className: 'problem-age',
-        width: 100,
-        show: panelOptions.ageField,
-        accessor: 'timestamp',
-        id: 'age',
-        Cell: AgeCell,
-      },
-      {
-        Header: 'Time',
-        className: 'last-change',
-        width: 150,
-        accessor: 'timestamp',
-        id: 'lastchange',
-        Cell: (props) => LastChangeCell(props, panelOptions.customLastChangeFormat && panelOptions.lastChangeFormat),
-      },
-      { Header: '', className: 'custom-expander', width: 60, expander: true, Expander: CustomExpander },
-    ];
-    for (const column of allColumns) {
-      if (column.show || column.show === undefined) {
-        delete column.show;
-        result.push(column);
     }
-    }
+    const pageNumber = Number(inputValue);
-    return result;
+    const maxPage = table.getPageCount();
-  }, [panelOptions, handleTagClick]);
 
-  const pageSizeOptions = useMemo(() => {
+    // Clamp the value between 1 and maxPage
+    const clampedPage = Math.max(1, Math.min(pageNumber, maxPage));
+    const newPageIndex = clampedPage - 1;
+
+    if (newPageIndex !== table.getState().pagination.pageIndex) {
+      reportPageChange(newPageIndex > table.getState().pagination.pageIndex ? 'next' : 'prev');
+      table.setPageIndex(newPageIndex);
+    }
+  };
+
+  const handlePageInputBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+    // On blur, ensure the input shows a valid value
+    const inputValue = e.target.value;
+    if (!inputValue) {
+      e.target.value = String(table.getState().pagination.pageIndex + 1);
+      return;
+    }
+    const pageNumber = Number(inputValue);
+    const maxPage = table.getPageCount();
+    const clampedPage = Math.max(1, Math.min(pageNumber, maxPage));
+    e.target.value = String(clampedPage);
+  };
+
+  const handlePreviousPage = () => {
+    reportPageChange('prev');
+    table.previousPage();
+  };
+
+  const handleNextPage = () => {
+    reportPageChange('next');
+    table.nextPage();
+  };
+
+  const handlePageSizeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const newPageSize = Number(e.target.value);
+    reportPageSizeChange(newPageSize);
+    table.setPageSize(newPageSize);
+    onPageSizeChange?.(newPageSize, table.getState().pagination.pageIndex);
+  };
+
+  // Calculate page size options
+  const pageSizeOptions = React.useMemo(() => {
     let options = [5, 10, 20, 25, 50, 100];
     if (pageSize) {
       options.push(pageSize);
-      options = _.uniq(_.sortBy(options));
+      options = Array.from(new Set(options)).sort((a, b) => a - b);
     }
     return options;
   }, [pageSize]);
 
   return (
     <div className={cx('panel-problems', { [`font-size--${fontSize}`]: !!fontSize })} ref={rootRef}>
-      <ReactTable
+      <div className={`react-table-v8-wrapper ${loading ? 'is-loading' : ''}`}>
-        data={problems}
+        {loading && (
-        columns={columns}
+          <div className="-loading -active">
-        defaultPageSize={10}
+            <div className="-loading-inner">Loading...</div>
-        pageSize={effectivePageSize}
+          </div>
-        pageSizeOptions={pageSizeOptions}
+        )}
-        resized={panelOptions.resizedColumns}
+        <table className="react-table-v8">
-        minRows={0}
+          <thead>
-        loading={loading}
+            {table.getHeaderGroups().map((headerGroup) => (
-        noDataText="No problems found"
+              <tr key={headerGroup.id}>
-        SubComponent={(props) => (
+                {headerGroup.headers.map((header) => (
+                  <th key={header.id} style={{ width: `${header.getSize()}px` }}>
+                    {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                    {header.column.getCanResize() && (
+                      <div
+                        onMouseDown={header.getResizeHandler()}
+                        onTouchStart={header.getResizeHandler()}
+                        className={`resizer ${header.column.getIsResizing() ? 'isResizing' : ''}`}
+                      />
+                    )}
+                  </th>
+                ))}
+              </tr>
+            ))}
+          </thead>
+          <tbody>
+            {table.getRowModel().rows.length === 0 ? (
+              <tr>
+                <td colSpan={table.getAllColumns().length} className="no-data-cell">
+                  <div className="rt-noData">No problems found</div>
+                </td>
+              </tr>
+            ) : (
+              table.getRowModel().rows.map((row, rowIndex) => (
+                <Fragment key={row.id}>
+                  <tr className={rowIndex % 2 === 1 ? 'even-row' : 'odd-row'}>
+                    {row.getVisibleCells().map((cell) => {
+                      const className = (cell.column.columnDef.meta as any)?.className;
+                      return (
+                        <td key={cell.id} className={className} style={{ width: `${cell.column.getSize()}px` }}>
+                          {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                        </td>
+                      );
+                    })}
+                  </tr>
+                  {row.getIsExpanded() && (
+                    <tr className={rowIndex % 2 === 1 ? 'even-row-expanded' : 'odd-row-expanded'}>
+                      <td colSpan={row.getVisibleCells().length}>
                         <ProblemDetails
-            {...props}
+                          original={row.original}
                           rootWidth={rootRef?.current?.clientWidth || 0}
                           timeRange={timeRange}
                           showTimeline={panelOptions.problemTimeline}
@@ -245,178 +413,58 @@ export const ProblemList = (props: ProblemListProps) => {
                           getProblemEvents={getProblemEvents}
                           getProblemAlerts={getProblemAlerts}
                           getScripts={getScripts}
-            onProblemAck={handleProblemAck}
+                          onProblemAck={onProblemAck}
                           onExecuteScript={onExecuteScript}
                           onTagClick={handleTagClick}
-            subRows={false}
                         />
+                      </td>
+                    </tr>
                   )}
-        expanded={getExpandedPage(page)}
+                </Fragment>
-        onExpandedChange={handleExpandedChange}
+              ))
-        onPageChange={(newPage) => {
+            )}
-          reportInteraction('grafana_zabbix_panel_page_change', {
+          </tbody>
-            action: newPage > page ? 'next' : 'prev',
+        </table>
-          });
-
-          setPage(newPage);
-        }}
-        onPageSizeChange={handlePageSizeChange}
-        onResizedChange={handleResizedChange}
-      />
       </div>
-  );
+      <div className="pagination-v8">
-};
+        <div className="pagination-v8-controls">
-
+          <button
-interface HostCellProps {
+            className="pagination-v8-btn -btn"
-  name: string;
+            onClick={handlePreviousPage}
-  maintenance: boolean;
+            disabled={!table.getCanPreviousPage()}
-}
+          >
-
+            Previous
-const HostCell: React.FC<HostCellProps> = ({ name, maintenance }) => {
+          </button>
-  return (
+          <span className="pagination-v8-info">
-    <div>
+            Page{' '}
-      <span style={{ paddingRight: '0.4rem' }}>{name}</span>
+            <input
-      {maintenance && <FAIcon customClass="fired" icon="wrench" />}
+              type="number"
-    </div>
+              className="pagination-v8-page-input"
-  );
+              value={table.getState().pagination.pageIndex + 1}
-};
+              onChange={handlePageInputChange}
-
+              onBlur={handlePageInputBlur}
-function SeverityCell(
+              min={1}
-  props: RTCell<ProblemDTO>,
+              max={table.getPageCount()}
-  problemSeverityDesc: TriggerSeverity[],
+            />{' '}
-  markAckEvents?: boolean,
+            of <strong>{table.getPageCount()}</strong>
-  ackEventColor?: string,
-  okColor = DEFAULT_OK_COLOR
-) {
-  const problem = props.original;
-  let color: string;
-
-  let severityDesc: TriggerSeverity;
-  const severity = Number(problem.severity);
-  severityDesc = _.find(problemSeverityDesc, (s) => s.priority === severity);
-  if (problem.severity && problem.value === '1') {
-    severityDesc = _.find(problemSeverityDesc, (s) => s.priority === severity);
-  }
-
-  color = problem.value === '0' ? okColor : severityDesc.color;
-
-  // Mark acknowledged triggers with different color
-  if (markAckEvents && problem.acknowledged === '1') {
-    color = ackEventColor;
-  }
-
-  return (
-    <div className="severity-cell" style={{ background: color }}>
-      {severityDesc.severity}
-    </div>
-  );
-}
-
-const DEFAULT_OK_COLOR = 'rgb(56, 189, 113)';
-const DEFAULT_PROBLEM_COLOR = 'rgb(215, 0, 0)';
-
-function StatusCell(props: RTCell<ProblemDTO>, highlightNewerThan?: string) {
-  const status = props.value === '0' ? 'RESOLVED' : 'PROBLEM';
-  const color = props.value === '0' ? DEFAULT_OK_COLOR : DEFAULT_PROBLEM_COLOR;
-  let newProblem = false;
-  if (highlightNewerThan) {
-    newProblem = isNewProblem(props.original, highlightNewerThan);
-  }
-  return (
-    <span className={newProblem ? 'problem-status--new' : ''} style={{ color }}>
-      {status}
           </span>
-  );
+          <select
-}
+            name="pagination-v8-select"
-
+            className="pagination-v8-select"
-function StatusIconCell(props: RTCell<ProblemDTO>, highlightNewerThan?: string) {
+            value={table.getState().pagination.pageSize}
-  const status = props.value === '0' ? 'ok' : 'problem';
+            onChange={handlePageSizeChange}
-  let newProblem = false;
+          >
-  if (highlightNewerThan) {
+            {pageSizeOptions.map((size) => (
-    newProblem = isNewProblem(props.original, highlightNewerThan);
+              <option key={size} value={size}>
-  }
+                {size} rows
-  const className = cx(
+              </option>
-    'zbx-problem-status-icon',
+            ))}
-    { 'problem-status--new': newProblem },
+          </select>
-    { 'zbx-problem': props.value === '1' },
+          <button className="pagination-v8-btn -btn" onClick={handleNextPage} disabled={!table.getCanNextPage()}>
-    { 'zbx-ok': props.value === '0' }
+            Next
-  );
+          </button>
-  return <GFHeartIcon status={status} className={className} />;
+        </div>
-}
+      </div>
-
-function GroupCell(props: RTCell<ProblemDTO>) {
-  let groups = '';
-  if (props.value && props.value.length) {
-    groups = props.value.map((g) => g.name).join(', ');
-  }
-  return <span>{groups}</span>;
-}
-
-function ProblemCell(props: RTCell<ProblemDTO>) {
-  // const comments = props.original.comments;
-  return (
-    <div>
-      <span className="problem-description">{props.value}</span>
-      {/* {comments && <FAIcon icon="file-text-o" customClass="comments-icon" />} */}
     </div>
   );
-}
-
-function OpdataCell(props: RTCell<ProblemDTO>) {
-  const problem = props.original;
-  return (
-    <div>
-      <span>{problem.opdata}</span>
-    </div>
-  );
-}
-
-function AgeCell(props: RTCell<ProblemDTO>) {
-  const problem = props.original;
-  const timestamp = moment.unix(problem.timestamp);
-  const age = timestamp.fromNow(true);
-  return <span>{age}</span>;
-}
-
-function LastChangeCell(props: RTCell<ProblemDTO>, customFormat?: string) {
-  const DEFAULT_TIME_FORMAT = 'DD MMM YYYY HH:mm:ss';
-  const problem = props.original;
-  const timestamp = moment.unix(problem.timestamp);
-  const format = customFormat || DEFAULT_TIME_FORMAT;
-  const lastchange = timestamp.format(format);
-  return <span>{lastchange}</span>;
-}
-
-interface TagCellProps extends RTCell<ProblemDTO> {
-  onTagClick: (tag: ZBXTag, datasource: DataSourceRef | string, ctrlKey?: boolean, shiftKey?: boolean) => void;
-}
-
-class TagCell extends PureComponent<TagCellProps> {
-  handleTagClick = (tag: ZBXTag, datasource: DataSourceRef | string, ctrlKey?: boolean, shiftKey?: boolean) => {
-    if (this.props.onTagClick) {
-      this.props.onTagClick(tag, datasource, ctrlKey, shiftKey);
-    }
 };
-
-  render() {
-    const tags = this.props.value || [];
-    return [
-      tags.map((tag) => (
-        <EventTag
-          key={tag.tag + tag.value}
-          tag={tag}
-          datasource={this.props.original.datasource}
-          onClick={this.handleTagClick}
-        />
-      )),
-    ];
-  }
-}
-
-function CustomExpander(props: RTCell<any>) {
-  return (
-    <span className={props.isExpanded ? 'expanded' : ''}>
-      <i className="fa fa-info-circle"></i>
-    </span>
-  );
-}

src/panel-triggers/components/Problems/constants.ts

@@ -0,0 +1,6 @@
+export const DEFAULT_OK_COLOR = 'rgb(56, 189, 113)';
+export const DEFAULT_PROBLEM_COLOR = 'rgb(215, 0, 0)';
+export const EVENT_POINT_SIZE = 16;
+export const INNER_POINT_SIZE = 0.6;
+export const HIGHLIGHTED_POINT_SIZE = 1.1;
+export const EVENT_REGION_HEIGHT = Math.round(EVENT_POINT_SIZE * 0.6);

src/panel-triggers/types.ts

@@ -125,50 +125,6 @@ export interface TriggerSeverity {
 
 export type TriggerColor = string;
 
-export interface RTRow<T> {
-  /** the materialized row of data */
-  row: any;
-  /** the original row of data */
-  original: T;
-  /** the index of the row in the original array */
-  index: number;
-  /** the index of the row relative to the current view */
-  viewIndex: number;
-  /** the nesting level of this row */
-  level: number;
-  /** the nesting path of this row */
-  nestingPath: number[];
-  /** true if this row's values were aggregated */
-  aggregated?: boolean;
-  /** true if this row was produced by a pivot */
-  groupedByPivot?: boolean;
-  /** any sub rows defined by the `subRowKey` prop */
-  subRows?: boolean;
-}
-
-export interface RTCell<T> extends RTRow<T> {
-  /** true if this row is expanded */
-  isExpanded?: boolean;
-  /** the materialized value of this cell */
-  value: any;
-  /** the resize information for this cell's column */
-  resized: any[];
-  /** true if the column is visible */
-  show?: boolean;
-  /** the resolved width of this cell */
-  width: number;
-  /** the resolved maxWidth of this cell */
-  maxWidth: number;
-  /** the resolved tdProps from `getTdProps` for this cell */
-  tdProps: any;
-  /** the resolved column props from 'getProps' for this cell's column */
-  columnProps: any;
-  /** the resolved array of classes for this cell */
-  classes: string[];
-  /** the resolved styles for this cell */
-  styles: any;
-}
-
 export interface RTResize {
   id: string;
   value: number;

src/styles/_panel-problems.scss

@@ -1,4 +1,6 @@
 .panel-problems {
+  display: flex;
+  flex-direction: column;
   height: 100%;
 
   .fa-icon-container {
@@ -15,213 +17,26 @@
     }
   }
 
-  // <ReactTable /> styles
+  // <react-table-v8 /> styles
-  .ReactTable {
+  .react-table-v8-wrapper {
     height: 100%;
     display: flex;
     flex-direction: column;
-    overflow: hidden;
+    overflow-y: auto;
-
+    overflow-x: auto;
-    .rt-table {
-      height: 100%;
   }
 
-    .rt-thead {
+  .react-table-v8 {
-      &.-header {
+    tbody tr {
-        height: 2.4em;
-      }
-
-      .rt-th {
-        &.-sort-desc {
-          box-shadow: inset 0 -3px 0 0 $blue;
-        }
-
-        &.-sort-asc {
-          box-shadow: inset 0 3px 0 0 $blue;
-        }
-      }
-    }
-
-    .rt-tr-group {
-      flex: 0 0 auto;
       border-bottom: solid 1px $problems-border-color;
-      // border-left: solid 2px transparent;
 
       &:last-child {
         border-bottom: solid 1px $problems-border-color;
-      }
-
-      &:hover {
-
-        .rt-tr {
-          background: $problems-table-row-hovered;
-          z-index: 1;
-        }
-
-        .rt-tr.-even {
-          background: $problems-table-row-hovered;
-        }
-      }
-
-      .rt-tr {
-        .rt-td {
-          border: 0;
-          transition: 0s;
-        }
-
-        &.-even {
-          background: $problems-table-stripe;
-        }
-      }
-    }
-
-    .rt-noData {
-      z-index: 2;
-      background: unset;
-      color: $text-muted;
-    }
-
-    .pagination-bottom {
-      margin-top: auto;
-      flex: 1 0 auto;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      $footer-height: 30px;
-      padding-top: 4px;
-      margin-left: -10px;
-      margin-right: -10px;
-      box-shadow: 0px -2px 5px $problems-footer-shadow;
-      z-index: 1;
-
-      .-pagination {
-        margin-top: auto;
-        align-items: center;
-        padding: 0px;
-
-        .-previous {
-          flex: 1;
-          height: $footer-height;
-        }
-
-        .-center {
-          flex: 3;
-          width: 32rem;
-
-          .-pageJump {
-            margin: 0px 0.4rem;
-
-            input {
-              height: $footer-height;
-            }
-          }
-
-          .select-wrap.-pageSizeOptions select {
-            width: 8rem;
-            height: $footer-height;
-          }
-        }
-
-        .-next {
-          flex: 1;
-          height: $footer-height;
-        }
-      }
-    }
-
-    .problem-severity {
-
-      &.rt-td {
-        padding: 0px;
-      }
-
-      .severity-cell {
-        width: 100%;
-        height: 100%;
-        padding: 0.45em 0 0.45em 1.1em;
-        color: $white;
-        font-weight: 500;
-      }
-    }
-
-    .problem-status--new {
-      animation: blink-opacity 2s ease-in-out infinite;
-    }
-
-    .rt-tr .rt-td {
-      &.custom-expander {
-        text-align: center;
-        padding: 0.6em 0 0 0;
-
-        i {
-          color: #676767;
-          font-size: 1.2rem;
-        }
-
-        & .expanded {
-          i {
-            color: $problem-expander-expanded-color;
-          }
-        }
-      }
-
-      &.custom-expander:hover {
-        background-color: $problem-expander-highlighted-background;
-
-        i {
-          color: $problem-expander-highlighted-color;
-        }
-      }
-
-      &.last-change {
         text-align: left;
       }
-
-      &.problem-status-icon {
-        padding: 0;
-        margin-top: 0;
-        font-size: 1.5em;
-
-        i {
-          width: 100%;
-          padding-left: 0.6em;
-          text-align: center;
-
-          &.zbx-problem {
-            color: $problem-icon-problem-color;
-          }
-
-          &.zbx-ok {
-            color: $problem-icon-ok-color;
-          }
-        }
-      }
-    }
-
-    .comments-icon {
-      float: right;
-      padding-right: 0.6rem;
-
-      i {
-        color: $gray-2;
-      }
-    }
-
-    .problem-tags {
-      &.rt-td {
-        padding-left: 0.6rem;
-      }
-
-      .label-tag, .zbx-tag {
-        cursor: pointer;
-        margin-right: 0.6rem;
-
-        &.highlighted {
-          box-shadow: 0 0 10px $orange;
-        }
-      }
     }
 
+    // Problem details container styles for react-table-v8
     .problem-details-container {
       display: flex;
       flex-direction: column;
@@ -293,7 +108,6 @@
 
         .description-label {
           font-weight: 500;
-          // font-style: italic;
           color: $text-muted;
           cursor: pointer;
         }
@@ -350,7 +164,6 @@
         }
       }
 
-
       .problem-statusbar {
         margin-bottom: 0.6rem;
         display: flex;
@@ -439,7 +252,6 @@
         }
       }
 
-
       .problem-details-right {
         flex: 0 0 auto;
         padding: 0.5rem 2rem;
@@ -582,45 +394,18 @@
     }
   }
 
-  @for $i from 8 through 9 {
+  // Pagination v8 styles for panel-problems
-    .item-#{$i} {
+  .pagination-v8 {
-      width: 2em * $i;
+    margin-top: auto;
-    }
+    flex: 1 0 auto;
-    &.font-size--#{$i * 10} .rt-table {
+    display: flex;
-      font-size: 1% * $i * 10;
+    flex-direction: column;
-
+    align-items: center;
-      & .rt-tr .rt-td.custom-expander i {
+    padding-top: 4px;
-        font-size: calc(1.2rem * $i / 10);
+    margin-left: -10px;
-      }
+    margin-right: -10px;
-
+    box-shadow: 0px -2px 5px $problems-footer-shadow;
-      .problem-details-container.show {
+    z-index: 1;
-        font-size: 13px;
-      }
-    }
-  }
-
-  @for $i from 11 through 25 {
-    .item-#{$i} {
-      width: 2em * $i;
-    }
-    &.font-size--#{$i * 10} {
-      .rt-table {
-        font-size: 1% * $i * 10;
-
-        & .rt-tr .rt-td.custom-expander i {
-          font-size: calc(1.2rem * $i / 10);
-        }
-
-        .problem-details-container.show {
-          font-size: 13px;
-        }
-      }
-
-      .rt-noData {
-        top: 4.5em;
-        font-size: 1% * $i * 10;
-      }
-    }
   }
 }
 

src/styles/_react-table.scss

@@ -1,67 +1,314 @@
-// ReactTable basic overrides (does not include pivot/groups/filters)
+// ReactTable v8 styles (native table elements)
-
+.react-table-v8-wrapper {
-.ReactTable {
+  position: relative;
-  border: none;
-}
-
-.ReactTable .rt-table {
-  // Allow some space for the no-data text
   min-height: 90px;
+  overflow-x: auto;
+  overflow-y: auto;
+  width: 100%;
+  flex-grow: 1;
+
+  // Loading overlay (same as v6)
+  .-loading {
+    display: block;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: $input-bg;
+    transition: all 0.3s ease;
+    z-index: -1;
+    opacity: 0;
+    pointer-events: none;
+
+    &.-active {
+      opacity: 0.8;
+      z-index: 10;
+      pointer-events: all;
     }
 
-.ReactTable .rt-thead.-header {
+    > div {
+      position: absolute;
+      display: block;
+      text-align: center;
+      width: 100%;
+      top: 50%;
+      left: 0;
+      font-size: 15px;
+      color: $input-color;
+      transform: translateY(-50%);
+      transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    }
+  }
+
+  // Reduce table opacity when loading
+  &.is-loading {
+    .react-table-v8 {
+      opacity: 0.3;
+      pointer-events: none;
+    }
+  }
+}
+
+.react-table-v8 {
+  width: 100%;
+  border: none;
+  border-collapse: separate;
+  border-spacing: 0;
+  table-layout: fixed;
+
+  // Header styles
+  thead {
+    tr {
       box-shadow: none;
       background: $list-item-bg;
       border-top: 2px solid $body-bg;
       border-bottom: 2px solid $body-bg;
       height: 2em;
     }
-.ReactTable .rt-thead.-header .rt-th {
+
+    th {
       text-align: left;
       color: $blue;
       font-weight: 500;
-}
-.ReactTable .rt-thead .rt-td,
-.ReactTable .rt-thead .rt-th {
       padding: 0.45em 0 0.45em 1.1em;
       border-right: none;
       box-shadow: none;
+      background: transparent;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      box-sizing: border-box;
+      position: relative;
+
+      .resizer {
+        position: absolute;
+        right: 0;
+        top: 0;
+        height: 100%;
+        width: 5px;
+        background: rgba(0, 0, 0, 0.1);
+        cursor: col-resize;
+        user-select: none;
+        touch-action: none;
+        opacity: 0;
+        z-index: 1;
+        transition: opacity 0.2s;
+
+        &:hover,
+        &.isResizing {
+          opacity: 1;
+          background: $blue;
         }
-.ReactTable .rt-tbody .rt-td {
+      }
+
+      &:hover .resizer {
+        opacity: 0.5;
+      }
+    }
+  }
+
+  // Body styles
+  tbody {
+    td {
       padding: 0.45em 0 0.45em 1.1em;
-  border-bottom: 2px solid $body-bg;
+      border-bottom: solid 1px $problems-border-color;
-  border-right: 2px solid $body-bg;
+      white-space: nowrap;
-}
+      overflow: hidden;
-.ReactTable .rt-tbody .rt-td:last-child {
+      text-overflow: ellipsis;
+      box-sizing: border-box;
+
+      &:last-child {
         border-right: none;
       }
-.ReactTable .-pagination {
+    }
+
+    // Severity column styling
+    td.problem-severity {
+      padding: 0;
+      position: relative;
+
+      .severity-cell {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        padding: 0.45em 0 0.45em 1.1em;
+        color: $white;
+        font-weight: 500;
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    // Tags column styling
+    td.problem-tags {
+      padding-left: 0.6rem;
+
+      .label-tag,
+      .zbx-tag {
+        cursor: pointer;
+        margin-right: 0.6rem;
+
+        &.highlighted {
+          box-shadow: 0 0 10px $orange;
+        }
+      }
+    }
+
+    // No data cell styling
+    td.no-data-cell {
+      text-align: center;
+      padding: 0;
+      background: transparent;
+      border: none;
+
+      .rt-noData {
+        position: relative;
+        top: 0;
+        left: 0;
+        z-index: 2;
+        background: unset;
+        color: $text-muted;
+        padding: 2rem 0;
+      }
+    }
+
+    tr {
+      background: transparent;
+
+      // Alternating row colors (stripe even rows with solid color)
+      &.even-row,
+      &.even-row-expanded {
+        background: $problems-table-stripe;
+
+        td {
+          background: inherit;
+        }
+      }
+
+      &:hover:not(.no-data-row) td {
+        background: $problems-table-row-hovered;
+      }
+    }
+
+    td.custom-expander {
+      text-align: center;
+      padding: 0;
+      position: relative;
+
+      button {
+        background: transparent;
+        border: none;
+        padding: 0;
+        cursor: pointer;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+
+        i {
+          color: #676767;
+          font-size: 1.2rem;
+        }
+
+        &.expanded i {
+          color: $problem-expander-expanded-color;
+        }
+
+        &:hover {
+          background-color: $problem-expander-highlighted-background;
+
+          i {
+            color: $problem-expander-highlighted-color;
+          }
+        }
+      }
+    }
+  }
+}
+
+// Pagination v8 styles
+.pagination-v8 {
+  margin-top: $panel-margin;
   border-top: none;
   box-shadow: none;
-  margin-top: $panel-margin;
 }
-.ReactTable .-pagination .-btn {
+
+.pagination-v8-controls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.pagination-v8-btn {
+  &.-btn {
     color: $blue;
     background: $list-item-bg;
-}
+    border: 1px solid transparent;
-.ReactTable .-pagination input,
+    padding: 0.5rem 1.5rem;
-.ReactTable .-pagination select {
+    cursor: pointer;
-  color: $input-color;
+    border-radius: 3px;
-  background-color: $input-bg;
+
-}
+    &:hover:not(:disabled) {
-.ReactTable .-loading {
-  background: $input-bg;
-}
-.ReactTable .-loading.-active {
       opacity: 0.8;
     }
-.ReactTable .-loading > div {
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+}
+
+.pagination-v8-info {
+  color: $text-color;
+  margin: 0 0.25rem;
+  text-align: center;
+}
+
+.pagination-v8-page-input {
+  width: 50px;
+  color: $input-color;
+  background-color: $input-bg;
+  padding: 0.5rem;
+  border-radius: 3px;
+  text-align: center;
+
+  &:focus {
+    outline: none;
+    border-color: $blue;
+  }
+}
+
+.pagination-v8-select {
+  color: $input-color;
+  background-color: $input-bg;
+  border: 1px solid $input-border-color;
+  padding: 0.5rem 0.5rem;
+  border-radius: 3px;
+  cursor: pointer;
+  height: auto;
+  line-height: normal;
+  width: auto;
+  min-width: 80px;
+
+  &:focus {
+    outline: none;
+    border-color: $blue;
+  }
+
+  option {
+    background-color: $input-bg;
     color: $input-color;
   }
-.ReactTable .rt-tr .rt-td:last-child {
-  text-align: right;
-}
-.ReactTable .rt-noData {
-  top: 60px;
-  z-index: inherit;
 }

src/styles/grafana-zabbix.scss

@@ -1,6 +1,4 @@
 // DEPENDENCIES
-@import '../../node_modules/react-table-6/react-table.css';
-
 @import 'variables';
 @import 'panel-triggers';
 @import 'panel-problems';

yarn.lock

@@ -3059,6 +3059,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tanstack/react-table@npm:^8.21.3":
+  version: 8.21.3
+  resolution: "@tanstack/react-table@npm:8.21.3"
+  dependencies:
+    "@tanstack/table-core": "npm:8.21.3"
+  peerDependencies:
+    react: ">=16.8"
+    react-dom: ">=16.8"
+  checksum: 10c0/85d1d0fcb690ecc011f68a5a61c96f82142e31a0270dcf9cbc699a6f36715b1653fe6ff1518302a6d08b7093351fc4cabefd055a7db3cd8ac01e068956b0f944
+  languageName: node
+  linkType: hard
+
 "@tanstack/react-virtual@npm:^3.5.1":
   version: 3.13.12
   resolution: "@tanstack/react-virtual@npm:3.13.12"
@@ -3071,6 +3083,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tanstack/table-core@npm:8.21.3":
+  version: 8.21.3
+  resolution: "@tanstack/table-core@npm:8.21.3"
+  checksum: 10c0/40e3560e6d55e07cc047024aa7f83bd47a9323d21920d4adabba8071fd2d21230c48460b26cedf392588f8265b9edc133abb1b0d6d0adf4dae0970032900a8c9
+  languageName: node
+  linkType: hard
+
 "@tanstack/virtual-core@npm:3.13.12":
   version: 3.13.12
   resolution: "@tanstack/virtual-core@npm:3.13.12"
@@ -7389,6 +7408,7 @@ __metadata:
     "@swc/core": "npm:^1.3.90"
     "@swc/helpers": "npm:^0.5.0"
     "@swc/jest": "npm:^0.2.26"
+    "@tanstack/react-table": "npm:^8.21.3"
     "@testing-library/jest-dom": "npm:6.1.4"
     "@testing-library/react": "npm:14.0.0"
     "@types/glob": "npm:^8.0.0"
@@ -7432,7 +7452,6 @@ __metadata:
     react: "npm:18.3.1"
     react-dom: "npm:18.3.1"
     react-router-dom: "npm:^6.22.0"
-    react-table-6: "npm:6.11.0"
     react-use: "npm:17.4.0"
     replace-in-file-webpack-plugin: "npm:^1.0.6"
     rxjs: "npm:7.8.2"
@@ -11372,19 +11391,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-table-6@npm:6.11.0":
-  version: 6.11.0
-  resolution: "react-table-6@npm:6.11.0"
-  dependencies:
-    classnames: "npm:^2.2.5"
-  peerDependencies:
-    prop-types: ^15.5.0
-    react: ^16.x.x
-    react-dom: ^16.x.x
-  checksum: 10c0/4b65f88320f00bcbf4782cb95a4413c549330dbdbc79d6432f9d6800453f9db376a086a162e464b4d1cddf9e1b9a692b0a777d79a85aa4b1e1661bf2caaad7e1
-  languageName: node
-  linkType: hard
-
 "react-table@npm:7.8.0":
   version: 7.8.0
   resolution: "react-table@npm:7.8.0"