Update to React Table V8

app/react/App/styles/globals.css

@@ -1421,10 +1421,6 @@ input:checked + .toggle-bg {
   height: 1px;
 }
 
-.h-5\/6 {
-  height: 83.333333%;
-}
-
 .max-h-96 {
   max-height: 24rem;
 }
@@ -1490,10 +1486,6 @@ input:checked + .toggle-bg {
   width: 0.875rem;
 }
 
-.w-32 {
-  width: 8rem;
-}
-
 .w-36 {
   width: 9rem;
 }
@@ -1691,6 +1683,12 @@ input:checked + .toggle-bg {
   cursor: pointer;
 }
 
+.select-none {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
 .snap-x {
   scroll-snap-type: x var(--tw-scroll-snap-strictness);
 }
@@ -1781,12 +1779,6 @@ input:checked + .toggle-bg {
   margin-left: calc(-1px * calc(1 - var(--tw-space-x-reverse)));
 }
 
-.space-x-1 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
-  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
-}
-
 .space-x-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
@@ -1847,6 +1839,10 @@ input:checked + .toggle-bg {
   overflow: hidden;
 }
 
+.overflow-x-auto {
+  overflow-x: auto;
+}
+
 .overflow-y-auto {
   overflow-y: auto;
 }
@@ -2419,6 +2415,11 @@ input:checked + .toggle-bg {
   background-color: rgb(253 242 242 / var(--tw-bg-opacity));
 }
 
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(240 82 82 / var(--tw-bg-opacity));
+}
+
 .bg-red-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(224 36 36 / var(--tw-bg-opacity));
@@ -2664,14 +2665,14 @@ input:checked + .toggle-bg {
   stroke: #D1D5DB;
 }
 
-.stroke-2 {
-  stroke-width: 2;
-}
-
 .stroke-1 {
   stroke-width: 1;
 }
 
+.stroke-2 {
+  stroke-width: 2;
+}
+
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -2868,10 +2869,6 @@ input:checked + .toggle-bg {
   text-align: center;
 }
 
-.align-baseline {
-  vertical-align: baseline;
-}
-
 .align-top {
   vertical-align: top;
 }
@@ -2885,6 +2882,11 @@ input:checked + .toggle-bg {
   line-height: 2rem;
 }
 
+.text-9xl {
+  font-size: 8rem;
+  line-height: 1;
+}
+
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -2910,11 +2912,6 @@ input:checked + .toggle-bg {
   line-height: 1rem;
 }
 
-.text-9xl {
-  font-size: 8rem;
-  line-height: 1;
-}
-
 .font-bold {
   font-weight: 700;
 }
@@ -2931,10 +2928,6 @@ input:checked + .toggle-bg {
   font-weight: 600;
 }
 
-.font-thin {
-  font-weight: 100;
-}
-
 .uppercase {
   text-transform: uppercase;
 }
@@ -3745,11 +3738,6 @@ input:checked + .toggle-bg {
   color: rgb(17 24 39 / var(--tw-text-opacity)) !important;
 }
 
-.hover\:text-blue-600:hover {
-  --tw-text-opacity: 1;
-  color: rgb(28 100 242 / var(--tw-text-opacity));
-}
-
 .hover\:text-blue-700:hover {
   --tw-text-opacity: 1;
   color: rgb(26 86 219 / var(--tw-text-opacity));
@@ -5322,10 +5310,6 @@ input:checked + .toggle-bg {
     width: 1.5rem;
   }
 
-  .sm\:gap-6 {
-    gap: 1.5rem;
-  }
-
   .sm\:px-4 {
     padding-left: 1rem;
     padding-right: 1rem;
@@ -5395,18 +5379,6 @@ input:checked + .toggle-bg {
     width: 12rem;
   }
 
-  .md\:w-52 {
-    width: 13rem;
-  }
-
-  .md\:w-60 {
-    width: 15rem;
-  }
-
-  .md\:w-8 {
-    width: 2rem;
-  }
-
   .md\:w-\[300px\] {
     width: 300px;
   }

app/react/V2/Components/Forms/FormInput.tsx

@@ -12,16 +12,16 @@ type fromPropsType = {
 
 const FormInput = (data: any, formProps: fromPropsType) => {
   const { register, setValue, submitting, getFieldState } = formProps;
-  const { error } = getFieldState(data.cell.value);
+  const { error } = getFieldState(data.cell.getValue());
   const hasErrors = Boolean(error);
-  const reset = () => setValue(data.cell.value, '', { shouldDirty: true });
-  const { onChange, onBlur, name, ref } = register(data.cell.value, { required: true });
+  const reset = () => setValue(data.cell.getValue(), '', { shouldDirty: true });
+  const { onChange, onBlur, name, ref } = register(data.cell.getValue(), { required: true });
 
   return (
     <div>
       <InputField
-        id={data.cell.value}
-        label={data.cell.row.values.language}
+        id={data.cell.getValue()}
+        label={data.cell.row.original.language}
         hideLabel
         disabled={submitting}
         clearFieldAction={reset}

app/react/V2/Components/UI/Table.tsx

@@ -1,99 +1,114 @@
-/* eslint-disable react/jsx-props-no-spreading */
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import {
-  Column,
-  HeaderGroup,
-  useRowSelect,
-  useRowState,
-  useTable,
-  useSortBy,
-  UseSortByOptions,
-  UseSortByColumnProps,
+  flexRender,
+  getSortedRowModel,
+  getCoreRowModel,
+  useReactTable,
+  SortingState,
   TableState,
-} from 'react-table';
-
-import { Table as FlowbiteTable } from 'flowbite-react';
+  ColumnDef,
+  CellContext,
+  Column,
+} from '@tanstack/react-table';
 import { ChevronUpDownIcon, ChevronUpIcon, ChevronDownIcon } from '@heroicons/react/20/solid';
 
-type TableColumn<T extends object> = Column<T> &
-  UseSortByOptions<any> &
-  Partial<UseSortByColumnProps<T>> & {
-    disableSortBy?: boolean;
-    className?: string;
-  };
+type ColumnWithClassName<T> = ColumnDef<T, any> & {
+  className?: string;
+};
+
+type CellContextWithMeta<T, U> = CellContext<T, U> & {
+  column: Column<T> & { columnDef: ColumnWithClassName<T> };
+};
 
-interface TableProps {
-  columns: ReadonlyArray<TableColumn<any>>;
-  data: { [key: string]: any }[];
+interface TableProps<T> {
+  columns: ColumnWithClassName<T>[];
+  data: T[];
   title?: string | React.ReactNode;
-  initialState?: Partial<TableState<any>>;
+  initialState?: Partial<TableState>;
 }
 
-const getIcon = (column: TableColumn<any>) => {
-  switch (true) {
-    case !column.isSorted:
+const getIcon = (sorting: false | 'asc' | 'desc') => {
+  switch (sorting) {
+    case false:
       return <ChevronUpDownIcon className="w-4" />;
-    case !column.isSortedDesc:
+    case 'asc':
       return <ChevronUpIcon className="w-4" />;
-    case column.isSortedDesc:
+    case 'desc':
     default:
       return <ChevronDownIcon className="w-4" />;
   }
 };
 
-const Table = ({ columns, data, title, initialState }: TableProps) => {
+// eslint-disable-next-line comma-spacing
+const Table = <T,>({ columns, data, title, initialState }: TableProps<T>) => {
+  const [sorting, setSorting] = useState<SortingState>(initialState?.sorting || []);
+
   const memoizedColumns = useMemo(() => columns, [columns]);
-  const memoizedData = useMemo(() => data, [data]);
+  const memoizedData = useMemo<T[]>(() => data, [data]);
 
-  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(
-    {
-      columns: memoizedColumns,
-      data: memoizedData,
-      initialState,
+  const table = useReactTable({
+    columns: memoizedColumns,
+    data: memoizedData,
+    state: {
+      sorting,
     },
-    useSortBy,
-    useRowSelect,
-    useRowState
-  );
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  });
 
   return (
-    <FlowbiteTable {...getTableProps()}>
-      {title && (
-        <caption className="p-5 text-lg font-semibold text-left text-gray-900 bg-white">
-          {title}
-        </caption>
-      )}
-      <FlowbiteTable.Head>
-        {headerGroups.map((headerGroup: HeaderGroup<any>) =>
-          headerGroup.headers.map((column: any) => (
-            <FlowbiteTable.HeadCell
-              {...column.getHeaderProps(column.getSortByToggleProps())}
-              className={column.className}
-            >
-              <div className={`text-gray-500 ${!column.disableSortBy ? 'flex flex-row' : ''}`}>
-                {column.render('Header')}
-                {column.Header && !column.disableSortBy && getIcon(column)}
-              </div>
-            </FlowbiteTable.HeadCell>
-          ))
+    <div className="overflow-x-auto relative">
+      <table className="w-full text-sm text-left">
+        {title && (
+          <caption className="p-5 text-lg font-semibold text-left text-gray-900 bg-white">
+            {title}
+          </caption>
         )}
-      </FlowbiteTable.Head>
-      <FlowbiteTable.Body {...getTableBodyProps()} className="text-gray-900 divide-y">
-        {rows.map(row => {
-          prepareRow(row);
-          return (
-            <FlowbiteTable.Row {...row.getRowProps()}>
-              {row.cells.map(cell => (
-                <FlowbiteTable.Cell {...cell.getCellProps()}>
-                  {cell.render('Cell')}
-                </FlowbiteTable.Cell>
+
+        <thead className="text-xs text-gray-700 uppercase bg-gray-50">
+          {table.getHeaderGroups().map(headerGroup => (
+            <tr key={headerGroup.id}>
+              {headerGroup.headers.map(header => {
+                const isSortable = header.column.getCanSort();
+                return (
+                  <th
+                    key={header.id}
+                    scope="col"
+                    className={`px-6 py-3 ${
+                      (header.column.columnDef as ColumnWithClassName<T>).className
+                    }`}
+                  >
+                    <div
+                      className={`inline-flex ${isSortable ? 'cursor-pointer select-none' : ''}`}
+                      onClick={header.column.getToggleSortingHandler()}
+                    >
+                      {flexRender(header.column.columnDef.header, header.getContext())}
+                      {isSortable && getIcon(header.column.getIsSorted())}
+                    </div>
+                  </th>
+                );
+              })}
+            </tr>
+          ))}
+        </thead>
+
+        <tbody>
+          {table.getRowModel().rows.map(row => (
+            <tr key={row.id} className="bg-white border-b">
+              {row.getVisibleCells().map(cell => (
+                <td key={cell.id} className="px-6 py-3">
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </td>
               ))}
-            </FlowbiteTable.Row>
-          );
-        })}
-      </FlowbiteTable.Body>
-    </FlowbiteTable>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
   );
 };
 
+export type { CellContextWithMeta, ColumnWithClassName };
+
 export { Table };