Datatables: Clear all type errors

Author: imadbakir

src/components/tables/DataTable/DataTable.stories.tsx

@@ -10,6 +10,7 @@ import { delay } from '../util/async_util.ts';
 import { type User, generateData } from '../util/generateData.ts';
 import { useEffectAsync } from '../util/hooks.ts';
 import * as Filtering from './filtering/Filtering.ts';
+import type { Fields, FilterQuery } from '../MultiSearch/filterQuery.ts';
 
 import { Panel } from '../../containers/Panel/Panel.tsx';
 import * as DataTablePlugins from './plugins/useRowSelectColumn.tsx';
@@ -50,7 +51,7 @@ const columns = [
   },
 ];
 
-const fields = {
+const fields: Fields = {
   name: {
     type: 'text',
     operators: ['$text'],
@@ -80,11 +81,12 @@ const fields = {
     operators: ['$eq', '$ne', '$lt', '$lte', '$gt', '$gte'],
     label: 'Days active',
     placeholder: 'Number of days active',
-    accessor: (user: User) => differenceInDays(new Date(), user.joinDate),
+    accessor: (item: unknown) => differenceInDays(new Date(), (item as User).joinDate),
   },
 };
 
 type dataTeableEagerTemplateProps = DataTableEager.TableProviderEagerProps<User> & { delay: number };
+
 const DataTableEagerTemplate = (props: dataTeableEagerTemplateProps) => {
   const memoizedColumns = React.useMemo(() => props.columns, [props.columns]);
   const memoizedItems = React.useMemo(() => props.items, [props.items]);
@@ -117,13 +119,18 @@ const DataTableEagerTemplate = (props: dataTeableEagerTemplateProps) => {
 const DataTableEagerWithFilterTemplate = (props: dataTeableEagerTemplateProps) => {
   const memoizedColumns = React.useMemo(() => props.columns, [props.columns]);
 
-  const [filters, setFilters] = React.useState([]);
-  const [filteredItems, setFilteredItems] = React.useState(props.items);
+  const [filters, setFilters] = React.useState<FilterQuery>([]);
+  const [filteredItems, setFilteredItems] = React.useState<User[]>(props.items as User[]);
 
+  // Convert items array into a record
+  const itemsAsRecord = React.useMemo(() => {
+    return Object.fromEntries(props.items.map(item => [item.id, item])) as Record<string, User>;
+  }, [props.items]);
+  
   React.useEffect(() => {
-    const filtered = Filtering.filterByQuery(fields, props.items, filters);
-    setFilteredItems(Object.values(filtered));
-  }, [filters, props.items]);
+    const filtered = Filtering.filterByQuery(fields, itemsAsRecord, filters);
+    setFilteredItems(Object.values(filtered) as User[]);
+  }, [filters, itemsAsRecord]);
 
   return (
     <Panel>

src/components/tables/DataTable/DataTableEager.stories.tsx

@@ -92,13 +92,14 @@ export const TableProviderEager = <D extends object>(props: TableProviderEagerPr
     ...plugins,
   );
 
-  const context = React.useMemo<TableContextState<D>>(() => ({
+  // Note: the `table` reference is mutated, so cannot use it as dependency for `useMemo` directly
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+    const context = React.useMemo<TableContextState<D>>(() => ({
     status: { ready: isReady, loading: false, error: null },
     setStatus() {},
     reload() {},
     table,
   }), [table.state, ...Object.values(tableOptions)]);
-  // Note: the `table` reference is mutated, so cannot use it as dependency for `useMemo` directly
 
   const TableContext = React.useMemo(() => createTableContext<D>(), []);
 
@@ -151,7 +152,7 @@ export const DataTableEager = ({ children, className, footer, ...propsRest }: Da
       // Edge case: no items and yet we are not on the first page. Navigate back to the previous page.
       table.previousPage();
     }
-  }, [table.page.length, table.state.pageIndex, table.canPreviousPage]);
+  }, [table.page.length, table.state.pageIndex, table.canPreviousPage, table.previousPage]);
 
   // Use `<Pagination/>` by default, unless the table is empty (in which case there are "zero" pages)
   const footerDefault = status.ready && table.rows.length > 0 ? <Pagination/> : null;

src/components/tables/DataTable/DataTableEager.tsx

@@ -48,15 +48,19 @@ const DataTableStreamTemplate = (props : dataTeableLazyTemplateProps) => {
 
   const [itemsProcessed, setItemsProcessed] = useState<Array<User>>([]);
 
-  const query: DataTableStream.DataTableQuery<User, UserPageState> = useCallback(
+  const query: DataTableStream.DataTableQuery<User, UserPageState | null> = useCallback(
     async ({ previousItem, previousPageState, limit, orderings, globalFilter }) => {
       if (delayQuery === Number.POSITIVE_INFINITY) return new Promise(() => {}); // Infinite delay
       if (delayQuery === -1) throw new Error('Failed'); // Simulate failure
 
       if (delayQuery) await delay(delayQuery);
+      
+      let offset = 0;
 
-      const previousItemIndex = items.indexOf(previousItem);
-      const offset = previousItemIndex === -1 ? 0 : previousItemIndex + 1;
+      if (previousItem) {
+        const previousItemIndex = items.indexOf(previousItem);
+        offset = previousItemIndex === -1 ? 0 : previousItemIndex + 1;
+      }
 
       const filteredItems = items
         .filter((row) => {
@@ -66,15 +70,24 @@ const DataTableStreamTemplate = (props : dataTeableLazyTemplateProps) => {
           if (!columnsFilterable.length) return false;
 
           return columnsFilterable.some((column) => {
-            const cell = typeof column.accessor === 'function' ? column.accessor(row) : undefined;
+            const cell = typeof column.accessor === 'function'
+              ? column.accessor(row, 0, { subRows: [], depth: 0, data: [row] })
+              : undefined;
             return typeof cell === 'string' && cell.toLowerCase().includes(globalFilter.trim().toLowerCase());
           });
         })
         .sort((a, b) => {
-          if (!orderings.length) return 0;
+          if (!orderings[0]) return 0;
           const { column, direction } = orderings[0];
           const factor = direction === 'DESC' ? -1 : 1;
-          return a[column]?.localeCompare(b[column]) * factor || 0;
+
+          const aValue = a[column as keyof User];
+          const bValue = b[column as keyof User];
+        
+          const aNormalized = aValue instanceof Date ? aValue.toISOString() : aValue?.toString();
+          const bNormalized = bValue instanceof Date ? bValue.toISOString() : bValue?.toString();
+        
+          return (aNormalized?.localeCompare(bNormalized) || 0) * factor;
         })
         .slice(offset, offset + limit);
 

src/components/tables/DataTable/DataTableStream.stories.tsx

@@ -71,7 +71,8 @@ const usePageHistory = <D extends object, PageHistoryItem extends object>() => {
     },
     push: (pageIndex: PageIndex, pageHistoryItem: PageHistoryItem) => {
       const indices = [...pageHistory.keys()];
-      const lastIndex: undefined | PageIndex = indices[indices.length - 1];
+      // biome-ignore lint/style/noNonNullAssertion: <explanation>
+      const lastIndex: PageIndex = indices[indices.length - 1]!;
       // Make sure the page indices are contiguous
       if (pageIndex > lastIndex + 1) {
         throw new Error('Non-contiguous page indices'); // Should never happen
@@ -355,13 +356,17 @@ export const TableProviderStream = <D extends object, P = undefined>(
               //       to ensure the latest partial page state is stored.
               //    2. If end of stream hasn't been reached, then add the current page state to the
               //       page history
-              const itemLast = items.slice(-1)[0];
+              const itemLast = items.slice(-1)[0] || null;
 
               if (partialPageHistoryItem) {
                 updatedPageHistory = updatedPageHistory.pop(state.pageIndex);
               }
 
-              updatedPageHistory = updatedPageHistory.push(state.pageIndex, { itemLast, pageState });
+              const pageHistoryItem = pageState !== undefined
+                ? { itemLast, pageState }
+                : { itemLast };
+
+              updatedPageHistory = updatedPageHistory.push(state.pageIndex, pageHistoryItem);
             }
 
             // Update page history state
@@ -377,16 +382,13 @@ export const TableProviderStream = <D extends object, P = undefined>(
         return state;
       },
       useControlledState: state => {
-        return React.useMemo(
-          () => ({
-            ...state,
-            pageSize,
-            pageCount,
-            endOfStream,
-            partialStream,
-          }),
-          [state, pageSize, pageCount, endOfStream, partialStream],
-        );
+        return ({
+          ...state,
+          pageSize,
+          pageCount,
+          endOfStream,
+          partialStream,
+        })
       },
 
       // https://react-table.tanstack.com/docs/faq
@@ -424,6 +426,7 @@ export const TableProviderStream = <D extends object, P = undefined>(
     ...plugins,
   );
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   React.useEffect(() => {
     table.dispatch({ type: 'tableLoad' });
   }, []);
@@ -432,22 +435,24 @@ export const TableProviderStream = <D extends object, P = undefined>(
     table.dispatch({ type: 'reload' });
   };
 
-  const context = React.useMemo<TableContextState<D>>(() => ({
+  // Note: the `table` reference is mutated, so cannot use it as dependency for `useMemo` directly
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+    const context = React.useMemo<TableContextState<D>>(() => ({
     status,
     setStatus,
     reload,
     table,
   }), [
     JSON.stringify(status),
-    // Note: the `table` reference is mutated, so cannot use it as dependency for `useMemo` directly
     table.state,
     ...Object.values(tableOptions),
   ]);
 
   const TableContext = React.useMemo(() => createTableContext<D>(), []);
 
   // If `pageSize` changes, we need to reset to the first page. Otherwise, our `previousItems` cache is no longer valid.
-  React.useEffect(() => {
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+      React.useEffect(() => {
     if (table.state.pageIndex !== 0) {
       table.gotoPage(0);
     }