fix(table): memo column definition (#128)

* fix: memoized column definitions * chore: add switch to show loader in example
raystack · Jul 24, 2024 · a7b20e4 · a7b20e4
1 parent 81d413d
commit a7b20e4
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 22 deletions.
diff --git a/apps/www/examples/shield-ts/assets.tsx b/apps/www/examples/shield-ts/assets.tsx
@@ -3,6 +3,8 @@ import {
   Checkbox,
   DataTable,
   Flex,
+  Label,
+  Switch,
   Text,
   useTable,
 } from "@raystack/apsara";
@@ -133,15 +135,21 @@ export const columns: ApsaraColumnDef<Payment>[] = [
 ];
 
 export const Assets = () => {
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  function onSwitchChange() {
+    setIsLoading((prev) => !prev);
+  }
+
   return (
-    // @ts-ignore
     <DataTable
       columns={columns}
       data={data}
       initialState={{ sorting: [{ id: "amount", desc: true }] }}
+      isLoading={isLoading}
     >
       <DataTable.Toolbar>
-        <AssetsHeader />
+        <AssetsHeader onSwitchChange={onSwitchChange} />
         <DataTable.FilterChips />
       </DataTable.Toolbar>
       <DataTable.Footer>
@@ -151,12 +159,22 @@ export const Assets = () => {
   );
 };
 
-const AssetsHeader = () => {
+const AssetsHeader = ({ onSwitchChange }) => {
   const { filteredColumns, table } = useTable();
   const isFiltered = filteredColumns.length > 0;
   return (
-    <Flex align="center" justify="between" style={{ width: "100%" }}>
-      <Text style={{ fontWeight: 500 }}>Assets</Text>
+    <Flex
+      align="center"
+      justify="between"
+      style={{ width: "100%", padding: "4px" }}
+    >
+      <Flex gap="extra-large" align="center">
+        <Text style={{ fontWeight: 500 }}>Assets</Text>
+        <Flex gap="small" align="center">
+          <Label>Show Loader</Label>
+          <Switch onCheckedChange={onSwitchChange} />
+        </Flex>
+      </Flex>
       <Flex gap="small">
         {isFiltered ? <DataTable.ClearFilter /> : <DataTable.FilterOptions />}
         <DataTable.ViewOptions />

diff --git a/packages/raystack/table/datatable.tsx b/packages/raystack/table/datatable.tsx
@@ -23,6 +23,7 @@ import {
   ReactElement,
   ReactNode,
   useEffect,
+  useMemo,
   useState,
 } from "react";
 import { Flex } from "~/flex";
@@ -96,24 +97,33 @@ function DataTableRoot<TData, TValue>({
   const { filteredColumns, addFilterColumn, removeFilterColumn, resetColumns } =
     useTableColumn();
 
-  const columnWithCustomFilter = columns.map((col) => {
-    // @ts-ignore;
-    const colId: string = col.id || col?.accessorKey;
-    if (colId && tableCustomFilter.hasOwnProperty(colId)) {
-      col.filterFn = tableCustomFilter[colId];
-    }
+  const columnWithCustomFilter = useMemo(
+    () =>
+      columns.map((col) => {
+        const colId = col.id || (col?.accessorKey as string);
+        const filterFn =
+          colId && tableCustomFilter.hasOwnProperty(colId)
+            ? tableCustomFilter[colId]
+            : undefined;
 
-    col.cell = isLoading
-      ? () => (
-          <Skeleton
-            containerClassName={styles.flex1}
-            highlightColor="var(--background-base)"
-            baseColor="var(--background-base-hover)"
-          />
-        )
-      : col.cell;
-    return col;
-  });
+        const cell = isLoading
+          ? () => (
+              <Skeleton
+                containerClassName={styles.flex1}
+                highlightColor="var(--background-base)"
+                baseColor="var(--background-base-hover)"
+              />
+            )
+          : col.cell;
+
+        return {
+          ...col,
+          cell,
+          filterFn,
+        };
+      }),
+    [isLoading, columns, tableCustomFilter]
+  );
 
   useEffect(() => {
     if (onStateChange) {