@opencorestack/opengridx 3.3.0 → 3.5.0

package/lib/components/DataGrid/GridPinnedRows.tsx

@@ -17,6 +17,7 @@ import type {
 import type { CellColSpanInfo, RowSpanningCaches } from '../../hooks/features/useGridSpanning';
 import type { GridDisplayCellRange } from '../../hooks/core/useGridCellSelection';
 import { getRowCellRange } from '../../utils/cellSelection';
+import type { GridFillHandlePosition } from '../../utils/cellSelection';
 import type { GridEditingState } from '../../hooks/features/useGridEditing';
 
 interface PinnedRowEditingHandlers {
@@ -64,6 +65,8 @@ export interface GridPinnedRowsProps<R extends GridRowModel> {
     cellRange?: GridDisplayCellRange | null;
     /** The grid has row spans: rows tell their cells how far the range bottom is. */
     cellRangeHasRowSpan?: boolean;
+    /** Where the fill handle is drawn (v3.5), or null. */
+    fillHandle?: GridFillHandlePosition | null;
     /** Pinned rows are edited like any other row. */
     editingHandlers?: PinnedRowEditingHandlers;
     isCellEditable?: (params: GridCellParams<R>) => boolean;
@@ -111,6 +114,7 @@ export function GridPinnedRows<R extends GridRowModel>({
     rowReordering = false,
     cellRange,
     cellRangeHasRowSpan = false,
+    fillHandle,
 }: GridPinnedRowsProps<R>) {
     if (rows.length === 0) return null;
 
@@ -156,7 +160,7 @@ export function GridPinnedRows<R extends GridRowModel>({
                     onEditCellValueChange={editingHandlers?.setEditCellValue}
                     isCellEditable={isCellEditable}
                     rowReordering={rowReordering}
-                    cellRange={getRowCellRange(cellRange, rowIndex, cellRangeHasRowSpan)}
+                    cellRange={getRowCellRange(cellRange, rowIndex, cellRangeHasRowSpan, fillHandle)}
                 />
                 );
             })}

package/lib/components/DataGrid/GridVirtualRows.tsx

@@ -20,6 +20,7 @@ import type { GridEditingState } from '../../hooks/features/useGridEditing';
 import type { CellColSpanInfo, RowSpanningCaches } from '../../hooks/features/useGridSpanning';
 import type { GridDisplayCellRange } from '../../hooks/core/useGridCellSelection';
 import { getRowCellRange } from '../../utils/cellSelection';
+import type { GridFillHandlePosition } from '../../utils/cellSelection';
 
 interface RowEditingHandlers {
     editingCell: GridEditingState['editingCell'];
@@ -77,6 +78,8 @@ export interface GridVirtualRowsProps<R extends GridRowModel> {
     cellRange?: GridDisplayCellRange | null;
     /** The grid has row spans: rows tell their cells how far the range bottom is. */
     cellRangeHasRowSpan?: boolean;
+    /** Where the fill handle is drawn (v3.5), or null. */
+    fillHandle?: GridFillHandlePosition | null;
 }
 
 export function GridVirtualRows<R extends GridRowModel>({
@@ -123,6 +126,7 @@ export function GridVirtualRows<R extends GridRowModel>({
     columnIndexMap,
     cellRange,
     cellRangeHasRowSpan = false,
+    fillHandle,
 }: GridVirtualRowsProps<R>) {
     const skeletonColumns: GridColDef<R>[] = baseColumns.length > 0
         ? baseColumns
@@ -214,7 +218,7 @@ export function GridVirtualRows<R extends GridRowModel>({
                             rowSpanningCaches={rowSpanningCaches}
                             rowHeight={rowHeight}
                             rowMeta={rowMetaMap.get(id)}
-                            cellRange={getRowCellRange(cellRange, actualIndex, cellRangeHasRowSpan)}
+                            cellRange={getRowCellRange(cellRange, actualIndex, cellRangeHasRowSpan, fillHandle)}
                         />
                     ))
                 )}

package/lib/components/FilterPanel/FilterPanel.css

@@ -115,11 +115,25 @@
   border-radius: var(--ogx-border-radius-sm);
   font-family: var(--ogx-font-family);
   font-size: var(--ogx-font-size-xs);
+  line-height: revert;
   background: var(--ogx-grid-background);
   color: var(--ogx-grid-row-text);
   outline: none;
   transition: border-color 0.15s, box-shadow 0.15s;
 }
+/* The text/date value box renders through the shared Input: the <input> keeps its own border,
+   so the wrapper draws nothing and only takes the input's place in the row. */
+.ogx-filter__controls .ogx-input-wrapper {
+  flex: 1;
+  min-width: 60px;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  transition: none;
+}
+.ogx-filter__controls .ogx-input-wrapper:focus-within {
+  box-shadow: none;
+}
 .ogx-filter__value-input::placeholder {
   color: var(--ogx-overlay-text, var(--ogx-color-gray-400));
   opacity: 0.6;

package/lib/components/FilterPanel/FilterPanel.tsx

@@ -6,8 +6,8 @@ import type {
     GridColDef,
     GridFilterOperator
 } from '../../types';
-import { getOperatorsForType, NO_VALUE_OPERATORS } from '../../utils/filtering';
-import { toLocalDateString } from '../../utils/values';
+import { filterValueToInputText, getOperatorsForType, NO_VALUE_OPERATORS } from '../../utils/filtering';
+import { Input } from '../ui/Input';
 
 
 export interface FilterPanelProps {
@@ -73,13 +73,7 @@ function matchesOption(option: ValueOption, value: unknown): boolean {
 
 /** Text shown in the value input for a committed value. Never used to emit anything. */
 function toInputText(value: unknown, col: GridColDef): string {
-    if (value == null) return '';
-    if (col.type === 'date' || value instanceof Date) {
-        const day = toLocalDateString(value);
-        return day || (typeof value === 'string' ? value : '');
-    }
-    if (Array.isArray(value)) return value.map(v => String(v)).join(', ');
-    return String(value);
+    return filterValueToInputText(value, col.type);
 }
 
 /** The item value for typed text. isAnyOf takes a comma-separated list. */
@@ -251,10 +245,10 @@ const FilterRow: React.FC<{
         );
     } else if (showValue) {
         valueControl = (
-            <input
+            <Input
                 id={`${filterId}-val`}
                 name={`filter-val-${col.field}`}
-                className={valueClassName}
+                inputClassName={valueClassName}
                 type={col.type === 'date' ? 'date' : 'text'}
                 value={draft ?? toInputText(item?.value, col)}
                 onChange={(e) => setDraft(e.target.value)}

package/lib/components/Header/Header.tsx

@@ -2,12 +2,14 @@ import React, { useId } from 'react';
 import { Checkbox } from '../ui/Checkbox';
 import { ColumnResizeHandle } from '../ColumnResizeHandle/ColumnResizeHandle';
 import { clampResizeWidth } from '../ColumnResizeHandle/clampResizeWidth';
-import type { GridColDef, GridRowModel, GridSortDirection, GridColumnPinning, GridAggregationModel, GridColumnGroupingModel } from '../../types';
+import type { GridColDef, GridRowModel, GridSortDirection, GridColumnPinning, GridAggregationModel, GridColumnGroupingModel, GridFilterModel } from '../../types';
 import { isColumnPinned, calculatePinnedPositions, getPinnedEdgeFields } from '../../utils/pinning';
 import { getRenderedColumnWidth } from '../../utils/columnWidth';
 import { buildColumnGroupRow, getColumnGroupDepth, getColumnGroupPaths } from '../../utils/columnGroups';
 import { ColumnMenu } from './ColumnMenu';
 import { getHeaderLineClamp, shouldWrapHeaderText } from '../../utils/headerWrap';
+import { getHeaderColumnStyle } from './headerColumnStyle';
+import { HeaderFilterRow } from '../HeaderFilter/HeaderFilterRow';
 
 
 function MenuIcon() {
@@ -60,8 +62,11 @@ export interface HeaderProps<R extends GridRowModel = GridRowModel> {
     onDragOver?: (field: string) => (event: React.DragEvent) => void;
     onDragEnd?: () => void;
     onDrop?: (targetField: string) => (event: React.DragEvent) => void;
-    /** The grid's focus position; `id: null` means a header cell is focused. */
-    focusedCell?: { id: string | number | null; field: string } | null;
+    /**
+     * The grid's focus position; `id: null` means a header cell is focused, and `headerFilter: true`
+     * a cell of the header filter row.
+     */
+    focusedCell?: { id: string | number | null; field: string; headerFilter?: boolean } | null;
     onHeaderClick?: (field: string) => void;
     onSortAdd?: (field: string, direction: GridSortDirection) => void;
     multiSort?: boolean;
@@ -74,6 +79,14 @@ export interface HeaderProps<R extends GridRowModel = GridRowModel> {
     wrapHeaderText?: boolean;
     /** Header row height in pixels; sets how many lines a wrapped title may take. Defaults to 56. */
     headerHeight?: number;
+    /** Renders the header filter row under the column headers (`DataGridProps.headerFilters`). */
+    headerFilters?: boolean;
+    /** The filter model the header filter row reads. */
+    filterModel?: GridFilterModel;
+    /** Receives the filter model after a header filter changes. */
+    onFilterModelChange?: (model: GridFilterModel) => void;
+    /** Opens the filter panel; a header filter cell showing "Custom filter" calls it. */
+    onOpenFilterPanel?: () => void;
 }
 
 export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps<R>) {
@@ -112,6 +125,10 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
         columnIndexMap,
         wrapHeaderText = false,
         headerHeight = 56,
+        headerFilters = false,
+        filterModel,
+        onFilterModelChange,
+        onOpenFilterPanel,
     } = props;
 
     const selectAllId = useId();
@@ -148,7 +165,7 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
         setMenuOpenParams({ colDef, anchorEl: anchor });
     };
 
-    const isHeaderFocused = (field: string) => focusedCell?.id === null && focusedCell.field === field;
+    const isHeaderFocused = (field: string) => focusedCell?.id === null && !focusedCell.headerFilter && focusedCell.field === field;
 
     // aria-colindex: system columns first (reorder, expand, checkbox), then the data columns.
     const reorderColIndex = rowReordering ? 1 : 0;
@@ -437,30 +454,12 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
                         colDef.headerClassName
                     ].filter(Boolean).join(' ');
 
-                    const effectiveWidth = columnWidths[colDef.field] ?? colDef.width ?? 100;
-
                     const style: React.CSSProperties = {
-                        width: effectiveWidth,
-                        minWidth: colDef.minWidth,
-                        maxWidth: colDef.maxWidth,
-                        flexGrow: colDef.flex ?? 0,
-                        flexShrink: 0,
-                        flexBasis: colDef.flex ? 'auto' : 'auto',
-                        boxSizing: 'border-box',
-                        position: isPinned ? 'sticky' : 'relative',
+                        ...getHeaderColumnStyle(colDef, columnWidths, pinnedPosition, pinnedPosition ? pinnedPositions[colDef.field] : undefined),
                         zIndex: colDef.zIndex,
                         opacity: isDragging ? 0.5 : 1
                     };
 
-                    if (isPinned && pinnedPosition) {
-                        const offset = pinnedPositions[colDef.field];
-                        if (pinnedPosition === 'left') {
-                            style.left = offset;
-                        } else {
-                            style.right = offset;
-                        }
-                    }
-
                     const headerContent = colDef.renderHeader
                         ? colDef.renderHeader({ field: colDef.field, colDef: colDef as unknown as GridColDef, colIndex })
                         : colDef.headerName || colDef.field;
@@ -565,6 +564,28 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
                     />
                 )}
             </div>{/* end .ogx__header */}
+
+            {/* ── Header filter row ── */}
+            {headerFilters && (
+                <HeaderFilterRow
+                    columns={columns as unknown as GridColDef[]}
+                    columnWidths={columnWidths}
+                    pinnedColumns={pinnedColumns}
+                    pinnedPositions={pinnedPositions}
+                    pinnedEdges={pinnedEdges}
+                    rowReordering={rowReordering}
+                    hasDetailPanel={hasDetailPanel}
+                    checkboxSelection={checkboxSelection}
+                    pinExpandColumn={pinExpandColumn}
+                    pinCheckboxColumn={pinCheckboxColumn}
+                    columnIndexMap={columnIndexMap}
+                    ariaRowIndex={groupDepth + 2}
+                    filterModel={filterModel}
+                    onFilterModelChange={onFilterModelChange}
+                    onOpenFilterPanel={onOpenFilterPanel}
+                    focusedField={focusedCell?.id === null && focusedCell.headerFilter ? focusedCell.field : null}
+                />
+            )}
         </div>
     );
 }

package/lib/components/Header/headerColumnStyle.ts

@@ -0,0 +1,28 @@
+import type React from 'react';
+import type { GridColDef, GridRowModel } from '../../types';
+
+/**
+ * Width, flex and sticky offset of a data column's cell in a header row. The column header row
+ * and the header filter row both use it, so their cells line up whatever the pinning and widths.
+ */
+export function getHeaderColumnStyle<R extends GridRowModel>(
+    colDef: GridColDef<R>,
+    columnWidths: Record<string, number>,
+    pinnedPosition: 'left' | 'right' | null,
+    pinnedOffset: number | undefined,
+): React.CSSProperties {
+    const style: React.CSSProperties = {
+        width: columnWidths[colDef.field] ?? colDef.width ?? 100,
+        minWidth: colDef.minWidth,
+        maxWidth: colDef.maxWidth,
+        flexGrow: colDef.flex ?? 0,
+        flexShrink: 0,
+        flexBasis: 'auto',
+        boxSizing: 'border-box',
+        position: pinnedPosition ? 'sticky' : 'relative',
+    };
+    if (pinnedPosition === 'left') style.left = pinnedOffset;
+    else if (pinnedPosition === 'right') style.right = pinnedOffset;
+    return style;
+}
+

package/lib/components/HeaderFilter/HeaderFilter.css

@@ -0,0 +1,160 @@
+/* Header filter row (headerFilters): inside .ogx__header-wrap, under the column header row, so it
+   sticks with the headers. Its height (--ogx-header-filter-height) is set by the grid from
+   headerFilterHeight. */
+.ogx__header-filter-row {
+  display: flex;
+  align-items: stretch;
+  height: var(--ogx-header-filter-height, 40px);
+  min-height: var(--ogx-header-filter-height, 40px);
+  background: var(--ogx-grid-header-background);
+  border-bottom: 1px solid var(--ogx-grid-border-color);
+}
+.ogx__header-filter-cell {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px 6px;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  overflow: hidden;
+  position: relative;
+  background: var(--ogx-grid-header-background);
+  font-family: var(--ogx-font-family);
+  font-size: var(--ogx-font-size-sm, 0.8125rem);
+  color: var(--ogx-grid-header-text);
+}
+.ogx__header-filter-cell:focus,
+.ogx__header-filter-cell:focus-visible {
+  outline: none;
+}
+.ogx--kb .ogx__header-filter-cell--focused {
+  outline: 2px solid var(--ogx-grid-cell-focus-border, var(--ogx-color-primary, #2563eb));
+  outline-offset: -2px;
+  z-index: 6;
+}
+.ogx__header-filter-cell--pinned {
+  z-index: 12;
+}
+.ogx__header-filter-cell--pinned-left-last {
+  box-shadow: var(--ogx-grid-pinned-left-shadow, 4px 0 12px -4px rgba(0, 0, 0, 0.05));
+}
+.ogx__header-filter-cell--pinned-right-first {
+  margin-left: auto;
+  box-shadow: var(--ogx-grid-pinned-right-shadow, -4px 0 12px -4px rgba(0, 0, 0, 0.05));
+}
+
+/* Operator button: a compact symbol for the current operator; opens the operator menu. */
+.ogx__header-filter-operator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  min-width: 22px;
+  height: 24px;
+  padding: 0 3px;
+  border: none;
+  border-radius: var(--ogx-border-radius-sm, 4px);
+  background: transparent;
+  color: var(--ogx-color-gray-500);
+  font: inherit;
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+}
+.ogx__header-filter-operator:hover,
+.ogx__header-filter-operator--open {
+  background: var(--ogx-grid-header-hover-background);
+  color: var(--ogx-grid-header-text);
+}
+.ogx__header-filter-cell--active .ogx__header-filter-operator {
+  color: var(--ogx-color-primary);
+}
+
+/* Value controls: the shared Input, and native selects styled to match it. */
+.ogx__header-filter-input-wrapper {
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 28px;
+}
+.ogx-input.ogx__header-filter-input {
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 0 6px;
+  font-size: inherit;
+}
+.ogx__header-filter-select {
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 28px;
+  padding: 0 4px;
+  box-sizing: border-box;
+  border: var(--ogx-border-width-thin, 1px) solid var(--ogx-border-color);
+  border-radius: var(--ogx-border-radius-md);
+  background: var(--ogx-color-white);
+  color: var(--ogx-color-gray-900);
+  font-family: var(--ogx-font-family);
+  font-size: inherit;
+  outline: none;
+  cursor: pointer;
+}
+.ogx__header-filter-select:hover {
+  border-color: var(--ogx-border-color-hover);
+}
+.ogx__header-filter-select:focus {
+  border-color: var(--ogx-color-primary);
+  box-shadow: 0 0 0 1px var(--ogx-color-primary);
+}
+.ogx__header-filter-cell--active .ogx-input-wrapper,
+.ogx__header-filter-cell--active .ogx__header-filter-select {
+  border-color: var(--ogx-color-primary);
+}
+.ogx__header-filter-operator-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--ogx-color-gray-600);
+  font-style: italic;
+}
+
+.ogx__header-filter-clear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: none;
+  border-radius: var(--ogx-border-radius-sm, 4px);
+  background: transparent;
+  color: var(--ogx-color-gray-500);
+  cursor: pointer;
+}
+.ogx__header-filter-clear:hover {
+  background: var(--ogx-grid-header-hover-background);
+  color: var(--ogx-grid-header-text);
+}
+
+/* Read-only label for a filter the row cannot show (OR logic, nested groups, other conditions). */
+.ogx__header-filter-custom {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 0 4px;
+  border: none;
+  background: transparent;
+  color: var(--ogx-color-primary);
+  font: inherit;
+  font-style: italic;
+  text-align: left;
+}
+button.ogx__header-filter-custom {
+  cursor: pointer;
+  text-decoration: underline dotted;
+}