@xcelsior/ui-spreadsheets 1.0.2 → 1.0.3

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @xcelsior/ui-spreadsheets@1.0.2 build /home/circleci/repo/packages/ui/ui-spreadsheets
+> @xcelsior/ui-spreadsheets@1.0.3 build /home/circleci/repo/packages/ui/ui-spreadsheets
 > tsup && tsc --noEmit
 
 CLI Building entry: src/index.ts
@@ -10,13 +10,13 @@
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-CJS dist/index.js     150.46 KB
+CJS dist/index.js     151.12 KB
 CJS dist/index.js.map 2.63 MB
-CJS ⚡️ Build success in 334ms
-ESM dist/index.mjs     139.74 KB
+CJS ⚡️ Build success in 576ms
+ESM dist/index.mjs     140.30 KB
 ESM dist/index.mjs.map 2.63 MB
-ESM ⚡️ Build success in 335ms
+ESM ⚡️ Build success in 577ms
 DTS Build start
-DTS ⚡️ Build success in 5124ms
+DTS ⚡️ Build success in 8502ms
 DTS dist/index.d.ts  22.18 KB
 DTS dist/index.d.mts 22.18 KB

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @xcelsior/ui-spreadsheets
 
+## 1.0.3
+
+### Patch Changes
+
+- e734bf5: improve spreadsheet performance
+- Updated dependencies [e734bf5]
+  - @xcelsior/utils@1.0.1
+
 ## 1.0.2
 
 ### Patch Changes

package/dist/index.js

@@ -2179,6 +2179,7 @@ var import_design_system = require("@xcelsior/design-system");
 
 // src/hooks/useSpreadsheetFiltering.ts
 var import_react10 = require("react");
+var import_utils9 = require("@xcelsior/utils");
 function useSpreadsheetFiltering({
   data,
   columns,
@@ -2325,19 +2326,10 @@ function useSpreadsheetFiltering({
     },
     []
   );
-  const filteredData = (0, import_react10.useMemo)(() => {
-    if (!data || !Array.isArray(data)) return [];
-    if (serverSide) {
-      return data;
-    }
-    if (!columns || !Array.isArray(columns)) return data;
-    let result = [...data];
-    for (const [columnId, filter] of Object.entries(filters)) {
-      if (!filter) continue;
-      const column = columns.find((c) => c.id === columnId);
-      if (!column) continue;
-      result = result.filter((row) => {
-        const value = column.getValue ? column.getValue(row) : row[columnId];
+  const buildFilterPredicate = (0, import_react10.useCallback)(
+    (column, filter) => {
+      return (row) => {
+        const value = column.getValue ? column.getValue(row) : row[column.id];
         if (filter.includeBlanks && isBlankValue(value)) {
           return true;
         }
@@ -2364,32 +2356,48 @@ function useSpreadsheetFiltering({
           if (filter.max !== void 0 && numValue > Number(filter.max)) return false;
         }
         return true;
-      });
-    }
-    if (sortConfig) {
-      const column = columns.find((c) => c.id === sortConfig.columnId);
-      result.sort((a, b) => {
-        const aValue = column?.getValue ? column.getValue(a) : a[sortConfig.columnId];
-        const bValue = column?.getValue ? column.getValue(b) : b[sortConfig.columnId];
+      };
+    },
+    [applyTextCondition, applyNumberCondition, applyDateCondition]
+  );
+  const buildSortComparator = (0, import_react10.useCallback)(
+    (column, direction) => {
+      return (a, b) => {
+        const aValue = column?.getValue ? column.getValue(a) : a[sortConfig?.columnId];
+        const bValue = column?.getValue ? column.getValue(b) : b[sortConfig?.columnId];
         if (aValue === null || aValue === void 0) return 1;
         if (bValue === null || bValue === void 0) return -1;
         if (typeof aValue === "string" && typeof bValue === "string") {
-          return sortConfig.direction === "asc" ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);
+          return direction === "asc" ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);
         }
-        return sortConfig.direction === "asc" ? aValue < bValue ? -1 : aValue > bValue ? 1 : 0 : aValue > bValue ? -1 : aValue < bValue ? 1 : 0;
-      });
+        return direction === "asc" ? aValue < bValue ? -1 : aValue > bValue ? 1 : 0 : aValue > bValue ? -1 : aValue < bValue ? 1 : 0;
+      };
+    },
+    [sortConfig?.columnId]
+  );
+  const filteredData = (0, import_react10.useMemo)(() => {
+    if (!data || !Array.isArray(data)) return import_utils9.LazyArray.empty();
+    if (serverSide) {
+      return import_utils9.LazyArray.from(data);
     }
-    return result;
-  }, [
-    data,
-    filters,
-    sortConfig,
-    columns,
-    serverSide,
-    applyDateCondition,
-    applyNumberCondition,
-    applyTextCondition
-  ]);
+    if (!columns || !Array.isArray(columns)) return import_utils9.LazyArray.from(data);
+    let lazyResult = import_utils9.LazyArray.from(data);
+    const filterChain = new import_utils9.FilterChain();
+    for (const [columnId, filter] of Object.entries(filters)) {
+      if (!filter) continue;
+      const column = columns.find((c) => c.id === columnId);
+      if (!column) continue;
+      filterChain.add(buildFilterPredicate(column, filter));
+    }
+    if (!filterChain.isEmpty) {
+      lazyResult = filterChain.applyTo(lazyResult);
+    }
+    if (sortConfig) {
+      const column = columns.find((c) => c.id === sortConfig.columnId);
+      lazyResult = lazyResult.sort(buildSortComparator(column, sortConfig.direction));
+    }
+    return lazyResult;
+  }, [data, filters, sortConfig, columns, serverSide, buildFilterPredicate, buildSortComparator]);
   const handleFilterChange = (0, import_react10.useCallback)(
     (columnId, filter) => {
       const newFilters = { ...filters };