@raystack/apsara 0.17.0 → 0.17.1

package/dist/index.js

@@ -32199,17 +32199,20 @@ function DataTableRoot({ columns, data, emptyState, children, parentStyle, isLoa
         ? [...new Array(loaderRow)].map((_, i) => ({ id: i }))
         : data;
     const { filteredColumns, addFilterColumn, removeFilterColumn, resetColumns } = useTableColumn();
-    const columnWithCustomFilter = columns.map((col) => {
-        // @ts-ignore;
+    const columnWithCustomFilter = useMemo(() => columns.map((col) => {
         const colId = col.id || col?.accessorKey;
-        if (colId && tableCustomFilter.hasOwnProperty(colId)) {
-            col.filterFn = tableCustomFilter[colId];
-        }
-        col.cell = isLoading
+        const filterFn = colId && tableCustomFilter.hasOwnProperty(colId)
+            ? tableCustomFilter[colId]
+            : undefined;
+        const cell = isLoading
             ? () => (jsxRuntimeExports$1.jsx(Skeleton, { containerClassName: styles$4.flex1, highlightColor: "var(--background-base)", baseColor: "var(--background-base-hover)" }))
             : col.cell;
-        return col;
-    });
+        return {
+            ...col,
+            cell,
+            filterFn,
+        };
+    }), [isLoading, columns, tableCustomFilter]);
     useEffect(() => {
         if (onStateChange) {
             onStateChange(tableState);