@smallwebco/tinypivot-react 1.0.12 → 1.0.14

package/dist/index.js

@@ -1,9 +1,9 @@
 // src/components/DataGrid.tsx
-import { useState as useState8, useMemo as useMemo8, useCallback as useCallback8, useEffect as useEffect3, useRef as useRef2 } from "react";
+import { useState as useState8, useMemo as useMemo8, useCallback as useCallback8, useEffect as useEffect4, useRef as useRef2 } from "react";
 import { createPortal } from "react-dom";
 
 // src/hooks/useExcelGrid.ts
-import { useState, useMemo, useCallback } from "react";
+import { useState, useMemo, useCallback, useEffect } from "react";
 import {
   useReactTable,
   getCoreRowModel,
@@ -26,13 +26,17 @@ function useExcelGrid(options) {
   const [columnVisibility, setColumnVisibility] = useState({});
   const [globalFilter, setGlobalFilter] = useState("");
   const [columnStatsCache, setColumnStatsCache] = useState({});
+  const dataSignature = useMemo(
+    () => `${Date.now()}-${Math.random().toString(36).slice(2)}`,
+    [data]
+  );
   const columnKeys = useMemo(() => {
     if (data.length === 0) return [];
     return Object.keys(data[0]);
   }, [data]);
   const getColumnStats = useCallback(
     (columnKey) => {
-      const cacheKey = `${columnKey}-${data.length}`;
+      const cacheKey = `${columnKey}-${dataSignature}`;
       if (!columnStatsCache[cacheKey]) {
         const stats = getColumnUniqueValues(data, columnKey);
         setColumnStatsCache((prev) => ({ ...prev, [cacheKey]: stats }));
@@ -40,11 +44,14 @@ function useExcelGrid(options) {
       }
       return columnStatsCache[cacheKey];
     },
-    [data, columnStatsCache]
+    [data, columnStatsCache, dataSignature]
   );
   const clearStatsCache = useCallback(() => {
     setColumnStatsCache({});
   }, []);
+  useEffect(() => {
+    clearStatsCache();
+  }, [dataSignature, clearStatsCache]);
   const columnDefs = useMemo(() => {
     return columnKeys.map((key) => {
       const stats = getColumnStats(key);
@@ -105,7 +112,6 @@ function useExcelGrid(options) {
       const column = table.getColumn(columnId);
       if (column) {
         column.setFilterValue(values.length === 0 ? void 0 : values);
-        setColumnFilters(table.getState().columnFilters);
       }
     },
     [table]
@@ -173,7 +179,7 @@ function useExcelGrid(options) {
 }
 
 // src/hooks/usePivotTable.ts
-import { useState as useState3, useMemo as useMemo3, useEffect, useCallback as useCallback3 } from "react";
+import { useState as useState3, useMemo as useMemo3, useEffect as useEffect2, useCallback as useCallback3 } from "react";
 import {
   computeAvailableFields,
   getUnassignedFields,
@@ -305,7 +311,7 @@ function usePivotTable(data) {
       showColumnTotals
     });
   }, [data, isConfigured, canUsePivot, rowFields, columnFields, valueFields, showRowTotals, showColumnTotals]);
-  useEffect(() => {
+  useEffect2(() => {
     if (data.length === 0) return;
     const newKeys = Object.keys(data[0]);
     const storageKey = generateStorageKey(newKeys);
@@ -334,7 +340,7 @@ function usePivotTable(data) {
       }
     }
   }, [data]);
-  useEffect(() => {
+  useEffect2(() => {
     if (!currentStorageKey) return;
     const config = {
       rowFields,
@@ -694,7 +700,7 @@ function useColumnResize(initialWidths, minWidth = 60, maxWidth = 600) {
 }
 
 // src/components/ColumnFilter.tsx
-import { useState as useState5, useEffect as useEffect2, useRef, useCallback as useCallback5, useMemo as useMemo5 } from "react";
+import { useState as useState5, useEffect as useEffect3, useRef, useCallback as useCallback5, useMemo as useMemo5 } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 function ColumnFilter({
   columnName,
@@ -769,7 +775,7 @@ function ColumnFilter({
     onFilter([]);
     onClose();
   }, [onFilter, onClose]);
-  useEffect2(() => {
+  useEffect3(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         onClose();
@@ -778,7 +784,7 @@ function ColumnFilter({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [onClose]);
-  useEffect2(() => {
+  useEffect3(() => {
     const handleKeydown = (event) => {
       if (event.key === "Escape") {
         onClose();
@@ -789,10 +795,10 @@ function ColumnFilter({
     document.addEventListener("keydown", handleKeydown);
     return () => document.removeEventListener("keydown", handleKeydown);
   }, [onClose, applyFilter]);
-  useEffect2(() => {
+  useEffect3(() => {
     searchInputRef.current?.focus();
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     setLocalSelected(new Set(selectedValues));
   }, [selectedValues]);
   return /* @__PURE__ */ jsxs("div", { ref: dropdownRef, className: "vpg-filter-dropdown", children: [
@@ -1887,6 +1893,9 @@ function DataGrid({
     const end = start + pageSize;
     return searchFilteredData.slice(start, end);
   }, [enablePagination, searchFilteredData, currentPage, pageSize]);
+  useEffect4(() => {
+    setCurrentPage(1);
+  }, [columnFilters, globalSearchTerm]);
   const selectionBounds = useMemo8(() => {
     if (!selectionStart || !selectionEnd) return null;
     return {
@@ -1922,7 +1931,7 @@ function DataGrid({
     const avg = sum / values.length;
     return { count, sum, avg, numericCount: values.length };
   }, [selectionBounds, rows, columnKeys]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (data.length === 0) return;
     const widths = {};
     const sampleSize = Math.min(100, data.length);
@@ -1953,7 +1962,7 @@ function DataGrid({
     },
     [enableColumnResize, columnWidths]
   );
-  useEffect3(() => {
+  useEffect4(() => {
     if (!resizingColumnId) return;
     const handleResizeMove = (event) => {
       const diff = event.clientX - resizeStartX;
@@ -1983,7 +1992,7 @@ function DataGrid({
     },
     [enableVerticalResize, gridHeight]
   );
-  useEffect3(() => {
+  useEffect4(() => {
     if (!isResizingVertically) return;
     const handleVerticalResizeMove = (event) => {
       const diff = event.clientY - verticalResizeStartY;
@@ -2101,12 +2110,12 @@ function DataGrid({
     },
     [isSelecting]
   );
-  useEffect3(() => {
+  useEffect4(() => {
     const handleMouseUp = () => setIsSelecting(false);
     document.addEventListener("mouseup", handleMouseUp);
     return () => document.removeEventListener("mouseup", handleMouseUp);
   }, []);
-  useEffect3(() => {
+  useEffect4(() => {
     const handleKeydown = (event) => {
       if ((event.ctrlKey || event.metaKey) && event.key === "c" && selectionBounds) {
         event.preventDefault();