🧩 react-table 8.1.1 breaking changes fixes

src/client/components/Library/Library.tsx

@@ -66,28 +66,28 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
     return !value ? <span className="tag is-info is-light">Wanted</span> : null;
   };
 
-  const columns = useMemo(
-    () => [
+  const columns =  [
       {
-        Header: "Comic Metadata",
+        header: "Comic Metadata",
+        footer: 1,
         columns: [
           {
-            Header: "File Details",
+            header: "File Details",
             id: "fileDetails",
             minWidth: 400,
-            accessor: "_source",
-            Cell: ({ value }) => {
-              return <MetadataPanel data={value} />;
+            accessorKey: "_source",
+            cell: info => {
+              return <MetadataPanel data={info.getValue()} />;
             },
           },
           {
-            Header: "ComicInfo.xml",
-            accessor: "_source.sourcedMetadata.comicInfo",
+            header: "ComicInfo.xml",
+            accessorKey: "_source.sourcedMetadata.comicInfo",
             align: "center",
             minWidth: 250,
-            Cell: ({ value }) =>
-              !isEmpty(value) ? (
-                <ComicInfoXML data={value} />
+            cell: info =>
+              !isEmpty(info.getValue()) ? (
+                <ComicInfoXML data={info.getValue()} />
               ) : (
                 <span className="tag">No ComicInfo.xml</span>
               ),
@@ -95,34 +95,33 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
         ],
       },
       {
-        Header: "Additional Metadata",
+        header: "Additional Metadata",
         columns: [
           {
-            Header: "Publisher",
-            accessor:
+            header: "Publisher",
+            accessorKey:
               "_source.sourcedMetadata.comicvine.volumeInformation.publisher",
-            Cell(props) {
+            cell: info => {
               return (
-                !isNil(props.cell.value) && (
+                !isNil(info.getValue()) && (
                   <h6 className="is-size-7 has-text-weight-bold">
-                    {props.cell.value.name}
+                    {info.getValue().rawFileDetails.name}
                   </h6>
                 )
               );
             },
           },
           {
-            Header: "Something",
-            accessor: "_source.acquisition.source.wanted",
-            Cell: (props) => {
-              return <WantedStatus value={props.cell.value.toString()} />;
+            header: "Something",
+            accessorKey: "_source.acquisition.source.wanted",
+            cell: info => {
+              !isUndefined(info.getValue()) ?
+              <WantedStatus value={info.getValue().toString()} /> : "Nothing";
             },
           },
         ],
-      },
-    ],
-    [],
-  );
+      }
+    ]
 
   // ImportStatus.propTypes = {
   //   value: PropTypes.bool.isRequired,

src/client/components/shared/T2Table.tsx

@@ -1,6 +1,11 @@
 import React, { ReactElement, useState } from "react";
 import PropTypes from "prop-types";
-import { useTable, usePagination, useFlexLayout } from "react-table";
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
 
 export const T2Table = (tableOptions): ReactElement => {
   const { rowData, columns, paginationHandlers, totalPages, rowClickHandler } =
@@ -9,80 +14,48 @@ export const T2Table = (tableOptions): ReactElement => {
     useState(false);
   const togglePageSizeDropdown = () =>
     collapsePageSizeDropdown(!isPageSizeDropdownCollapsed);
-  const {
-    getTableProps,
-    getTableBodyProps,
-    headerGroups,
-    prepareRow,
-    page,
-    canPreviousPage,
-    canNextPage,
-    pageOptions,
-    pageCount,
-    gotoPage,
-    nextPage,
-    previousPage,
-    setPageSize,
-    state: { pageIndex, pageSize },
-  } = useTable(
-    {
-      columns,
+  console.log(rowData);
+    const table = useReactTable({
       data: rowData,
-      manualPagination: true,
-      initialState: {
-        pageIndex: 1,
-        pageSize: 25,
-      },
-      pageCount: totalPages,
-    },
-    usePagination,
-    // useFlexLayout,
-  );
+      columns,
+      getCoreRowModel: getCoreRowModel(),
+    })
+  
   return (
     <>
-      <table {...getTableProps()} className="table is-hoverable">
+      <table className="table is-hoverable">
         <thead>
-          {headerGroups.map((headerGroup, idx) => (
-            <tr key={idx} {...headerGroup.getHeaderGroupProps()}>
-              {headerGroup.headers.map((column, idx) => (
+          {table.getHeaderGroups().map((headerGroup, idx) => (
+            <tr key={headerGroup.id}>
+              {headerGroup.headers.map((header, idx) => (
                 <th
-                  key={idx}
-                  {...column.getHeaderProps({
-                    style: { minWidth: column.minWidth, width: column.width },
-                  })}
+                  key={header.id}
+                  colSpan={header.colSpan}
                 >
-                  {column.render("Header")}
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
                 </th>
               ))}
             </tr>
           ))}
         </thead>
 
-        <tbody {...getTableBodyProps()}>
-          {page.map((row, idx) => {
-            prepareRow(row);
+        <tbody>
+          {table.getRowModel().rows.map((row, idx) => {
             return (
               <tr
-                key={idx}
-                {...row.getRowProps()}
+                key={row.id}
                 onClick={() => rowClickHandler(row)}
               >
-                {row.cells.map((cell, idx) => {
-                  return (
-                    <td
-                      key={idx}
-                      {...cell.getCellProps({
-                        style: {
-                          minWidth: cell.column.minWidth,
-                          width: cell.column.width,
-                        },
-                      })}
-                      className="is-vcentered"
-                    >
-                      {cell.render("Cell")}
-                    </td>
-                  );
-                })}
+                 {row.getVisibleCells().map(cell => (
+                <td key={cell.id}>
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </td>
+              ))}
               </tr>
             );
           })}
@@ -90,109 +63,7 @@ export const T2Table = (tableOptions): ReactElement => {
       </table>
 
       {/* pagination control */}
-      <nav className="pagination" role="navigation" aria-label="pagination">
-        {/* x of total indicator */}
-        <div>
-          Page {pageIndex} of {Math.ceil(pageCount / pageSize)}
-          (Total resources: {pageCount})
-        </div>
-
-        {/* previous page and next page controls */}
-        <div className="field has-addons">
-          <p className="control">
-            <button
-              className="button"
-              onClick={() => {
-                previousPage();
-                return paginationHandlers.previousPage(pageIndex, pageSize);
-              }}
-              disabled={!canPreviousPage}
-            >
-              Previous Page
-            </button>
-          </p>
-          <p className="control">
-            <button
-              className="button"
-              onClick={() => {
-                nextPage();
-                return paginationHandlers.nextPage(pageIndex, pageSize);
-              }}
-              disabled={!canNextPage}
-            >
-              <span>Next Page</span>
-            </button>
-          </p>
-        </div>
-
-        {/* first and last page controls */}
-        <div className="field has-addons">
-          <p className="control">
-            <button
-              className="button"
-              onClick={() => gotoPage(1)}
-              disabled={!canPreviousPage}
-            >
-              <i className="fas fa-angle-double-left"></i>
-            </button>
-          </p>
-          <p className="control">
-            <button
-              className="button"
-              onClick={() => gotoPage(Math.ceil(pageCount / pageSize))}
-              disabled={!canNextPage}
-            >
-              <i className="fas fa-angle-double-right"></i>
-            </button>
-          </p>
-        </div>
-
-        {/* page selector */}
-        <span>
-          Go to page:
-          <input
-            type="number"
-            className="input"
-            defaultValue={pageIndex}
-            onChange={(e) => {
-              const page = e.target.value ? Number(e.target.value) : 0;
-              gotoPage(page);
-            }}
-            style={{ width: "100px" }}
-          />
-        </span>
-
-        {/* page size selector */}
-        {/* <div
-          className={
-            "dropdown " + (isPageSizeDropdownCollapsed ? "is-active" : "")
-          }
-          onBlur={() => togglePageSizeDropdown()}
-        >
-          <div className="dropdown-trigger">
-            <button
-              className="button"
-              aria-haspopup="true"
-              aria-controls="dropdown-menu"
-              onClick={() => togglePageSizeDropdown()}
-            >
-              <span>Select Page Size</span>
-              <span className="icon is-small">
-                <i className="fas fa-angle-down" aria-hidden="true"></i>
-              </span>
-            </button>
-          </div>
-          <div className="dropdown-menu" id="dropdown-menu" role="menu">
-            <div className="dropdown-content">
-              {[10, 20, 30, 40, 50].map((pageSize) => (
-                <a href="#" className="dropdown-item" key={pageSize}>
-                  Show {pageSize}
-                </a>
-              ))}
-            </div>
-          </div>
-        </div> */}
-      </nav>
+      
     </>
   );
 };