@opencorestack/opengridx 3.4.0 → 3.5.1

package/lib/components/HeaderFilter/HeaderFilterOperatorMenu.tsx

@@ -0,0 +1,124 @@
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
+import type { GridFilterOperator } from '../../types';
+import { HEADER_FILTER_OPERATOR_LABELS } from '../../utils/headerFilters';
+import { getViewportHeight, getViewportWidth } from '../../utils/viewport';
+
+export interface HeaderFilterOperatorMenuProps {
+    anchorEl: HTMLElement;
+    /** Column header name, for the menu's label. */
+    columnLabel: string;
+    operators: GridFilterOperator[];
+    current: GridFilterOperator;
+    onSelect: (operator: GridFilterOperator) => void;
+    /** `restoreFocus`: the menu was left from the keyboard or by choosing an item. */
+    onClose: (restoreFocus: boolean) => void;
+}
+
+const HIDDEN_STYLE: React.CSSProperties = { position: 'fixed', zIndex: 1300, top: 0, left: 0, visibility: 'hidden' };
+
+const itemsOf = (menu: HTMLElement | null): HTMLElement[] =>
+    menu ? Array.from(menu.querySelectorAll<HTMLElement>('[role="menuitemradio"]')) : [];
+
+/** The operator menu of a header filter cell: a menu of radio items, portalled out of the header. */
+export function HeaderFilterOperatorMenu({ anchorEl, columnLabel, operators, current, onSelect, onClose }: HeaderFilterOperatorMenuProps) {
+    const menuRef = useRef<HTMLDivElement>(null);
+    const [style, setStyle] = useState<React.CSSProperties>(HIDDEN_STYLE);
+
+    useLayoutEffect(() => {
+        const menu = menuRef.current;
+        if (!menu) return;
+        const anchor = anchorEl.getBoundingClientRect();
+        const box = menu.getBoundingClientRect();
+        const margin = 8;
+        let left = Math.min(anchor.left, getViewportWidth() - box.width - margin);
+        if (left < margin) left = margin;
+        let top = anchor.bottom + 4;
+        if (top + box.height + margin > getViewportHeight()) top = anchor.top - box.height - 4;
+        setStyle({ position: 'fixed', zIndex: 1300, top, left, visibility: 'visible' });
+    }, [anchorEl]);
+
+    // Focus the checked item once the menu is positioned (a hidden element cannot take focus).
+    const isPositioned = style.visibility === 'visible';
+    useLayoutEffect(() => {
+        if (!isPositioned) return;
+        const items = itemsOf(menuRef.current);
+        (items.find(item => item.getAttribute('aria-checked') === 'true') ?? items[0])?.focus({ preventScroll: true });
+    }, [isPositioned]);
+
+    const onCloseRef = useRef(onClose);
+    useLayoutEffect(() => { onCloseRef.current = onClose; });
+
+    useEffect(() => {
+        const doc = anchorEl.ownerDocument;
+        const view = doc.defaultView;
+        function handleMouseDown(event: MouseEvent) {
+            const target = event.target as Node;
+            if (menuRef.current?.contains(target) || anchorEl.contains(target)) return;
+            onCloseRef.current(false);
+        }
+        // The menu floats at a fixed position: it closes rather than drift away from its cell.
+        function handleScroll(event: Event) {
+            if (menuRef.current?.contains(event.target as Node)) return;
+            onCloseRef.current(false);
+        }
+        function handleResize() { onCloseRef.current(false); }
+        doc.addEventListener('mousedown', handleMouseDown);
+        view?.addEventListener('scroll', handleScroll, true);
+        view?.addEventListener('resize', handleResize);
+        return () => {
+            doc.removeEventListener('mousedown', handleMouseDown);
+            view?.removeEventListener('scroll', handleScroll, true);
+            view?.removeEventListener('resize', handleResize);
+        };
+    }, [anchorEl]);
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+        // The menu is portalled: keys must not reach the cell or the grid through the React tree.
+        event.stopPropagation();
+        const items = itemsOf(menuRef.current);
+        const index = items.indexOf(event.target as HTMLElement);
+        let next = -1;
+        switch (event.key) {
+            case 'ArrowDown': next = index + 1 >= items.length ? 0 : index + 1; break;
+            case 'ArrowUp': next = index <= 0 ? items.length - 1 : index - 1; break;
+            case 'Home': next = 0; break;
+            case 'End': next = items.length - 1; break;
+            case 'Escape':
+            case 'Tab':
+                event.preventDefault();
+                onClose(true);
+                return;
+            default:
+                return;
+        }
+        event.preventDefault();
+        items[next]?.focus();
+    };
+
+    return ReactDOM.createPortal(
+        <div
+            ref={menuRef}
+            className="ogx-column-menu ogx__header-filter-menu"
+            style={style}
+            role="menu"
+            aria-label={`Filter operator for ${columnLabel}`}
+            onKeyDown={handleKeyDown}
+        >
+            {operators.map(op => (
+                <button
+                    key={op}
+                    type="button"
+                    role="menuitemradio"
+                    aria-checked={op === current}
+                    tabIndex={-1}
+                    className={`ogx-menu-item${op === current ? ' ogx-menu-item--active' : ''}`}
+                    onClick={() => onSelect(op)}
+                >
+                    {HEADER_FILTER_OPERATOR_LABELS[op] ?? op}
+                </button>
+            ))}
+        </div>,
+        anchorEl.closest('.ogx-theme-provider') ?? anchorEl.ownerDocument.body
+    );
+}

package/lib/components/HeaderFilter/HeaderFilterRow.tsx

@@ -0,0 +1,157 @@
+import { useCallback, useLayoutEffect, useRef } from 'react';
+import type { GridColDef, GridColumnPinning, GridFilterItem, GridFilterModel } from '../../types';
+import { isColumnPinned, SYSTEM_COLUMN_WIDTH } from '../../utils/pinning';
+import { CHECKBOX_FIELD, EXPAND_FIELD, REORDER_FIELD } from '../../utils/focus';
+import { getHeaderFilterState, hasHeaderFilter, setHeaderFilterItem } from '../../utils/headerFilters';
+import { getHeaderColumnStyle } from '../Header/headerColumnStyle';
+import { HeaderFilterCell } from './HeaderFilterCell';
+
+export interface HeaderFilterRowProps {
+    /** The rendered columns of the column header row (render window with spacers), in render order. */
+    columns: GridColDef[];
+    columnWidths: Record<string, number>;
+    pinnedColumns?: GridColumnPinning;
+    /** Sticky offsets of the pinned columns (`calculatePinnedPositions`). */
+    pinnedPositions: Record<string, number>;
+    pinnedEdges: { lastLeft: string | null; firstRight: string | null };
+    rowReordering: boolean;
+    hasDetailPanel: boolean;
+    checkboxSelection: boolean;
+    pinExpandColumn: boolean;
+    pinCheckboxColumn: boolean;
+    columnIndexMap?: Map<string, number>;
+    /** `aria-rowindex` of the row: right after the column header row. */
+    ariaRowIndex: number;
+    filterModel?: GridFilterModel;
+    onFilterModelChange?: (model: GridFilterModel) => void;
+    onOpenFilterPanel?: () => void;
+    /** Field of the focused filter cell, or null. */
+    focusedField: string | null;
+}
+
+function SystemFilterCell({ field, ariaColIndex, sticky, left, focused }: {
+    field: string;
+    ariaColIndex: number;
+    sticky: boolean;
+    left: number;
+    focused: boolean;
+}) {
+    return (
+        <div
+            className={[
+                'ogx__header-filter-cell',
+                'ogx__header-filter-cell--system',
+                sticky && 'ogx__header-filter-cell--pinned ogx__header-filter-cell--pinned-left',
+                focused && 'ogx__header-filter-cell--focused',
+            ].filter(Boolean).join(' ')}
+            style={{
+                width: SYSTEM_COLUMN_WIDTH,
+                minWidth: SYSTEM_COLUMN_WIDTH,
+                maxWidth: SYSTEM_COLUMN_WIDTH,
+                position: sticky ? 'sticky' : undefined,
+                left: sticky ? left : undefined,
+            }}
+            role="columnheader"
+            aria-colindex={ariaColIndex}
+            data-field={field}
+            tabIndex={-1}
+        />
+    );
+}
+
+/**
+ * The header filter row (`headerFilters`): one cell per rendered column, laid out like the column
+ * header row above it, so pinned and virtualized columns line up. It edits the shared filter model
+ * through the root-level items it owns (`header:<field>`).
+ */
+export function HeaderFilterRow(props: HeaderFilterRowProps) {
+    const {
+        columns, columnWidths, pinnedColumns, pinnedPositions, pinnedEdges, rowReordering, hasDetailPanel,
+        checkboxSelection, pinExpandColumn, pinCheckboxColumn, columnIndexMap, ariaRowIndex, filterModel,
+        onFilterModelChange, onOpenFilterPanel, focusedField,
+    } = props;
+
+    // Cells commit from timers and unmount cleanups: they read the newest model, and two commits
+    // before the next render build on each other.
+    const latestRef = useRef({ filterModel, onFilterModelChange });
+    useLayoutEffect(() => {
+        latestRef.current = { filterModel, onFilterModelChange };
+    });
+    const handleItemChange = useCallback((field: string, item: GridFilterItem | null) => {
+        const { filterModel: current, onFilterModelChange: emit } = latestRef.current;
+        if (!emit) return;
+        const next = setHeaderFilterItem(current, field, item);
+        if (next === current) return;
+        latestRef.current = { filterModel: next, onFilterModelChange: emit };
+        emit(next);
+    }, []);
+
+    const reorderColIndex = rowReordering ? 1 : 0;
+    const expandColIndex = hasDetailPanel ? reorderColIndex + 1 : reorderColIndex;
+    const checkboxColIndex = checkboxSelection ? expandColIndex + 1 : expandColIndex;
+    const systemColumnCount = checkboxColIndex;
+    const expandLeft = rowReordering ? SYSTEM_COLUMN_WIDTH : 0;
+    const checkboxLeft = expandLeft + (hasDetailPanel && pinExpandColumn ? SYSTEM_COLUMN_WIDTH : 0);
+
+    return (
+        <div className="ogx__header-filter-row" role="row" aria-rowindex={ariaRowIndex}>
+            {rowReordering && (
+                <SystemFilterCell field={REORDER_FIELD} ariaColIndex={reorderColIndex} sticky left={0} focused={focusedField === REORDER_FIELD} />
+            )}
+            {hasDetailPanel && (
+                <SystemFilterCell field={EXPAND_FIELD} ariaColIndex={expandColIndex} sticky={pinExpandColumn} left={expandLeft} focused={focusedField === EXPAND_FIELD} />
+            )}
+            {checkboxSelection && (
+                <SystemFilterCell field={CHECKBOX_FIELD} ariaColIndex={checkboxColIndex} sticky={pinCheckboxColumn} left={checkboxLeft} focused={focusedField === CHECKBOX_FIELD} />
+            )}
+            {columns.map((colDef, index) => {
+                if (colDef.isSpacer) {
+                    return (
+                        <div
+                            key={colDef.field}
+                            style={{ width: colDef.width, minWidth: colDef.width, flexShrink: 0 }}
+                            aria-hidden="true"
+                        />
+                    );
+                }
+                const pinnedPosition = isColumnPinned(colDef.field, pinnedColumns);
+                const style = getHeaderColumnStyle(colDef, columnWidths, pinnedPosition, pinnedPosition ? pinnedPositions[colDef.field] : undefined);
+                const ariaColIndex = systemColumnCount + (columnIndexMap?.get(colDef.field) ?? index) + 1;
+                const className = [
+                    pinnedPosition && 'ogx__header-filter-cell--pinned',
+                    pinnedPosition && `ogx__header-filter-cell--pinned-${pinnedPosition}`,
+                    pinnedPosition === 'left' && colDef.field === pinnedEdges.lastLeft && 'ogx__header-filter-cell--pinned-left-last',
+                    pinnedPosition === 'right' && colDef.field === pinnedEdges.firstRight && 'ogx__header-filter-cell--pinned-right-first',
+                    focusedField === colDef.field && 'ogx__header-filter-cell--focused',
+                ].filter(Boolean).join(' ');
+
+                if (!hasHeaderFilter(colDef)) {
+                    return (
+                        <div
+                            key={colDef.field}
+                            className={`ogx__header-filter-cell ogx__header-filter-cell--empty ${className}`}
+                            style={style}
+                            role="columnheader"
+                            aria-label={`No filter for ${colDef.headerName || colDef.field}`}
+                            aria-colindex={ariaColIndex}
+                            data-field={colDef.field}
+                            tabIndex={-1}
+                        />
+                    );
+                }
+                return (
+                    <HeaderFilterCell
+                        key={colDef.field}
+                        colDef={colDef}
+                        state={getHeaderFilterState(filterModel, colDef.field)}
+                        style={style}
+                        className={className}
+                        ariaColIndex={ariaColIndex}
+                        onItemChange={handleItemChange}
+                        onOpenFilterPanel={onOpenFilterPanel}
+                    />
+                );
+            })}
+        </div>
+    );
+}

package/lib/components/Toolbar/GridToolbar.tsx

@@ -10,6 +10,7 @@ import { GlobalSearch } from './GlobalSearch';
 import { ColumnVisibilityPanel } from '../ColumnVisibilityPanel/ColumnVisibilityPanel';
 import { FilterPanel } from '../FilterPanel/FilterPanel';
 import { GridTooltip } from '../Tooltip/Tooltip';
+import { AiSparkleIcon } from '../AiAssistant/GridAiAssistantPanel';
 
 /** Props passed to a custom toolbar button renderer. */
 export interface ToolbarButtonRenderProps {
@@ -48,6 +49,10 @@ export interface GridToolbarProps {
     onColumnOrderReset?: () => void;
     forceColumnsOpen?: boolean;
     onColumnsPanelClose?: () => void;
+    /** Opens the filter panel when it turns true (the grid passes it for the header filter row). @since v3.5 */
+    forceFiltersOpen?: boolean;
+    /** Called whenever the filter panel closes. @since v3.5 */
+    onFiltersPanelClose?: () => void;
     children?: React.ReactNode;
     rightContent?: React.ReactNode;
     style?: React.CSSProperties;
@@ -80,6 +85,16 @@ export interface GridToolbarProps {
     className?: string;
     /** Show columns with `hideable: false` in the Columns panel as disabled rows. Default: false. */
     showNonHideableColumns?: boolean;
+    /**
+     * Opens or closes the `aiAssistant` panel. The grid passes it when `aiAssistant` is set; the
+     * **Ask AI** button is shown only with it. Receives the button, which gets focus back on close.
+     * @since v3.5
+     */
+    onAiAssistantToggle?: (trigger: HTMLElement | null) => void;
+    /** Whether the `aiAssistant` panel is open. @since v3.5 */
+    aiAssistantOpen?: boolean;
+    /** Label of the Ask AI button (`localeText.aiAssistantButton`). Default: `"Ask AI"`. @since v3.5 */
+    aiAssistantLabel?: string;
 }
 
 const BUILT_IN_AGGREGATION_FUNCTIONS = Object.keys(AGGREGATION_FUNCTIONS) as BuiltInAggFn[];
@@ -492,6 +507,8 @@ export function GridToolbar({
     onColumnOrderReset,
     forceColumnsOpen,
     onColumnsPanelClose,
+    forceFiltersOpen,
+    onFiltersPanelClose,
     children,
     rightContent,
     style,
@@ -502,6 +519,9 @@ export function GridToolbar({
     renderQuickFilter,
     className,
     showNonHideableColumns,
+    onAiAssistantToggle,
+    aiAssistantOpen = false,
+    aiAssistantLabel = 'Ask AI',
 }: GridToolbarProps) {
     // At most one panel is open. Every way the Columns panel closes (its button, a custom
     // button, another panel opening, click-outside, Escape) reports onColumnsPanelClose, so the
@@ -514,6 +534,7 @@ export function GridToolbar({
 
     const switchPanel = (next: ToolbarPanel | null) => {
         if (openPanel === 'columns' && next !== 'columns') onColumnsPanelClose?.();
+        if (openPanel === 'filters' && next !== 'filters') onFiltersPanelClose?.();
         setOpenPanel(next);
     };
     const togglePanel = (panel: ToolbarPanel) => switchPanel(openPanel === panel ? null : panel);
@@ -526,6 +547,12 @@ export function GridToolbar({
         setSeenForceColumnsOpen(forceColumnsOpen);
         if (forceColumnsOpen) setOpenPanel('columns');
     }
+    // forceFiltersOpen turning true opens the filter panel, the same way.
+    const [seenForceFiltersOpen, setSeenForceFiltersOpen] = useState(forceFiltersOpen);
+    if (seenForceFiltersOpen !== forceFiltersOpen) {
+        setSeenForceFiltersOpen(forceFiltersOpen);
+        if (forceFiltersOpen && onFilterModelChange) setOpenPanel('filters');
+    }
 
     // Tell the grid this toolbar shows the Columns panel for the column menu; it can only do so
     // when the grid's forceColumnsOpen reaches it and the Columns panel is enabled.
@@ -535,8 +562,14 @@ export function GridToolbar({
         if (!toolbarHost || !hostsColumnsPanel) return undefined;
         return toolbarHost.registerColumnsPanel();
     }, [toolbarHost, hostsColumnsPanel]);
+    const hostsFiltersPanel = forceFiltersOpen !== undefined && Boolean(onFilterModelChange);
+    useEffect(() => {
+        if (!toolbarHost || !hostsFiltersPanel) return undefined;
+        return toolbarHost.registerFiltersPanel();
+    }, [toolbarHost, hostsFiltersPanel]);
 
     const aggButtonRef = useRef<HTMLButtonElement>(null);
+    const aiButtonRef = useRef<HTMLButtonElement>(null);
     const pivotButtonRef = useRef<HTMLButtonElement>(null);
     const colsButtonRef = useRef<HTMLButtonElement>(null);
     const filterButtonRef = useRef<HTMLButtonElement>(null);
@@ -642,6 +675,24 @@ export function GridToolbar({
 
             {/* Right: built-in buttons */}
             <div className="ogx-toolbar__actions">
+                {onAiAssistantToggle && (
+                    <div className="ogx-toolbar__dropdown-wrapper" style={{ marginRight: 4 }}>
+                        <button
+                            type="button"
+                            ref={aiButtonRef}
+                            className={`ogx-toolbar__icon-btn ogx-toolbar__ai-btn${aiAssistantOpen ? ' ogx-toolbar__icon-btn--active' : ''}`}
+                            aria-haspopup="dialog"
+                            aria-expanded={aiAssistantOpen}
+                            onClick={() => {
+                                switchPanel(null);
+                                onAiAssistantToggle(aiButtonRef.current);
+                            }}
+                        >
+                            <AiSparkleIcon />
+                            {aiAssistantLabel}
+                        </button>
+                    </div>
+                )}
                 {onFilterModelChange && (
                     <div className="ogx-toolbar__dropdown-wrapper" style={{ marginRight: 4 }}>
                         {renderQuickFilter

package/lib/hooks/core/gridApiPlaceholder.ts

@@ -45,5 +45,13 @@ export function createGridApiPlaceholder<R extends GridValidRowModel = GridRowMo
         canUndo: () => false,
         canRedo: () => false,
         clearHistory: noop,
+        setSortModel: noop,
+        setRowGroupingModel: noop,
+        setAggregationModel: noop,
+        setColumnVisibilityModel: noop,
+        setPivotModel: noop,
+        getGridAiState: () => ({}),
+        openAiAssistant: noop,
+        closeAiAssistant: noop,
     };
 }

package/lib/hooks/core/gridToolbarHostContext.ts

@@ -9,6 +9,11 @@ import { createContext } from 'react';
 export interface GridToolbarHost {
     /** Registers a toolbar that can show the Columns panel. Returns the function that unregisters it. */
     registerColumnsPanel: () => () => void;
+    /**
+     * Registers a toolbar that can show the filter panel when the header filter row asks for it
+     * (through `forceFiltersOpen`). Returns the function that unregisters it.
+     */
+    registerFiltersPanel: () => () => void;
 }
 
 export const GridToolbarHostContext = createContext<GridToolbarHost | null>(null);

package/lib/hooks/core/useGridApiMethods.ts

@@ -1,9 +1,13 @@
 import { useLayoutEffect, useRef } from 'react';
 import type {
+    GridAggregationModel,
     GridApi,
     GridColDef,
+    GridColumnVisibilityModel,
     GridFilterModel,
     GridPaginationModel,
+    GridPivotModel,
+    GridRowGroupingModel,
     GridRowId,
     GridRowModel,
     GridSortItem,
@@ -45,6 +49,16 @@ export interface UseGridApiMethodsParams {
     getAllFilteredRows: () => GridRowModel[];
     /** Columns on screen, in display order. */
     visibleColumns: GridColDef[];
+
+    // v3.5: the remaining models, for the setters and getGridAiState.
+    rowGroupingModel: GridRowGroupingModel;
+    onRowGroupingModelChange: (model: GridRowGroupingModel) => void;
+    aggregationModel: GridAggregationModel;
+    onAggregationModelChange: (model: GridAggregationModel) => void;
+    columnVisibilityModel: GridColumnVisibilityModel;
+    onColumnVisibilityModelChange: (model: GridColumnVisibilityModel) => void;
+    pivotModel: GridPivotModel;
+    onPivotModelChange: (model: GridPivotModel) => void;
 }
 
 /**
@@ -111,5 +125,30 @@ export function useGridApiMethods(params: UseGridApiMethodsParams): void {
         api.getVisibleRows = () => latest().getVisibleRows();
         api.getAllFilteredRows = () => latest().getAllFilteredRows();
         api.getVisibleColumns = () => latest().visibleColumns;
+
+        api.setSortModel = (model) => {
+            latestRef.current = { ...latest(), sortModel: model };
+            latest().onSortModelChange(model);
+        };
+        api.setRowGroupingModel = (model) => {
+            latestRef.current = { ...latest(), rowGroupingModel: model };
+            latest().onRowGroupingModelChange(model);
+        };
+        api.setAggregationModel = (model) => {
+            latestRef.current = { ...latest(), aggregationModel: model };
+            latest().onAggregationModelChange(model);
+        };
+        api.setColumnVisibilityModel = (model) => {
+            latestRef.current = { ...latest(), columnVisibilityModel: model };
+            latest().onColumnVisibilityModelChange(model);
+        };
+        api.setPivotModel = (model) => {
+            latestRef.current = { ...latest(), pivotModel: model };
+            latest().onPivotModelChange(model);
+        };
+        api.getGridAiState = () => {
+            const { filterModel, sortModel, rowGroupingModel, aggregationModel, pivotModel, columnVisibilityModel } = latest();
+            return { filterModel, sortModel, rowGroupingModel, aggregationModel, pivotModel, columnVisibilityModel };
+        };
     }, [apiRef]);
 }

package/lib/hooks/core/useGridAriaRows.ts

@@ -5,6 +5,8 @@ import type { GridColumnGroupingModel, GridPaginationModel } from '../../types';
 
 export interface UseGridAriaRowsParams {
     columnGroupingModel: GridColumnGroupingModel | undefined;
+    /** Whether the header filter row (`headerFilters`) is rendered: one more header row. */
+    headerFilterRow?: boolean;
     pinnedTopCount: number;
     pinnedBottomCount: number;
     pagination: boolean;
@@ -19,13 +21,13 @@ export interface UseGridAriaRowsParams {
 /** `aria-rowcount` and the `aria-rowindex` bases of the pinned and centre rows. */
 export function useGridAriaRows(params: UseGridAriaRowsParams): GridAriaRowLayout {
     const {
-        columnGroupingModel, pinnedTopCount, pinnedBottomCount, pagination, paginationMode, paginationModel,
+        columnGroupingModel, headerFilterRow = false, pinnedTopCount, pinnedBottomCount, pagination, paginationMode, paginationModel,
         paginationRowCount, paginatedUnpinnedRowCount, sortedUnpinnedRowCount,
     } = params;
     const { page, pageSize } = paginationModel;
 
     return useMemo(() => getAriaRowLayout({
-        headerRowCount: 1 + getColumnGroupDepth(columnGroupingModel),
+        headerRowCount: 1 + getColumnGroupDepth(columnGroupingModel) + (headerFilterRow ? 1 : 0),
         pinnedTopCount,
         pinnedBottomCount,
         pageRowCount: pagination ? paginatedUnpinnedRowCount : sortedUnpinnedRowCount,
@@ -33,6 +35,6 @@ export function useGridAriaRows(params: UseGridAriaRowsParams): GridAriaRowLayou
             ? Math.max(paginationRowCount, paginatedUnpinnedRowCount)
             : sortedUnpinnedRowCount,
         pageOffset: pagination ? page * pageSize : 0,
-    }), [columnGroupingModel, pinnedTopCount, pinnedBottomCount, pagination, paginatedUnpinnedRowCount,
+    }), [columnGroupingModel, headerFilterRow, pinnedTopCount, pinnedBottomCount, pagination, paginatedUnpinnedRowCount,
         sortedUnpinnedRowCount, paginationMode, paginationRowCount, page, pageSize]);
 }