docs(table): example sample improvement & react-table@8 migration

package.json

@@ -70,6 +70,7 @@
     "@storybook/test": "^8.4.1",
     "@storybook/test-runner": "^0.19.1",
     "@storybook/types": "^8.4.1",
+    "@tanstack/react-table": "^8.20.5",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^16.0.0",

packages/core/src/Table/stories/TableHooks/TableHooks.stories.tsx

@@ -30,7 +30,7 @@ import { UseHvHeaderGroups } from "./UseHvHeaderGroups";
 import UseHvHeaderGroupsRaw from "./UseHvHeaderGroups?raw";
 import { UseHvHooks } from "./UseHvHooks";
 import UseHvHooksRaw from "./UseHvHooks?raw";
-import { UseHvPagination } from "./UseHvPagination";
+import { Demo as UseHvPagination } from "./UseHvPagination";
 import UseHvPaginationRaw from "./UseHvPagination?raw";
 import { UseHvRowExpand } from "./UseHvRowExpand";
 import UseHvRowExpandRaw from "./UseHvRowExpand?raw";

packages/core/src/Table/stories/TableHooks/UseHvPagination.tsx

@@ -1,51 +1,66 @@
 import { useMemo } from "react";
+import {
+  ColumnDef,
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  Table,
+  useReactTable,
+} from "@tanstack/react-table";
 import {
   HvPagination,
+  HvPaginationProps,
   HvTable,
   HvTableBody,
   HvTableCell,
   HvTableContainer,
   HvTableHead,
   HvTableHeader,
   HvTableRow,
-  useHvData,
-  useHvPagination,
 } from "@hitachivantara/uikit-react-core";
 
-import { AssetEvent, getColumns, makeData } from "../storiesUtils";
+export function Demo() {
+  const columns = useMemo(() => getColumns(), []);
+  const data = useMemo(() => makeData(32), []);
+
+  return <MyTable data={data} columns={columns} />;
+}
 
 const EmptyRow = () => (
   <HvTableRow>
-    <HvTableCell colSpan={100} />
+    <HvTableCell colSpan={100} style={{ height: 33 }} />
   </HvTableRow>
 );
 
-export const UseHvPagination = () => {
-  const columns = useMemo(() => getColumns(), []);
-  const data = useMemo(() => makeData(32), []);
-
-  const {
-    getTableProps,
-    getTableBodyProps,
-    prepareRow,
-    headerGroups,
-    page,
-    state: { pageSize },
-    getHvPaginationProps,
-  } = useHvData<AssetEvent, string>({ columns, data }, useHvPagination);
+export function MyTable<T extends Record<string, any>>({
+  data,
+  columns,
+}: {
+  data: T[];
+  columns: ColumnDef<T, any>[];
+}) {
+  const table = useReactTable({
+    columns,
+    data,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+  });
 
   const renderTableRow = (i: number) => {
-    const row = page[i];
+    const row = table.getRowModel().rows[i];
 
     if (!row) return <EmptyRow key={i} />;
 
-    prepareRow(row);
-
     return (
-      <HvTableRow {...row.getRowProps()}>
-        {row.cells.map((cell) => (
-          <HvTableCell {...cell.getCellProps()} key={cell.getCellProps().key}>
-            {cell.render("Cell")}
+      <HvTableRow key={row.id}>
+        {row.getVisibleCells().map((cell) => (
+          <HvTableCell key={cell.id}>
+            {flexRender(cell.column.columnDef.cell, cell.getContext())}
           </HvTableCell>
         ))}
       </HvTableRow>
@@ -55,32 +70,87 @@ export const UseHvPagination = () => {
   return (
     <>
       <HvTableContainer tabIndex={0}>
-        <HvTable {...getTableProps()}>
+        <HvTable>
           <HvTableHead>
-            {headerGroups.map((headerGroup) => (
-              <HvTableRow
-                {...headerGroup.getHeaderGroupProps()}
-                key={headerGroup.getHeaderGroupProps().key}
-              >
+            {...table.getHeaderGroups().map((headerGroup) => (
+              <HvTableRow key={headerGroup.id}>
                 {headerGroup.headers.map((col) => (
                   <HvTableHeader
-                    {...col.getHeaderProps()}
-                    key={col.getHeaderProps().key}
+                    key={col.id}
+                    colSpan={col.colSpan}
+                    onClick={col.column.getToggleSortingHandler()}
                   >
-                    {col.render("Header")}
+                    {flexRender(col.column.columnDef.header, col.getContext())}
                   </HvTableHeader>
                 ))}
               </HvTableRow>
             ))}
           </HvTableHead>
-          <HvTableBody {...getTableBodyProps()}>
-            {pageSize && [...Array(pageSize).keys()].map(renderTableRow)}
+          <HvTableBody>
+            {[...Array(table.getState().pagination.pageSize).keys()].map(
+              renderTableRow,
+            )}
           </HvTableBody>
         </HvTable>
       </HvTableContainer>
-      {page?.length ? (
-        <HvPagination {...getHvPaginationProps?.()} />
-      ) : undefined}
+      <HvPagination {...getHvPaginationProps(table)} />
     </>
   );
-};
+}
+
+interface AssetEvent {
+  id: string;
+  name: string;
+  createdDate: string;
+  eventType: string;
+  riskScore: number;
+  status: string | null;
+  severity: string;
+  priority: string;
+  link?: string;
+  selected?: boolean;
+}
+
+const columnHelper = createColumnHelper<AssetEvent>();
+
+const getColumns = (): ColumnDef<AssetEvent, any>[] => [
+  { header: "Title", accessorKey: "name", minSize: 120 },
+  { header: "Time", accessorKey: "createdDate", minSize: 100 },
+  { header: "Event Type", accessorKey: "eventType", minSize: 100 },
+  { header: "Status", accessorKey: "status", minSize: 100 },
+  columnHelper.accessor("riskScore", {
+    header: "Probability",
+    cell: ({ getValue }) => `${getValue()}%`,
+  }),
+
+  { header: "Severity", accessorKey: "severity" },
+  { header: "Priority", accessorKey: "priority" },
+];
+
+const getOption = (opts: string[], i: number) => opts[i % opts.length];
+
+const makeEvent = (i: number): AssetEvent => ({
+  id: `${i + 1}`,
+  name: `Event ${i + 1}`,
+  createdDate: new Date("2020-03-20").toISOString().slice(0, 10),
+  eventType: "Anomaly detection",
+  status: getOption(["Closed", "Open"], i),
+  riskScore: (i % 100) + 1,
+  severity: getOption(["Critical", "Major", "Average", "Minor"], i),
+  priority: getOption(["High", "Medium", "Low"], i),
+});
+
+const makeData = (len = 10) => [...Array(len).keys()].map(makeEvent);
+
+function getHvPaginationProps(table: Table<any>): HvPaginationProps {
+  const { pageIndex, pageSize } = table.getState().pagination;
+  return {
+    canPrevious: table.getCanPreviousPage(),
+    canNext: table.getCanNextPage(),
+    pageSize: pageSize,
+    page: pageIndex,
+    pages: table.getPageCount(),
+    onPageChange: (newPage) => table.setPageIndex(newPage),
+    onPageSizeChange: (newPageSize) => table.setPageSize(newPageSize),
+  };
+}