@xcelsior/ui-spreadsheets 1.1.15 → 1.1.17

package/dist/index.d.mts

@@ -293,6 +293,8 @@ interface SpreadsheetProps<T = any> {
     onSortChange?: (sortConfig: SpreadsheetSortConfig | null) => void;
     /** Callback when filters change */
     onFilterChange?: (filters: Record<string, SpreadsheetColumnFilter>) => void;
+    /** Callback with filtered data after filters are applied */
+    afterFiltered?: (filteredData: T[]) => void;
     /** Callback for row click */
     onRowClick?: (row: T, rowIndex: number) => void;
     /** Callback for row double click */
@@ -671,7 +673,7 @@ interface SpreadsheetColumnGroupHeaderProps {
  * />
  * ```
  */
-declare function Spreadsheet<T extends Record<string, any>>({ data, columns, columnGroups, getRowId, onCellsEdit, onSelectionChange, onSortChange, onFilterChange, onRowClick, onRowDoubleClick, onAddCellComment, onToggleCommentResolved, onRowHighlight, onColumnHighlight, onCellHighlight, showToolbar, showPagination, enableRowSelection, enableCellEditing, enableComments, enableHighlighting, enableUndoRedo, pageSizeOptions, onSave, settings: initialSettings, onSettingsChange, isLoading, className, emptyMessage, rowHighlights: externalRowHighlights, columnHighlights: externalColumnHighlights, cellHighlights: externalCellHighlights, cellComments: externalCellComments, rowActions, rowContextMenuItems, toolbarMenuItems, serverSide, totalItems, currentPage: controlledCurrentPage, pageSize: controlledPageSize, sortConfig: controlledSortConfig, onPageChange, filters: controlledFilters, }: SpreadsheetProps<T>): react_jsx_runtime.JSX.Element;
+declare function Spreadsheet<T extends Record<string, any>>({ data, columns, columnGroups, getRowId, onCellsEdit, onSelectionChange, onSortChange, onFilterChange, afterFiltered, onRowClick, onRowDoubleClick, onAddCellComment, onToggleCommentResolved, onRowHighlight, onColumnHighlight, onCellHighlight, showToolbar, showPagination, enableRowSelection, enableCellEditing, enableComments, enableHighlighting, enableUndoRedo, pageSizeOptions, onSave, settings: initialSettings, onSettingsChange, isLoading, className, emptyMessage, rowHighlights: externalRowHighlights, columnHighlights: externalColumnHighlights, cellHighlights: externalCellHighlights, cellComments: externalCellComments, rowActions, rowContextMenuItems, toolbarMenuItems, serverSide, totalItems, currentPage: controlledCurrentPage, pageSize: controlledPageSize, sortConfig: controlledSortConfig, onPageChange, filters: controlledFilters, }: SpreadsheetProps<T>): react_jsx_runtime.JSX.Element;
 declare namespace Spreadsheet {
     var displayName: string;
 }

package/dist/index.d.ts

@@ -293,6 +293,8 @@ interface SpreadsheetProps<T = any> {
     onSortChange?: (sortConfig: SpreadsheetSortConfig | null) => void;
     /** Callback when filters change */
     onFilterChange?: (filters: Record<string, SpreadsheetColumnFilter>) => void;
+    /** Callback with filtered data after filters are applied */
+    afterFiltered?: (filteredData: T[]) => void;
     /** Callback for row click */
     onRowClick?: (row: T, rowIndex: number) => void;
     /** Callback for row double click */
@@ -671,7 +673,7 @@ interface SpreadsheetColumnGroupHeaderProps {
  * />
  * ```
  */
-declare function Spreadsheet<T extends Record<string, any>>({ data, columns, columnGroups, getRowId, onCellsEdit, onSelectionChange, onSortChange, onFilterChange, onRowClick, onRowDoubleClick, onAddCellComment, onToggleCommentResolved, onRowHighlight, onColumnHighlight, onCellHighlight, showToolbar, showPagination, enableRowSelection, enableCellEditing, enableComments, enableHighlighting, enableUndoRedo, pageSizeOptions, onSave, settings: initialSettings, onSettingsChange, isLoading, className, emptyMessage, rowHighlights: externalRowHighlights, columnHighlights: externalColumnHighlights, cellHighlights: externalCellHighlights, cellComments: externalCellComments, rowActions, rowContextMenuItems, toolbarMenuItems, serverSide, totalItems, currentPage: controlledCurrentPage, pageSize: controlledPageSize, sortConfig: controlledSortConfig, onPageChange, filters: controlledFilters, }: SpreadsheetProps<T>): react_jsx_runtime.JSX.Element;
+declare function Spreadsheet<T extends Record<string, any>>({ data, columns, columnGroups, getRowId, onCellsEdit, onSelectionChange, onSortChange, onFilterChange, afterFiltered, onRowClick, onRowDoubleClick, onAddCellComment, onToggleCommentResolved, onRowHighlight, onColumnHighlight, onCellHighlight, showToolbar, showPagination, enableRowSelection, enableCellEditing, enableComments, enableHighlighting, enableUndoRedo, pageSizeOptions, onSave, settings: initialSettings, onSettingsChange, isLoading, className, emptyMessage, rowHighlights: externalRowHighlights, columnHighlights: externalColumnHighlights, cellHighlights: externalCellHighlights, cellComments: externalCellComments, rowActions, rowContextMenuItems, toolbarMenuItems, serverSide, totalItems, currentPage: controlledCurrentPage, pageSize: controlledPageSize, sortConfig: controlledSortConfig, onPageChange, filters: controlledFilters, }: SpreadsheetProps<T>): react_jsx_runtime.JSX.Element;
 declare namespace Spreadsheet {
     var displayName: string;
 }

package/dist/index.js

@@ -1365,7 +1365,8 @@ var SpreadsheetToolbar = ({
                     activeFilterCount,
                     " filter",
                     activeFilterCount !== 1 ? "s" : "",
-                    " active"
+                    " ",
+                    "active"
                   ] }),
                   showFiltersPanel ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HiChevronUp, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HiChevronDown, { className: "h-3 w-3" })
                 ]
@@ -1429,7 +1430,7 @@ var SpreadsheetToolbar = ({
                   ]
                 }
               ),
-              showMoreMenu && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "absolute right-0 top-full mt-1 bg-white border border-gray-200 shadow-lg rounded py-1 min-w-[180px] z-20", children: [
+              showMoreMenu && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "absolute right-0 top-full mt-1 bg-white border border-gray-200 shadow-lg rounded py-1 min-w-[180px] z-50", children: [
                 onSettings && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                   "button",
                   {
@@ -3667,6 +3668,7 @@ function Spreadsheet({
   onSelectionChange,
   onSortChange,
   onFilterChange,
+  afterFiltered,
   onRowClick,
   onRowDoubleClick,
   onAddCellComment,
@@ -3835,6 +3837,23 @@ function Spreadsheet({
     },
     [controlledPageSize, controlledCurrentPage, onPageChange]
   );
+  const resetPaginationToFirstPage = (0, import_react17.useCallback)(() => {
+    if (controlledCurrentPage === void 0) {
+      setInternalCurrentPage(1);
+    }
+    onPageChange?.(1, pageSize);
+  }, [controlledCurrentPage, onPageChange, pageSize]);
+  const handleFilterChangeWithReset = (0, import_react17.useCallback)(
+    (columnId, filter) => {
+      handleFilterChange(columnId, filter);
+      resetPaginationToFirstPage();
+    },
+    [handleFilterChange, resetPaginationToFirstPage]
+  );
+  const clearAllFiltersWithReset = (0, import_react17.useCallback)(() => {
+    clearAllFilters();
+    resetPaginationToFirstPage();
+  }, [clearAllFilters, resetPaginationToFirstPage]);
   (0, import_react17.useEffect)(() => {
     setSpreadsheetSettings((prev) => ({
       ...prev,
@@ -4029,6 +4048,11 @@ function Spreadsheet({
       setInternalCurrentPage(1);
     }
   }, [totalPages, currentPage, serverSide]);
+  const afterFilteredRef = (0, import_react17.useRef)(afterFiltered);
+  afterFilteredRef.current = afterFiltered;
+  (0, import_react17.useEffect)(() => {
+    afterFilteredRef.current?.(filteredData.toArray());
+  }, [filteredData]);
   const handleRowSelect = (0, import_react17.useCallback)(
     (rowId, event) => {
       if (!enableRowSelection) return;
@@ -4247,10 +4271,10 @@ function Spreadsheet({
         saveStatus,
         autoSave: spreadsheetSettings.autoSave,
         hasActiveFilters,
-        onClearFilters: clearAllFilters,
+        onClearFilters: clearAllFiltersWithReset,
         filters,
         columns,
-        onClearFilter: (columnId) => handleFilterChange(columnId, void 0),
+        onClearFilter: (columnId) => handleFilterChangeWithReset(columnId, void 0),
         showFiltersPanel,
         onToggleFiltersPanel: () => setShowFiltersPanel(!showFiltersPanel),
         onZoomIn: () => setZoom((z) => Math.min(z + 10, 200)),
@@ -4392,7 +4416,10 @@ function Spreadsheet({
                       {
                         column,
                         filter: filters[column.id],
-                        onFilterChange: (filter) => handleFilterChange(column.id, filter),
+                        onFilterChange: (filter) => handleFilterChangeWithReset(
+                          column.id,
+                          filter
+                        ),
                         onClose: () => setActiveFilterColumn(null)
                       }
                     )