@alaarab/ogrid-core 1.8.1 → 1.9.0

package/dist/esm/hooks/useOGrid.js

@@ -4,6 +4,13 @@ import { flattenColumns, processClientSideData } from '../utils';
 import { useFilterOptions } from './useFilterOptions';
 import { useSideBarState } from './useSideBarState';
 const DEFAULT_PAGE_SIZE = 25;
+const EMPTY_LOADING_OPTIONS = {};
+/**
+ * Top-level orchestration hook for OGrid: manages pagination, sorting, filtering, column visibility, and sidebar.
+ * @param props - All OGrid props (columns, data, callbacks, feature flags).
+ * @param ref - Forwarded ref for imperative API (refresh, export, applyColumnState).
+ * @returns Grouped props for DataGridTable, pagination controls, column chooser, layout, and filters.
+ */
 export function useOGrid(props, ref) {
     const { columns: columnsProp, getRowId, data, dataSource, page: controlledPage, pageSize: controlledPageSize, sort: controlledSort, filters: controlledFilters, visibleColumns: controlledVisibleColumns, isLoading: controlledLoading, onPageChange, onPageSizeChange, onSortChange, onFiltersChange, onVisibleColumnsChange, columnOrder, onColumnOrderChange, onColumnResized, onColumnPinned, freezeRows, freezeCols, defaultPageSize = DEFAULT_PAGE_SIZE, defaultSortBy, defaultSortDirection = 'asc', toolbar, toolbarBelow, emptyState, entityLabelPlural = 'items', className, layoutMode = 'fill', suppressHorizontalScroll, editable, cellSelection, onCellValueChanged, onUndo, onRedo, canUndo, canRedo, rowSelection = 'none', selectedRows, onSelectionChange, statusBar, pageSizeOptions, sideBar, onFirstDataRendered, onError, columnChooser: columnChooserProp, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, } = props;
     // Resolve column chooser placement
@@ -15,9 +22,6 @@ export function useOGrid(props, ref) {
     const isClientSide = !isServerSide;
     const [internalData, setInternalData] = useState([]);
     const [internalLoading, setInternalLoading] = useState(false);
-    if (data != null && dataSource != null) {
-        console.error('OGrid: pass either data or dataSource, not both.');
-    }
     const displayData = data ?? internalData;
     const displayLoading = controlledLoading ?? internalLoading;
     const defaultSortField = defaultSortBy ?? columns[0]?.columnId ?? '';
@@ -98,11 +102,12 @@ export function useOGrid(props, ref) {
     const multiSelectFilterFields = useMemo(() => getMultiSelectFilterFields(columns), [columns]);
     const filterOptionsSource = useMemo(() => dataSource ?? { fetchFilterOptions: undefined }, [dataSource]);
     const { filterOptions: serverFilterOptions, loadingOptions: loadingFilterOptions } = useFilterOptions(filterOptionsSource, multiSelectFilterFields);
+    const hasServerFilterOptions = dataSource?.fetchFilterOptions != null;
     const clientFilterOptions = useMemo(() => {
-        if (dataSource != null && dataSource.fetchFilterOptions)
+        if (hasServerFilterOptions)
             return serverFilterOptions;
         return deriveFilterOptionsFromData(displayData, columns);
-    }, [dataSource, displayData, columns, serverFilterOptions]);
+    }, [hasServerFilterOptions, displayData, columns, serverFilterOptions]);
     // --- Client-side filtering & sorting ---
     const clientItemsAndTotal = useMemo(() => {
         if (!isClientSide)
@@ -126,6 +131,9 @@ export function useOGrid(props, ref) {
     const [serverTotalCount, setServerTotalCount] = useState(0);
     const [loading, setLoading] = useState(true);
     const fetchIdRef = useRef(0);
+    // Ref counter to trigger server-side re-fetches
+    const refreshCounterRef = useRef(0);
+    const [refreshCounter, setRefreshCounter] = useState(0);
     useEffect(() => {
         if (!isServerSide || !dataSource) {
             if (!isServerSide)
@@ -158,6 +166,7 @@ export function useOGrid(props, ref) {
             if (id === fetchIdRef.current)
                 setLoading(false);
         });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         isServerSide,
         dataSource,
@@ -167,6 +176,7 @@ export function useOGrid(props, ref) {
         sort.direction,
         filters,
         onError,
+        refreshCounter,
     ]);
     const displayItems = isClientSide && clientItemsAndTotal
         ? clientItemsAndTotal.items
@@ -239,6 +249,24 @@ export function useOGrid(props, ref) {
                 selectedItems: [],
             });
         },
+        clearFilters: () => setFilters({}),
+        clearSort: () => setSort({ field: defaultSortField, direction: defaultSortDirection }),
+        resetGridState: (options) => {
+            setFilters({});
+            setSort({ field: defaultSortField, direction: defaultSortDirection });
+            if (!options?.keepSelection) {
+                if (selectedRows === undefined)
+                    setInternalSelectedRows(new Set());
+                onSelectionChange?.({ selectedRowIds: [], selectedItems: [] });
+            }
+        },
+        getDisplayedRows: () => displayItems,
+        refreshData: () => {
+            if (isServerSide) {
+                refreshCounterRef.current += 1;
+                setRefreshCounter(refreshCounterRef.current);
+            }
+        },
     }), [
         visibleColumns,
         sort,
@@ -256,6 +284,8 @@ export function useOGrid(props, ref) {
         displayItems,
         getRowId,
         onSelectionChange,
+        defaultSortField,
+        defaultSortDirection,
     ]);
     // With discriminated union, any defined value is active (mergeFilter already strips empties)
     const hasActiveFilters = useMemo(() => {
@@ -345,7 +375,9 @@ export function useOGrid(props, ref) {
         handleFilterChange,
         clientFilterOptions,
     ]);
-    const dataGridProps = {
+    const clearAllFilters = useCallback(() => setFilters({}), [setFilters]);
+    const isLoadingResolved = (isServerSide && loading) || displayLoading;
+    const dataGridProps = useMemo(() => ({
         items: displayItems,
         columns: columnsProp,
         getRowId,
@@ -372,11 +404,11 @@ export function useOGrid(props, ref) {
         selectedRows: effectiveSelectedRows,
         onSelectionChange: handleSelectionChange,
         statusBar: statusBarConfig,
-        isLoading: (isServerSide && loading) || displayLoading,
+        isLoading: isLoadingResolved,
         filters,
         onFilterChange: handleFilterChange,
         filterOptions: clientFilterOptions,
-        loadingFilterOptions: dataSource?.fetchFilterOptions ? loadingFilterOptions : {},
+        loadingFilterOptions: dataSource?.fetchFilterOptions ? loadingFilterOptions : EMPTY_LOADING_OPTIONS,
         peopleSearch: dataSource?.searchPeople,
         getUserByEmail: dataSource?.getUserByEmail,
         layoutMode,
@@ -385,30 +417,51 @@ export function useOGrid(props, ref) {
         'aria-labelledby': ariaLabelledBy,
         emptyState: {
             hasActiveFilters,
-            onClearAll: () => setFilters({}),
+            onClearAll: clearAllFilters,
             message: emptyState?.message,
             render: emptyState?.render,
         },
-    };
-    return {
-        dataGridProps,
+    }), [
+        displayItems, columnsProp, getRowId, sort.field, sort.direction, handleSort,
+        visibleColumns, columnOrder, onColumnOrderChange, handleColumnResized,
+        handleColumnPinned, pinnedOverrides, columnWidthOverrides, freezeRows, freezeCols,
+        editable, cellSelection, onCellValueChanged, onUndo, onRedo, canUndo, canRedo,
+        rowSelection, effectiveSelectedRows, handleSelectionChange, statusBarConfig,
+        isLoadingResolved, filters, handleFilterChange, clientFilterOptions, dataSource,
+        loadingFilterOptions, layoutMode, suppressHorizontalScroll, ariaLabel, ariaLabelledBy,
+        hasActiveFilters, clearAllFilters, emptyState,
+    ]);
+    const pagination = useMemo(() => ({
         page,
         pageSize,
         displayTotalCount,
         setPage,
         setPageSize,
-        columnChooserColumns,
+        pageSizeOptions,
+        entityLabelPlural,
+    }), [page, pageSize, displayTotalCount, setPage, setPageSize, pageSizeOptions, entityLabelPlural]);
+    const columnChooser = useMemo(() => ({
+        columns: columnChooserColumns,
         visibleColumns,
-        handleVisibilityChange,
-        columnChooserPlacement,
+        onVisibilityChange: handleVisibilityChange,
+        placement: columnChooserPlacement,
+    }), [columnChooserColumns, visibleColumns, handleVisibilityChange, columnChooserPlacement]);
+    const layout = useMemo(() => ({
         toolbar,
         toolbarBelow,
         className,
-        entityLabelPlural,
         emptyState,
+        sideBarProps,
+    }), [toolbar, toolbarBelow, className, emptyState, sideBarProps]);
+    const filtersResult = useMemo(() => ({
         hasActiveFilters,
         setFilters,
-        pageSizeOptions,
-        sideBarProps,
+    }), [hasActiveFilters, setFilters]);
+    return {
+        dataGridProps,
+        pagination,
+        columnChooser,
+        layout,
+        filters: filtersResult,
     };
 }

package/dist/esm/hooks/usePeopleFilterState.js

@@ -0,0 +1,68 @@
+/**
+ * People filter state sub-hook for column header filters.
+ * Manages people search text, suggestions, loading state, input ref, and user select/clear handlers.
+ * Includes debounced people search effect.
+ */
+import { useState, useCallback, useEffect, useRef } from 'react';
+const PEOPLE_SEARCH_DEBOUNCE_MS = 300;
+export function usePeopleFilterState(params) {
+    const { selectedUser, onUserChange, peopleSearch, isFilterOpen, filterType } = params;
+    const peopleInputRef = useRef(null);
+    const peopleSearchTimeoutRef = useRef(undefined);
+    const [peopleSuggestions, setPeopleSuggestions] = useState([]);
+    const [isPeopleLoading, setIsPeopleLoading] = useState(false);
+    const [peopleSearchText, setPeopleSearchText] = useState('');
+    // Sync temp state when popover opens
+    useEffect(() => {
+        if (isFilterOpen) {
+            setPeopleSearchText('');
+            setPeopleSuggestions([]);
+            if (filterType === 'people') {
+                setTimeout(() => peopleInputRef.current?.focus(), 50);
+            }
+        }
+    }, [isFilterOpen, filterType]);
+    // People search with debounce
+    useEffect(() => {
+        if (!peopleSearch || !isFilterOpen || filterType !== 'people')
+            return;
+        if (peopleSearchTimeoutRef.current)
+            window.clearTimeout(peopleSearchTimeoutRef.current);
+        if (!peopleSearchText.trim()) {
+            setPeopleSuggestions([]);
+            return;
+        }
+        setIsPeopleLoading(true);
+        peopleSearchTimeoutRef.current = window.setTimeout(async () => {
+            try {
+                const results = await peopleSearch(peopleSearchText);
+                setPeopleSuggestions(results.slice(0, 10));
+            }
+            catch {
+                setPeopleSuggestions([]);
+            }
+            finally {
+                setIsPeopleLoading(false);
+            }
+        }, PEOPLE_SEARCH_DEBOUNCE_MS);
+        return () => {
+            if (peopleSearchTimeoutRef.current)
+                window.clearTimeout(peopleSearchTimeoutRef.current);
+        };
+    }, [peopleSearchText, peopleSearch, isFilterOpen, filterType]);
+    const handleUserSelect = useCallback((user) => {
+        onUserChange?.(user);
+    }, [onUserChange]);
+    const handleClearUser = useCallback(() => {
+        onUserChange?.(undefined);
+    }, [onUserChange]);
+    return {
+        peopleSuggestions,
+        isPeopleLoading,
+        peopleSearchText,
+        setPeopleSearchText,
+        peopleInputRef,
+        handleUserSelect,
+        handleClearUser,
+    };
+}

package/dist/esm/hooks/useRichSelectState.js

@@ -1,4 +1,9 @@
 import { useState, useCallback, useMemo } from 'react';
+/**
+ * Manages searchable rich select editor state with keyboard navigation (arrow keys, enter, escape).
+ * @param params - Values, format function, initial value, and commit/cancel callbacks.
+ * @returns Search text, filtered values, highlighted index, keyboard handler, and select function.
+ */
 export function useRichSelectState(params) {
     const { values, formatValue, onCommit, onCancel } = params;
     const [searchText, setSearchText] = useState('');

package/dist/esm/hooks/useRowSelection.js

@@ -1,4 +1,10 @@
 import { useState, useCallback, useRef, useMemo } from 'react';
+import { useLatestRef } from './useLatestRef';
+/**
+ * Manages row selection state for single or multiple selection modes with shift-click range support.
+ * @param params - Items, getRowId, selection mode, controlled state, and selection change callback.
+ * @returns Selected row IDs, update function, checkbox handlers, and selection state booleans.
+ */
 export function useRowSelection(params) {
     const { items, getRowId, rowSelection, controlledSelectedRows, onSelectionChange, } = params;
     const [internalSelectedRows, setInternalSelectedRows] = useState(new Set());
@@ -18,19 +24,23 @@ export function useRowSelection(params) {
             selectedItems: items.filter((item) => newSelectedIds.has(getRowId(item))),
         });
     }, [controlledSelectedRows, onSelectionChange, items, getRowId]);
+    // Read selectedRowIds via ref to avoid recreating this callback on every selection change
+    const selectedRowIdsRef = useLatestRef(selectedRowIds);
+    const itemsRef = useLatestRef(items);
     const handleRowCheckboxChange = useCallback((rowId, checked, rowIndex, shiftKey) => {
         if (rowSelection === 'single') {
             updateSelection(checked ? new Set([rowId]) : new Set());
             lastClickedRowRef.current = rowIndex;
             return;
         }
-        const next = new Set(selectedRowIds);
+        const next = new Set(selectedRowIdsRef.current);
+        const currentItems = itemsRef.current;
         if (shiftKey && lastClickedRowRef.current >= 0 && lastClickedRowRef.current !== rowIndex) {
             const start = Math.min(lastClickedRowRef.current, rowIndex);
             const end = Math.max(lastClickedRowRef.current, rowIndex);
             for (let i = start; i <= end; i++) {
-                if (i < items.length) {
-                    const id = getRowId(items[i]);
+                if (i < currentItems.length) {
+                    const id = getRowId(currentItems[i]);
                     if (checked)
                         next.add(id);
                     else
@@ -46,7 +56,7 @@ export function useRowSelection(params) {
         }
         lastClickedRowRef.current = rowIndex;
         updateSelection(next);
-    }, [rowSelection, selectedRowIds, items, getRowId, updateSelection]);
+    }, [rowSelection, getRowId, updateSelection]);
     const handleSelectAll = useCallback((checked) => {
         if (checked) {
             updateSelection(new Set(items.map((item) => getRowId(item))));

package/dist/esm/hooks/useSideBarState.js

@@ -1,5 +1,10 @@
 import { useState, useCallback, useMemo } from 'react';
 const DEFAULT_PANELS = ['columns', 'filters'];
+/**
+ * Manages side bar panel state: enabled panels, active panel, position, and toggle/close handlers.
+ * @param params - Side bar config (boolean, ISideBarDef, or undefined).
+ * @returns Enabled flag, active panel, setters, panel list, position, open state, toggle, and close.
+ */
 export function useSideBarState(params) {
     const { config } = params;
     const isEnabled = config != null && config !== false;

package/dist/esm/hooks/useTableLayout.js

@@ -0,0 +1,77 @@
+import { useState, useEffect, useMemo } from 'react';
+import { CHECKBOX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING } from '../constants';
+/**
+ * Manages table layout: container width measurement, column sizing overrides,
+ * min/desired table width calculations.
+ */
+export function useTableLayout(params) {
+    const { wrapperRef, visibleCols, flatColumns, hasCheckboxCol, initialColumnWidths, onColumnResized, } = params;
+    // --- Container width measurement via ResizeObserver ---
+    const [containerWidth, setContainerWidth] = useState(0);
+    useEffect(() => {
+        const el = wrapperRef.current;
+        if (!el)
+            return;
+        const measure = () => {
+            const rect = el.getBoundingClientRect();
+            const cs = window.getComputedStyle(el);
+            const borderX = (parseFloat(cs.borderLeftWidth || '0') || 0) +
+                (parseFloat(cs.borderRightWidth || '0') || 0);
+            setContainerWidth(Math.max(0, rect.width - borderX));
+        };
+        const ro = new ResizeObserver(measure);
+        ro.observe(el);
+        measure();
+        return () => ro.disconnect();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []); // wrapperRef excluded — refs are stable
+    // --- Column sizing overrides state ---
+    const [columnSizingOverrides, setColumnSizingOverrides] = useState(() => {
+        if (!initialColumnWidths)
+            return {};
+        const result = {};
+        for (const [id, width] of Object.entries(initialColumnWidths)) {
+            result[id] = { widthPx: width };
+        }
+        return result;
+    });
+    // --- Minimum table width calculation ---
+    const minTableWidth = useMemo(() => {
+        const checkboxW = hasCheckboxCol ? CHECKBOX_COLUMN_WIDTH : 0;
+        return visibleCols.reduce((sum, c) => sum + (c.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH) + CELL_PADDING, checkboxW);
+    }, [visibleCols, hasCheckboxCol]);
+    // --- Cleanup effect: remove overrides for columns that no longer exist ---
+    useEffect(() => {
+        const colIds = new Set(flatColumns.map((c) => c.columnId));
+        setColumnSizingOverrides((prev) => {
+            const next = { ...prev };
+            let changed = false;
+            for (const id of Object.keys(next)) {
+                if (!colIds.has(id)) {
+                    delete next[id];
+                    changed = true;
+                }
+            }
+            return changed ? next : prev;
+        });
+    }, [flatColumns]);
+    // --- Desired table width calculation ---
+    const desiredTableWidth = useMemo(() => {
+        const checkboxW = hasCheckboxCol ? CHECKBOX_COLUMN_WIDTH : 0;
+        return visibleCols.reduce((sum, c) => {
+            const override = columnSizingOverrides[c.columnId];
+            const w = override
+                ? override.widthPx
+                : (c.idealWidth ?? c.defaultWidth ?? c.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH);
+            return sum + Math.max(c.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH, w) + CELL_PADDING;
+        }, checkboxW);
+    }, [visibleCols, columnSizingOverrides, hasCheckboxCol]);
+    return {
+        containerWidth,
+        minTableWidth,
+        desiredTableWidth,
+        columnSizingOverrides,
+        setColumnSizingOverrides,
+        onColumnResized,
+    };
+}

package/dist/esm/hooks/useTextFilterState.js

@@ -0,0 +1,25 @@
+/**
+ * Text filter state sub-hook for column header filters.
+ * Manages temporary text value and apply/clear handlers.
+ */
+import { useState, useCallback, useEffect } from 'react';
+export function useTextFilterState(params) {
+    const { textValue = '', onTextChange, isFilterOpen } = params;
+    const [tempTextValue, setTempTextValue] = useState(textValue);
+    // Sync temp state when popover opens
+    useEffect(() => {
+        if (isFilterOpen) {
+            setTempTextValue(textValue);
+        }
+    }, [isFilterOpen, textValue]);
+    const handleTextApply = useCallback(() => {
+        onTextChange?.(tempTextValue.trim());
+    }, [onTextChange, tempTextValue]);
+    const handleTextClear = useCallback(() => setTempTextValue(''), []);
+    return {
+        tempTextValue,
+        setTempTextValue,
+        handleTextApply,
+        handleTextClear,
+    };
+}

package/dist/esm/hooks/useUndoRedo.js

@@ -4,7 +4,7 @@ import { useCallback, useRef, useState } from 'react';
  * Supports batch operations: changes between beginBatch/endBatch are one undo step.
  */
 export function useUndoRedo(params) {
-    const { onCellValueChanged, maxHistory = 50 } = params;
+    const { onCellValueChanged, maxUndoDepth = 100 } = params;
     // Each history entry is an array of events (batch). Single edits are [event].
     const historyRef = useRef([]);
     const redoStackRef = useRef([]);
@@ -19,13 +19,13 @@ export function useUndoRedo(params) {
             batchRef.current.push(event);
         }
         else {
-            historyRef.current = [...historyRef.current, [event]].slice(-maxHistory);
+            historyRef.current = [...historyRef.current, [event]].slice(-maxUndoDepth);
             redoStackRef.current = [];
             setHistoryLength(historyRef.current.length);
             setRedoLength(0);
         }
         onCellValueChanged(event);
-    }, [onCellValueChanged, maxHistory]);
+    }, [onCellValueChanged, maxUndoDepth]);
     const beginBatch = useCallback(() => {
         batchRef.current = [];
     }, []);
@@ -34,11 +34,11 @@ export function useUndoRedo(params) {
         batchRef.current = null;
         if (!batch || batch.length === 0)
             return;
-        historyRef.current = [...historyRef.current, batch].slice(-maxHistory);
+        historyRef.current = [...historyRef.current, batch].slice(-maxUndoDepth);
         redoStackRef.current = [];
         setHistoryLength(historyRef.current.length);
         setRedoLength(0);
-    }, [maxHistory]);
+    }, [maxUndoDepth]);
     const undo = useCallback(() => {
         if (!onCellValueChanged || historyRef.current.length === 0)
             return;
@@ -78,5 +78,6 @@ export function useUndoRedo(params) {
         canRedo: redoLength > 0,
         beginBatch,
         endBatch,
+        maxUndoDepth,
     };
 }

package/dist/esm/index.js

@@ -1,11 +1,16 @@
+// Constants
+export { CHECKBOX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, GRID_BORDER_RADIUS, } from './constants';
 export { toUserLike, isInSelectionRange, normalizeSelectionRange } from './types';
 // Hooks
-export { useFilterOptions, useOGrid, useActiveCell, useCellEditing, useContextMenu, useCellSelection, useClipboard, useRowSelection, useKeyboardNavigation, useUndoRedo, useDebounce, useFillHandle, useDataGridState, useColumnHeaderFilterState, useColumnChooserState, useInlineCellEditorState, useColumnResize, useRichSelectState, useSideBarState, } from './hooks';
+export { useFilterOptions, useOGrid, useActiveCell, useCellEditing, useContextMenu, useCellSelection, useClipboard, useRowSelection, useKeyboardNavigation, useUndoRedo, useDebounce, useFillHandle, useDataGridState, useColumnHeaderFilterState, useTextFilterState, useMultiSelectFilterState, usePeopleFilterState, useDateFilterState, useColumnChooserState, useInlineCellEditorState, useColumnResize, useRichSelectState, useSideBarState, useTableLayout, useLatestRef, } from './hooks';
 // Components
 export { OGridLayout } from './components/OGridLayout';
 export { StatusBar } from './components/StatusBar';
+export { BaseInlineCellEditor, editorWrapperStyle, editorInputStyle, richSelectWrapperStyle, richSelectDropdownStyle, richSelectOptionStyle, richSelectOptionHighlightedStyle, richSelectNoMatchesStyle, selectEditorStyle, } from './components/BaseInlineCellEditor';
 export { GridContextMenu } from './components/GridContextMenu';
 export { MarchingAntsOverlay } from './components/MarchingAntsOverlay';
 export { SideBar } from './components/SideBar';
+export { CellErrorBoundary } from './components/CellErrorBoundary';
+export { EmptyState } from './components/EmptyState';
 // Utilities
-export { escapeCsvValue, buildCsvHeader, buildCsvRows, exportToCsv, triggerCsvDownload, getCellValue, flattenColumns, buildHeaderRows, getFilterField, mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, getStatusBarParts, getDataGridStatusBarConfig, GRID_CONTEXT_MENU_ITEMS, getContextMenuHandlers, formatShortcut, getPaginationViewModel, PAGE_SIZE_OPTIONS, MAX_PAGE_BUTTONS, getHeaderFilterConfig, getCellRenderDescriptor, isRowInRange, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, parseValue, numberParser, currencyParser, dateParser, emailParser, booleanParser, computeAggregations, processClientSideData, } from './utils';
+export { escapeCsvValue, buildCsvHeader, buildCsvRows, exportToCsv, triggerCsvDownload, getCellValue, flattenColumns, buildHeaderRows, getFilterField, mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, getStatusBarParts, getDataGridStatusBarConfig, GRID_CONTEXT_MENU_ITEMS, getContextMenuHandlers, formatShortcut, getPaginationViewModel, PAGE_SIZE_OPTIONS, MAX_PAGE_BUTTONS, getHeaderFilterConfig, getCellRenderDescriptor, isRowInRange, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, parseValue, numberParser, currencyParser, dateParser, emailParser, booleanParser, computeAggregations, processClientSideData, areGridRowPropsEqual, } from './utils';

package/dist/esm/utils/clientSideData.js

@@ -12,33 +12,37 @@ import { getFilterField } from './ogridHelpers';
  * @returns Filtered and sorted array
  */
 export function processClientSideData(data, columns, filters, sortBy, sortDirection) {
-    let rows = data.slice();
-    // --- Filtering ---
-    columns.forEach((col) => {
+    // --- Filtering (single-pass: build predicates, then one .filter()) ---
+    const predicates = [];
+    for (let i = 0; i < columns.length; i++) {
+        const col = columns[i];
         const filterKey = getFilterField(col);
         const val = filters[filterKey];
         if (!val)
-            return;
+            continue;
         switch (val.type) {
             case 'multiSelect':
                 if (val.value.length > 0) {
-                    rows = rows.filter((r) => val.value.includes(String(getCellValue(r, col))));
+                    const allowedSet = new Set(val.value);
+                    predicates.push((r) => allowedSet.has(String(getCellValue(r, col))));
                 }
                 break;
-            case 'text':
-                if (val.value.trim()) {
-                    const lower = val.value.trim().toLowerCase();
-                    rows = rows.filter((r) => String(getCellValue(r, col) ?? '').toLowerCase().includes(lower));
+            case 'text': {
+                const trimmed = val.value.trim();
+                if (trimmed) {
+                    const lower = trimmed.toLowerCase();
+                    predicates.push((r) => String(getCellValue(r, col) ?? '').toLowerCase().includes(lower));
                 }
                 break;
+            }
             case 'people': {
                 const email = val.value.email.toLowerCase();
-                rows = rows.filter((r) => String(getCellValue(r, col) ?? '').toLowerCase() === email);
+                predicates.push((r) => String(getCellValue(r, col) ?? '').toLowerCase() === email);
                 break;
             }
             case 'date': {
                 const dv = val.value;
-                rows = rows.filter((r) => {
+                predicates.push((r) => {
                     const cellVal = getCellValue(r, col);
                     if (cellVal == null)
                         return false;
@@ -55,7 +59,16 @@ export function processClientSideData(data, columns, filters, sortBy, sortDirect
                 break;
             }
         }
-    });
+    }
+    let rows = predicates.length > 0
+        ? data.filter((row) => {
+            for (let i = 0; i < predicates.length; i++) {
+                if (!predicates[i](row))
+                    return false;
+            }
+            return true;
+        })
+        : data.slice();
     // --- Sorting ---
     if (sortBy) {
         const sortCol = columns.find((c) => c.columnId === sortBy);

package/dist/esm/utils/columnUtils.js

@@ -66,7 +66,12 @@ export function buildHeaderRows(columns, visibleColumns) {
     const totalRows = maxDepth + 1;
     const rows = Array.from({ length: totalRows }, () => []);
     // Step 3: Walk the tree and place cells
+    // Cache leaf counts by children array ref to avoid O(n²) repeated traversals
+    const leafCountCache = new Map();
     function countVisibleLeaves(cols) {
+        const cached = leafCountCache.get(cols);
+        if (cached !== undefined)
+            return cached;
         let count = 0;
         for (const c of cols) {
             if (isColumnGroupDef(c)) {
@@ -78,6 +83,7 @@ export function buildHeaderRows(columns, visibleColumns) {
                 }
             }
         }
+        leafCountCache.set(cols, count);
         return count;
     }
     function walk(cols, depth) {

package/dist/esm/utils/gridRowComparator.js

@@ -0,0 +1,68 @@
+import { isRowInRange } from './dataGridViewModel';
+/**
+ * Shared React.memo comparator for GridRow components across all 3 UI packages.
+ * Skips re-render for rows unaffected by selection/editing/interaction changes.
+ *
+ * Used by:
+ * - packages/radix/src/DataGridTable/DataGridTable.tsx
+ * - packages/fluent/src/DataGridTable/DataGridTable.tsx
+ * - packages/material/src/DataGridTable/DataGridTable.tsx
+ */
+export function areGridRowPropsEqual(prev, next) {
+    // Data / structure changes — always re-render
+    if (prev.item !== next.item)
+        return false;
+    if (prev.isSelected !== next.isSelected)
+        return false;
+    if (prev.hasCheckboxCol !== next.hasCheckboxCol)
+        return false;
+    // Framework-specific structure props (compared by identity)
+    if (prev.visibleCols !== next.visibleCols)
+        return false;
+    if (prev.columnMeta !== next.columnMeta)
+        return false;
+    if (prev.cellClassMap !== next.cellClassMap)
+        return false;
+    if (prev.columnLayouts !== next.columnLayouts)
+        return false;
+    const ri = prev.rowIndex;
+    // Editing cell in this row?
+    if (prev.editingRowId !== next.editingRowId) {
+        if (prev.editingRowId === prev.rowId || next.editingRowId === next.rowId)
+            return false;
+    }
+    // Active cell in this row?
+    const prevActive = prev.activeCell?.rowIndex === ri;
+    const nextActive = next.activeCell?.rowIndex === ri;
+    if (prevActive !== nextActive)
+        return false;
+    if (prevActive && nextActive && prev.activeCell.columnIndex !== next.activeCell.columnIndex)
+        return false;
+    // Selection range touches this row?
+    const prevInSel = isRowInRange(prev.selectionRange, ri);
+    const nextInSel = isRowInRange(next.selectionRange, ri);
+    if (prevInSel !== nextInSel)
+        return false;
+    if (prevInSel && nextInSel) {
+        if (prev.selectionRange.startCol !== next.selectionRange.startCol ||
+            prev.selectionRange.endCol !== next.selectionRange.endCol)
+            return false;
+    }
+    // Fill handle (selection end row) + isDragging
+    const prevIsEnd = prev.selectionRange?.endRow === ri;
+    const nextIsEnd = next.selectionRange?.endRow === ri;
+    if (prevIsEnd !== nextIsEnd)
+        return false;
+    if ((prevIsEnd || nextIsEnd) && prev.isDragging !== next.isDragging)
+        return false;
+    // Cut/copy ranges touch this row?
+    if (prev.cutRange !== next.cutRange) {
+        if (isRowInRange(prev.cutRange, ri) || isRowInRange(next.cutRange, ri))
+            return false;
+    }
+    if (prev.copyRange !== next.copyRange) {
+        if (isRowInRange(prev.copyRange, ri) || isRowInRange(next.copyRange, ri))
+            return false;
+    }
+    return true;
+}

package/dist/esm/utils/index.js

@@ -10,3 +10,4 @@ export { getHeaderFilterConfig, getCellRenderDescriptor, isRowInRange, resolveCe
 export { parseValue, numberParser, currencyParser, dateParser, emailParser, booleanParser, } from './valueParsers';
 export { computeAggregations } from './aggregationUtils';
 export { processClientSideData } from './clientSideData';
+export { areGridRowPropsEqual } from './gridRowComparator';