chore(deps): upgrade react-table to v8 [EE-4837] (#8245)

app/react/nomad/jobs/EventsView/EventsDatatable/EventsDatatable.tsx

@@ -1,39 +1,31 @@
 import { History } from 'lucide-react';
-import { useStore } from 'zustand';
 
 import { NomadEvent } from '@/react/nomad/types';
 
 import { Datatable } from '@@/datatables';
-import { useSearchBarState } from '@@/datatables/SearchBar';
 import { createPersistedStore } from '@@/datatables/types';
+import { useTableState } from '@@/datatables/useTableState';
 
-import { useColumns } from './columns';
+import { columns } from './columns';
 
 export interface EventsDatatableProps {
   data: NomadEvent[];
   isLoading: boolean;
 }
 
-const storageKey = 'events';
+const storageKey = 'nomad_events';
 
-const settingsStore = createPersistedStore(storageKey, 'Date');
+const settingsStore = createPersistedStore(storageKey, 'date');
 
 export function EventsDatatable({ data, isLoading }: EventsDatatableProps) {
-  const columns = useColumns();
-  const settings = useStore(settingsStore);
-  const [search, setSearch] = useSearchBarState(storageKey);
+  const tableState = useTableState(settingsStore, storageKey);
 
   return (
     <Datatable
       isLoading={isLoading}
+      settingsManager={tableState}
       columns={columns}
       dataset={data}
-      initialPageSize={settings.pageSize}
-      onPageSizeChange={settings.setPageSize}
-      initialSortBy={settings.sortBy}
-      onSortByChange={settings.setSortBy}
-      searchValue={search}
-      onSearchChange={setSearch}
       titleIcon={History}
       title="Events"
       totalCount={data.length}

app/react/nomad/jobs/EventsView/EventsDatatable/columns/date.tsx

@@ -1,12 +1,12 @@
-import { Column } from 'react-table';
-
-import { NomadEvent } from '@/react/nomad/types';
 import { isoDate } from '@/portainer/filters/filters';
 
-export const date: Column<NomadEvent> = {
-  Header: 'Date',
-  accessor: (row) => (row.Date ? isoDate(row.Date) : '-'),
+import { columnHelper } from './helper';
+
+export const date = columnHelper.accessor('Date', {
+  header: 'Date',
   id: 'date',
-  disableFilters: true,
-  canHide: true,
-};
+  cell: ({ getValue }) => {
+    const date = getValue();
+    return date ? isoDate(date) : '-';
+  },
+});

app/react/nomad/jobs/EventsView/EventsDatatable/columns/helper.ts

@@ -0,0 +1,5 @@
+import { createColumnHelper } from '@tanstack/react-table';
+
+import { NomadEvent } from '@/react/nomad/types';
+
+export const columnHelper = createColumnHelper<NomadEvent>();

app/react/nomad/jobs/EventsView/EventsDatatable/columns/index.tsx

@@ -1,9 +1,5 @@
-import { useMemo } from 'react';
-
 import { date } from './date';
 import { type } from './type';
 import { message } from './message';
 
-export function useColumns() {
-  return useMemo(() => [date, type, message], []);
-}
+export const columns = [date, type, message];

app/react/nomad/jobs/EventsView/EventsDatatable/columns/message.tsx

@@ -1,11 +1,6 @@
-import { Column } from 'react-table';
+import { columnHelper } from './helper';
 
-import { NomadEvent } from '@/react/nomad/types';
-
-export const message: Column<NomadEvent> = {
-  Header: 'Message',
-  accessor: 'Message',
+export const message = columnHelper.accessor('Message', {
+  header: 'Message',
   id: 'message',
-  disableFilters: true,
-  canHide: true,
-};
+});

app/react/nomad/jobs/EventsView/EventsDatatable/columns/type.tsx

@@ -1,11 +1,6 @@
-import { Column } from 'react-table';
+import { columnHelper } from './helper';
 
-import { NomadEvent } from '@/react/nomad/types';
-
-export const type: Column<NomadEvent> = {
-  Header: 'Type',
-  accessor: 'Type',
+export const type = columnHelper.accessor('Type', {
+  header: 'Type',
   id: 'type',
-  disableFilters: true,
-  canHide: true,
-};
+});