@alaarab/ogrid-core 1.4.0 → 1.6.0

package/dist/esm/hooks/useOGrid.js

@@ -1,12 +1,11 @@
 import { useMemo, useCallback, useState, useEffect, useRef, useImperativeHandle, } from 'react';
-import { getFilterField, mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, } from '../utils/ogridHelpers';
-import { getCellValue, flattenColumns } from '../utils';
-import { toDataGridFilterProps } from '../types';
+import { mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, } from '../utils/ogridHelpers';
+import { flattenColumns, processClientSideData } from '../utils';
 import { useFilterOptions } from './useFilterOptions';
 import { useSideBarState } from './useSideBarState';
 const DEFAULT_PAGE_SIZE = 25;
 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, freezeRows, freezeCols, defaultPageSize = DEFAULT_PAGE_SIZE, defaultSortBy, defaultSortDirection = 'asc', toolbar, emptyState, entityLabelPlural = 'items', className, title, layoutMode = 'fill', suppressHorizontalScroll, editable, cellSelection, onCellValueChanged, onUndo, onRedo, canUndo, canRedo, rowSelection = 'none', selectedRows, onSelectionChange, statusBar, pageSizeOptions, sideBar, onError, columnChooser: columnChooserProp, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, } = props;
+    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, 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
     const columnChooserPlacement = columnChooserProp === false ? 'none'
         : columnChooserProp === 'sidebar' ? 'sidebar'
@@ -36,6 +35,7 @@ export function useOGrid(props, ref) {
         return new Set(visible.length > 0 ? visible : columns.map((c) => c.columnId));
     });
     const [columnWidthOverrides, setColumnWidthOverrides] = useState({});
+    const [pinnedOverrides, setPinnedOverrides] = useState({});
     const page = controlledPage ?? internalPage;
     const pageSize = controlledPageSize ?? internalPageSize;
     const sort = controlledSort ?? internalSort;
@@ -69,23 +69,14 @@ export function useOGrid(props, ref) {
             setInternalVisibleColumns(cols);
         onVisibleColumnsChange?.(cols);
     }, [controlledVisibleColumns, onVisibleColumnsChange]);
-    const { multiSelectFilters, textFilters, peopleFilters, dateFilters } = useMemo(() => toDataGridFilterProps(filters), [filters]);
     const handleSort = useCallback((columnKey) => {
         setSort({
             field: columnKey,
             direction: sort.field === columnKey && sort.direction === 'asc' ? 'desc' : 'asc',
         });
     }, [sort, setSort]);
-    const handleMultiSelectFilterChange = useCallback((key, values) => {
-        setFilters(mergeFilter(filters, key, values.length ? values : undefined));
-    }, [filters, setFilters]);
-    const handleTextFilterChange = useCallback((key, value) => {
-        setFilters(mergeFilter(filters, key, value.trim() || undefined));
-    }, [filters, setFilters]);
-    const handlePeopleFilterChange = useCallback((key, user) => {
-        setFilters(mergeFilter(filters, key, user ?? undefined));
-    }, [filters, setFilters]);
-    const handleDateFilterChange = useCallback((key, value) => {
+    /** Single filter change handler — wraps discriminated FilterValue into mergeFilter. */
+    const handleFilterChange = useCallback((key, value) => {
         setFilters(mergeFilter(filters, key, value));
     }, [filters, setFilters]);
     const handleVisibilityChange = useCallback((columnKey, isVisible) => {
@@ -112,88 +103,11 @@ export function useOGrid(props, ref) {
             return serverFilterOptions;
         return deriveFilterOptionsFromData(displayData, columns);
     }, [dataSource, displayData, columns, serverFilterOptions]);
+    // --- Client-side filtering & sorting ---
     const clientItemsAndTotal = useMemo(() => {
         if (!isClientSide)
             return null;
-        let rows = displayData.slice();
-        columns.forEach((col) => {
-            const filterKey = getFilterField(col);
-            const f = col.filterable && typeof col.filterable === 'object'
-                ? col.filterable
-                : null;
-            const type = f?.type;
-            const val = filters[filterKey];
-            if (type === 'multiSelect' && Array.isArray(val) && val.length > 0) {
-                rows = rows.filter((r) => val.includes(String(getCellValue(r, col))));
-            }
-            else if (type === 'text' &&
-                typeof val === 'string' &&
-                val.trim()) {
-                const lower = val.trim().toLowerCase();
-                rows = rows.filter((r) => String(getCellValue(r, col) ?? '').toLowerCase().includes(lower));
-            }
-            else if (type === 'people' &&
-                val &&
-                typeof val === 'object' &&
-                'email' in val) {
-                const email = val.email.toLowerCase();
-                rows = rows.filter((r) => String(getCellValue(r, col) ?? '').toLowerCase() === email);
-            }
-            else if (type === 'date' &&
-                val &&
-                typeof val === 'object' &&
-                !Array.isArray(val) &&
-                ('from' in val || 'to' in val)) {
-                const dv = val;
-                rows = rows.filter((r) => {
-                    const cellVal = getCellValue(r, col);
-                    if (cellVal == null)
-                        return false;
-                    const cellDate = new Date(String(cellVal));
-                    if (Number.isNaN(cellDate.getTime()))
-                        return false;
-                    const cellDateStr = cellDate.toISOString().split('T')[0];
-                    if (dv.from && cellDateStr < dv.from)
-                        return false;
-                    if (dv.to && cellDateStr > dv.to)
-                        return false;
-                    return true;
-                });
-            }
-        });
-        if (sort.field) {
-            const sortCol = columns.find((c) => c.columnId === sort.field);
-            const compare = sortCol?.compare;
-            const dir = sort.direction === 'asc' ? 1 : -1;
-            rows.sort((a, b) => {
-                if (compare)
-                    return compare(a, b) * dir;
-                const av = sortCol
-                    ? getCellValue(a, sortCol)
-                    : a[sort.field];
-                const bv = sortCol
-                    ? getCellValue(b, sortCol)
-                    : b[sort.field];
-                if (av == null && bv == null)
-                    return 0;
-                if (av == null)
-                    return -1 * dir;
-                if (bv == null)
-                    return 1 * dir;
-                if (sortCol?.type === 'date') {
-                    const at = new Date(String(av)).getTime();
-                    const bt = new Date(String(bv)).getTime();
-                    const aN = Number.isNaN(at) ? 0 : at;
-                    const bN = Number.isNaN(bt) ? 0 : bt;
-                    return aN === bN ? 0 : aN > bN ? dir : -dir;
-                }
-                if (typeof av === 'number' && typeof bv === 'number')
-                    return av === bv ? 0 : av > bv ? dir : -dir;
-                const as = String(av).toLowerCase();
-                const bs = String(bv).toLowerCase();
-                return as === bs ? 0 : as > bs ? dir : -dir;
-            });
-        }
+        const rows = processClientSideData(displayData, columns, filters, sort.field, sort.direction);
         const total = rows.length;
         const start = (page - 1) * pageSize;
         const paged = rows.slice(start, start + pageSize);
@@ -260,6 +174,14 @@ export function useOGrid(props, ref) {
     const displayTotalCount = isClientSide && clientItemsAndTotal
         ? clientItemsAndTotal.totalCount
         : serverTotalCount;
+    // Fire onFirstDataRendered once when the grid first has data
+    const firstDataRenderedRef = useRef(false);
+    useEffect(() => {
+        if (!firstDataRenderedRef.current && displayItems.length > 0) {
+            firstDataRenderedRef.current = true;
+            onFirstDataRendered?.();
+        }
+    }, [displayItems.length, onFirstDataRendered]);
     useImperativeHandle(ref, () => ({
         setRowData: (d) => {
             if (!isServerSide)
@@ -272,6 +194,7 @@ export function useOGrid(props, ref) {
             columnOrder: columnOrder ?? undefined,
             columnWidths: Object.keys(columnWidthOverrides).length > 0 ? columnWidthOverrides : undefined,
             filters: Object.keys(filters).length > 0 ? filters : undefined,
+            pinnedColumns: Object.keys(pinnedOverrides).length > 0 ? pinnedOverrides : undefined,
         }),
         applyColumnState: (state) => {
             if (state.visibleColumns) {
@@ -289,6 +212,9 @@ export function useOGrid(props, ref) {
             if (state.filters) {
                 setFilters(state.filters);
             }
+            if (state.pinnedColumns) {
+                setPinnedOverrides(state.pinnedColumns);
+            }
         },
         setFilterModel: setFilters,
         getSelectedRows: () => Array.from(effectiveSelectedRows),
@@ -318,6 +244,7 @@ export function useOGrid(props, ref) {
         sort,
         columnOrder,
         columnWidthOverrides,
+        pinnedOverrides,
         filters,
         setFilters,
         setSort,
@@ -330,9 +257,9 @@ export function useOGrid(props, ref) {
         getRowId,
         onSelectionChange,
     ]);
+    // With discriminated union, any defined value is active (mergeFilter already strips empties)
     const hasActiveFilters = useMemo(() => {
-        return Object.values(filters).some((v) => v !== undefined &&
-            (Array.isArray(v) ? v.length > 0 : typeof v === 'string' ? v.trim() !== '' : true));
+        return Object.values(filters).some((v) => v !== undefined);
     }, [filters]);
     const columnChooserColumns = useMemo(() => columns.map((c) => ({
         columnId: c.columnId,
@@ -350,6 +277,7 @@ export function useOGrid(props, ref) {
             totalCount: totalData,
             filteredCount: hasActiveFilters ? filteredData : undefined,
             selectedCount: effectiveSelectedRows.size,
+            suppressRowCount: true, // OGrid always has pagination which shows the total
         };
     }, [
         statusBar,
@@ -364,6 +292,17 @@ export function useOGrid(props, ref) {
         setColumnWidthOverrides((prev) => ({ ...prev, [columnId]: width }));
         onColumnResized?.(columnId, width);
     }, [onColumnResized]);
+    const handleColumnPinned = useCallback((columnId, pinned) => {
+        setPinnedOverrides((prev) => {
+            if (pinned === null) {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { [columnId]: _, ...rest } = prev;
+                return rest;
+            }
+            return { ...prev, [columnId]: pinned };
+        });
+        onColumnPinned?.(columnId, pinned);
+    }, [onColumnPinned]);
     // --- Side bar ---
     const sideBarState = useSideBarState({ config: sideBar });
     const filterableColumns = useMemo(() => columns
@@ -387,12 +326,8 @@ export function useOGrid(props, ref) {
             onVisibilityChange: handleVisibilityChange,
             onSetVisibleColumns: setVisibleColumns,
             filterableColumns,
-            multiSelectFilters,
-            textFilters: textFilters ?? {},
-            onMultiSelectFilterChange: handleMultiSelectFilterChange,
-            onTextFilterChange: handleTextFilterChange,
-            dateFilters,
-            onDateFilterChange: handleDateFilterChange,
+            filters,
+            onFilterChange: handleFilterChange,
             filterOptions: clientFilterOptions,
         };
     }, [
@@ -406,12 +341,8 @@ export function useOGrid(props, ref) {
         handleVisibilityChange,
         setVisibleColumns,
         filterableColumns,
-        multiSelectFilters,
-        textFilters,
-        handleMultiSelectFilterChange,
-        handleTextFilterChange,
-        dateFilters,
-        handleDateFilterChange,
+        filters,
+        handleFilterChange,
         clientFilterOptions,
     ]);
     const dataGridProps = {
@@ -425,6 +356,8 @@ export function useOGrid(props, ref) {
         columnOrder,
         onColumnOrderChange,
         onColumnResized: handleColumnResized,
+        onColumnPinned: handleColumnPinned,
+        pinnedColumns: pinnedOverrides,
         initialColumnWidths: columnWidthOverrides,
         freezeRows,
         freezeCols,
@@ -440,14 +373,8 @@ export function useOGrid(props, ref) {
         onSelectionChange: handleSelectionChange,
         statusBar: statusBarConfig,
         isLoading: (isServerSide && loading) || displayLoading,
-        multiSelectFilters,
-        onMultiSelectFilterChange: handleMultiSelectFilterChange,
-        textFilters,
-        onTextFilterChange: handleTextFilterChange,
-        peopleFilters,
-        onPeopleFilterChange: handlePeopleFilterChange,
-        dateFilters,
-        onDateFilterChange: handleDateFilterChange,
+        filters,
+        onFilterChange: handleFilterChange,
         filterOptions: clientFilterOptions,
         loadingFilterOptions: dataSource?.fetchFilterOptions ? loadingFilterOptions : {},
         peopleSearch: dataSource?.searchPeople,
@@ -474,7 +401,6 @@ export function useOGrid(props, ref) {
         visibleColumns,
         handleVisibilityChange,
         columnChooserPlacement,
-        title,
         toolbar,
         className,
         entityLabelPlural,

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-export { toUserLike, toDataGridFilterProps, isInSelectionRange, normalizeSelectionRange } from './types';
+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';
 // Components
@@ -8,4 +8,4 @@ export { GridContextMenu } from './components/GridContextMenu';
 export { MarchingAntsOverlay } from './components/MarchingAntsOverlay';
 export { SideBar } from './components/SideBar';
 // 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, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, parseValue, numberParser, currencyParser, dateParser, emailParser, booleanParser, computeAggregations, } 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, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, parseValue, numberParser, currencyParser, dateParser, emailParser, booleanParser, computeAggregations, processClientSideData, } from './utils';

package/dist/esm/types/dataGridTypes.js

@@ -8,30 +8,6 @@ export function toUserLike(u) {
         photo: u.photo
     };
 }
-/** Type guard for IDateFilterValue. */
-function isDateFilterValue(value) {
-    return typeof value === 'object' && value !== null && !Array.isArray(value) && !('email' in value) && ('from' in value || 'to' in value);
-}
-/** Split IFilters into DataGridTable's multiSelect, text, people, and date props. */
-export function toDataGridFilterProps(filters) {
-    const multiSelectFilters = {};
-    const textFilters = {};
-    const peopleFilters = {};
-    const dateFilters = {};
-    for (const [key, value] of Object.entries(filters)) {
-        if (value === undefined)
-            continue;
-        if (Array.isArray(value))
-            multiSelectFilters[key] = value;
-        else if (typeof value === 'string')
-            textFilters[key] = value;
-        else if (typeof value === 'object' && value !== null && 'email' in value)
-            peopleFilters[key] = value;
-        else if (isDateFilterValue(value))
-            dateFilters[key] = value;
-    }
-    return { multiSelectFilters, textFilters, peopleFilters, dateFilters };
-}
 /** Returns true if (row, col) is inside the range (inclusive). */
 export function isInSelectionRange(range, row, col) {
     const minR = Math.min(range.startRow, range.endRow);

package/dist/esm/types/index.js

@@ -1 +1 @@
-export { toUserLike, toDataGridFilterProps, isInSelectionRange, normalizeSelectionRange } from './dataGridTypes';
+export { toUserLike, isInSelectionRange, normalizeSelectionRange } from './dataGridTypes';

package/dist/esm/utils/aggregationUtils.js

@@ -19,7 +19,9 @@ export function computeAggregations(items, visibleCols, selectionRange) {
             const item = items[r];
             const col = visibleCols[c];
             const raw = getCellValue(item, col);
-            const num = typeof raw === 'number' ? raw : parseFloat(String(raw));
+            // Use Number() instead of parseFloat() so date strings like "2020-08-22"
+            // return NaN instead of partially parsing to 2020
+            const num = typeof raw === 'number' ? raw : Number(raw);
             if (!isNaN(num) && isFinite(num)) {
                 numericValues.push(num);
             }

package/dist/esm/utils/clientSideData.js

@@ -0,0 +1,94 @@
+import { getCellValue } from './cellValue';
+import { getFilterField } from './ogridHelpers';
+/**
+ * Apply client-side filtering and sorting to data.
+ * Extracted from useOGrid for testability and reuse.
+ *
+ * @param data - The full dataset to process
+ * @param columns - Column definitions (used for filtering and sorting)
+ * @param filters - Current filter state (discriminated FilterValue union)
+ * @param sortBy - Column ID to sort by (optional)
+ * @param sortDirection - Sort direction (optional)
+ * @returns Filtered and sorted array
+ */
+export function processClientSideData(data, columns, filters, sortBy, sortDirection) {
+    let rows = data.slice();
+    // --- Filtering ---
+    columns.forEach((col) => {
+        const filterKey = getFilterField(col);
+        const val = filters[filterKey];
+        if (!val)
+            return;
+        switch (val.type) {
+            case 'multiSelect':
+                if (val.value.length > 0) {
+                    rows = rows.filter((r) => val.value.includes(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));
+                }
+                break;
+            case 'people': {
+                const email = val.value.email.toLowerCase();
+                rows = rows.filter((r) => String(getCellValue(r, col) ?? '').toLowerCase() === email);
+                break;
+            }
+            case 'date': {
+                const dv = val.value;
+                rows = rows.filter((r) => {
+                    const cellVal = getCellValue(r, col);
+                    if (cellVal == null)
+                        return false;
+                    const cellDate = new Date(String(cellVal));
+                    if (Number.isNaN(cellDate.getTime()))
+                        return false;
+                    const cellDateStr = cellDate.toISOString().split('T')[0];
+                    if (dv.from && cellDateStr < dv.from)
+                        return false;
+                    if (dv.to && cellDateStr > dv.to)
+                        return false;
+                    return true;
+                });
+                break;
+            }
+        }
+    });
+    // --- Sorting ---
+    if (sortBy) {
+        const sortCol = columns.find((c) => c.columnId === sortBy);
+        const compare = sortCol?.compare;
+        const dir = sortDirection === 'asc' ? 1 : -1;
+        rows.sort((a, b) => {
+            if (compare)
+                return compare(a, b) * dir;
+            const av = sortCol
+                ? getCellValue(a, sortCol)
+                : a[sortBy];
+            const bv = sortCol
+                ? getCellValue(b, sortCol)
+                : b[sortBy];
+            if (av == null && bv == null)
+                return 0;
+            if (av == null)
+                return -1 * dir;
+            if (bv == null)
+                return 1 * dir;
+            if (sortCol?.type === 'date') {
+                const at = new Date(String(av)).getTime();
+                const bt = new Date(String(bv)).getTime();
+                const aN = Number.isNaN(at) ? 0 : at;
+                const bN = Number.isNaN(bt) ? 0 : bt;
+                return aN === bN ? 0 : aN > bN ? dir : -dir;
+            }
+            if (typeof av === 'number' && typeof bv === 'number')
+                return av === bv ? 0 : av > bv ? dir : -dir;
+            const as = String(av).toLowerCase();
+            const bs = String(bv).toLowerCase();
+            return as === bs ? 0 : as > bs ? dir : -dir;
+        });
+    }
+    return rows;
+}

package/dist/esm/utils/dataGridViewModel.js

@@ -12,6 +12,7 @@ export function getHeaderFilterConfig(col, input) {
     const filterType = (filterable?.type ?? 'none');
     const filterField = filterable?.filterField ?? col.columnId;
     const sortable = col.sortable !== false;
+    const filterValue = input.filters[filterField];
     const base = {
         columnKey: col.columnId,
         columnName: col.name,
@@ -23,19 +24,15 @@ export function getHeaderFilterConfig(col, input) {
     if (filterType === 'text') {
         return {
             ...base,
-            textValue: input.textFilters?.[filterField] ?? '',
-            onTextChange: input.onTextFilterChange
-                ? (v) => input.onTextFilterChange(filterField, v)
-                : undefined,
+            textValue: filterValue?.type === 'text' ? filterValue.value : '',
+            onTextChange: (v) => input.onFilterChange(filterField, v.trim() ? { type: 'text', value: v } : undefined),
         };
     }
     if (filterType === 'people') {
         return {
             ...base,
-            selectedUser: input.peopleFilters?.[filterField],
-            onUserChange: input.onPeopleFilterChange
-                ? (u) => input.onPeopleFilterChange(filterField, u)
-                : undefined,
+            selectedUser: filterValue?.type === 'people' ? filterValue.value : undefined,
+            onUserChange: (u) => input.onFilterChange(filterField, u ? { type: 'people', value: u } : undefined),
             peopleSearch: input.peopleSearch,
         };
     }
@@ -44,17 +41,15 @@ export function getHeaderFilterConfig(col, input) {
             ...base,
             options: input.filterOptions[filterField] ?? [],
             isLoadingOptions: input.loadingFilterOptions[filterField] ?? false,
-            selectedValues: input.multiSelectFilters[filterField] ?? [],
-            onFilterChange: (values) => input.onMultiSelectFilterChange(filterField, values),
+            selectedValues: filterValue?.type === 'multiSelect' ? filterValue.value : [],
+            onFilterChange: (values) => input.onFilterChange(filterField, values.length ? { type: 'multiSelect', value: values } : undefined),
         };
     }
     if (filterType === 'date') {
         return {
             ...base,
-            dateValue: input.dateFilters?.[filterField],
-            onDateChange: input.onDateFilterChange
-                ? (v) => input.onDateFilterChange(filterField, v)
-                : undefined,
+            dateValue: filterValue?.type === 'date' ? filterValue.value : undefined,
+            onDateChange: (v) => input.onFilterChange(filterField, v ? { type: 'date', value: v } : undefined),
         };
     }
     return base;

package/dist/esm/utils/index.js

@@ -9,3 +9,4 @@ export { GRID_CONTEXT_MENU_ITEMS, getContextMenuHandlers, formatShortcut } from
 export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, } from './dataGridViewModel';
 export { parseValue, numberParser, currencyParser, dateParser, emailParser, booleanParser, } from './valueParsers';
 export { computeAggregations } from './aggregationUtils';
+export { processClientSideData } from './clientSideData';

package/dist/esm/utils/ogridHelpers.js

@@ -4,16 +4,14 @@ export function getFilterField(col) {
     const f = col.filterable && typeof col.filterable === 'object' ? col.filterable : null;
     return (f?.filterField ?? col.columnId);
 }
-/** Merge a single filter change into a full IFilters object. */
+/** Merge a single filter change into a full IFilters object. Strips empty values automatically. */
 export function mergeFilter(prev, key, value) {
     const next = { ...prev };
     const isEmpty = value === undefined ||
-        (Array.isArray(value) && value.length === 0) ||
-        (typeof value === 'string' && value.trim() === '');
-    // Date filter is empty when neither from nor to is set
-    const isEmptyDate = typeof value === 'object' && value !== null && !Array.isArray(value) && !('email' in value) &&
-        !(value.from || value.to);
-    if (isEmpty || isEmptyDate) {
+        (value.type === 'text' && value.value.trim() === '') ||
+        (value.type === 'multiSelect' && value.value.length === 0) ||
+        (value.type === 'date' && !value.value.from && !value.value.to);
+    if (isEmpty) {
         delete next[key];
     }
     else {

package/dist/esm/utils/statusBarHelpers.js

@@ -2,9 +2,11 @@
  * Returns an array of status bar parts (Rows, Filtered, Selected) for consistent rendering across packages.
  */
 export function getStatusBarParts(input) {
-    const { totalCount, filteredCount, selectedCount, selectedCellCount, aggregation } = input;
+    const { totalCount, filteredCount, selectedCount, selectedCellCount, aggregation, suppressRowCount } = input;
     const parts = [];
-    parts.push({ key: 'total', label: 'Rows:', value: totalCount });
+    if (!suppressRowCount) {
+        parts.push({ key: 'total', label: 'Rows:', value: totalCount });
+    }
     if (filteredCount !== undefined && filteredCount !== totalCount) {
         parts.push({ key: 'filtered', label: 'Filtered:', value: filteredCount });
     }

package/dist/types/components/OGridLayout.d.ts

@@ -10,15 +10,9 @@ export interface OGridLayoutProps {
     containerComponent?: React.ElementType;
     /** Extra props for the root container (e.g. sx for MUI Box). */
     containerProps?: Record<string, unknown>;
-    /** Gap between deprecated title and the bordered container in px (default: 8). */
-    gap?: number | string;
     className?: string;
-    /** @deprecated Render title outside OGrid. Renders above the bordered container during transition. */
-    title?: React.ReactNode;
     /** Custom toolbar content (left-aligned in toolbar strip). */
     toolbar?: React.ReactNode;
-    /** @deprecated Use toolbarEnd instead. */
-    columnChooser?: React.ReactNode;
     /** Built-in toolbar items rendered on the right side (column chooser, etc.). */
     toolbarEnd?: React.ReactNode;
     /** Grid content (DataGridTable). */
@@ -30,7 +24,6 @@ export interface OGridLayoutProps {
 }
 /**
  * Renders OGrid layout as a unified bordered container:
- *   [deprecated title above]
  *   ┌────────────────────────────────────┐
  *   │ [toolbar strip]                    │
  *   ├────────────────────────────────────┤

package/dist/types/components/SideBar.d.ts

@@ -4,7 +4,7 @@
  * Uses inline styles for framework-agnostic rendering.
  */
 import * as React from 'react';
-import type { IColumnDefinition, IDateFilterValue, SideBarPanelId } from '../types';
+import type { IColumnDefinition, SideBarPanelId, IFilters, FilterValue } from '../types';
 /** Describes a filterable column for the sidebar filters panel. */
 export interface SideBarFilterColumn {
     columnId: string;
@@ -23,12 +23,8 @@ export interface SideBarProps {
     /** Batch-set all visible columns at once (used by Select All / Clear All). */
     onSetVisibleColumns: (columns: Set<string>) => void;
     filterableColumns: SideBarFilterColumn[];
-    multiSelectFilters: Record<string, string[]>;
-    textFilters: Record<string, string>;
-    onMultiSelectFilterChange: (key: string, values: string[]) => void;
-    onTextFilterChange: (key: string, value: string) => void;
-    dateFilters: Record<string, IDateFilterValue>;
-    onDateFilterChange: (key: string, value: IDateFilterValue | undefined) => void;
+    filters: IFilters;
+    onFilterChange: (key: string, value: FilterValue | undefined) => void;
     filterOptions: Record<string, string[]>;
 }
 export declare function SideBar(props: SideBarProps): React.ReactElement;

package/dist/types/components/StatusBar.d.ts

@@ -18,6 +18,7 @@ export interface StatusBarProps {
         max: number;
         count: number;
     } | null;
+    suppressRowCount?: boolean;
     classNames?: StatusBarClassNames;
 }
 export declare function StatusBar({ classNames, ...rest }: StatusBarProps): React.ReactElement;

package/dist/types/hooks/index.d.ts

@@ -22,7 +22,7 @@ export { useDebounce } from './useDebounce';
 export { useFillHandle } from './useFillHandle';
 export type { UseFillHandleResult, UseFillHandleParams } from './useFillHandle';
 export { useDataGridState } from './useDataGridState';
-export type { UseDataGridStateParams, UseDataGridStateResult } from './useDataGridState';
+export type { UseDataGridStateParams, UseDataGridStateResult, DataGridLayoutState, DataGridRowSelectionState, DataGridEditingState, DataGridCellInteractionState, DataGridContextMenuState, DataGridViewModelState, } from './useDataGridState';
 export { useColumnHeaderFilterState } from './useColumnHeaderFilterState';
 export type { UseColumnHeaderFilterStateParams, UseColumnHeaderFilterStateResult, } from './useColumnHeaderFilterState';
 export { useColumnChooserState } from './useColumnChooserState';