@opencorestack/opengridx 3.6.0 → 3.7.0

package/lib/components/DataGrid/GridRoot.tsx

@@ -0,0 +1,239 @@
+import React from 'react';
+import { GridToolbarHostContext } from '../../hooks/core/gridToolbarHostContext';
+import { GridToolbarSlot } from './GridToolbarSlot';
+import { GridAiAssistantArea } from '../AiAssistant/GridAiAssistantArea';
+import { GridStandaloneColumnPanel, type GridStandaloneColumnPanelProps } from './GridStandaloneColumnPanel';
+import { GridListView, type GridListViewProps } from './GridListView';
+import { GridViewport, type GridViewportProps } from './GridViewport';
+import { GridCellSelectionStatsArea } from '../CellSelectionStats/GridCellSelectionStatsArea';
+import { GridPaginationArea } from './GridPaginationArea';
+import { GridLiveRegion } from './GridLiveRegion';
+import { GridLoadingOverlay } from './GridLoadingOverlay';
+import { GridErrorOverlay } from './GridErrorOverlay';
+import { pickPaginationLocaleText } from '../../utils/pagination';
+import type { DataGridProps, GridApi, GridColDef, GridRowModel } from '../../types';
+import type { UseGridAiAssistantResult } from '../../hooks/features/useGridAiAssistant';
+import type { useGridToolbarProps } from '../../hooks/core/useGridToolbarProps';
+
+/**
+ * Named after the `DataGrid` values they carry. The viewport's props are passed through to
+ * `GridViewport`; the list view, footer and panels read some of them too.
+ */
+export interface GridRootProps<R extends GridRowModel> extends Omit<GridViewportProps<R>, 'loadingOverlay' | 'noRowsOverlay'> {
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    className: string;
+    autoHeight: boolean;
+    height: DataGridProps<R>['height'];
+    style: DataGridProps<R>['style'];
+    hasRowSpanning: boolean;
+    listView: boolean;
+    headerFilterHeight: number;
+    slots: DataGridProps<R>['slots'];
+    slotProps: DataGridProps<R>['slotProps'];
+    toolbarProps: ReturnType<typeof useGridToolbarProps>;
+    aiAssistantPanel: UseGridAiAssistantResult;
+    // Standalone columns panel
+    orderedColumns: GridColDef<R>[];
+    columnVisibilityModel: GridStandaloneColumnPanelProps<R>['columnVisibilityModel'];
+    disableColumnReorder: boolean;
+    handleColumnVisibilityModelChange: GridStandaloneColumnPanelProps<R>['onColumnVisibilityChange'];
+    moveColumn: GridStandaloneColumnPanelProps<R>['onColumnMove'];
+    resetColumnOrder: GridStandaloneColumnPanelProps<R>['onColumnOrderReset'];
+    // List view
+    listViewColumn: DataGridProps<R>['listViewColumn'];
+    allRenderableRows: R[];
+    dataRows: R[];
+    pagination: boolean;
+    effectivePaginationModel: GridListViewProps<R>['effectivePaginationModel'];
+    currentPage: number;
+    pageSizeOptions: number[];
+    columnsByField: GridListViewProps<R>['columnsByField'];
+    paginationRowCount: number;
+    handlePaginationModelChange: GridListViewProps<R>['onPaginationModelChange'];
+    onRowsScrollEnd: GridListViewProps<R>['onRowsScrollEnd'];
+    toggleExpansion: GridListViewProps<R>['onToggleExpansion'];
+    // Footer and status
+    showCellSelectionStats: boolean;
+    apiRef: React.MutableRefObject<GridApi>;
+    hasAggregation: boolean;
+    isHierarchyEnabled: boolean;
+    dataSourceError: unknown;
+    filteredRowCount: number;
+    /** Retries a failed dataSource load; undefined without a dataSource. */
+    onRetry: (() => void) | undefined;
+}
+
+/**
+ * The grid's root element and everything in it: the toolbar, the AI assistant panel, the standalone
+ * columns panel, the list view or the viewport, the cell selection stats, the footer slot or the pager,
+ * the live region and the loading and error overlays.
+ */
+export function GridRoot<R extends GridRowModel>(props: GridRootProps<R>) {
+    const {
+        containerRef, className, autoHeight, height, style, hasRowSpanning, listView, headerFilterHeight, slots, slotProps,
+        toolbarProps, aiAssistantPanel, orderedColumns, columnVisibilityModel, disableColumnReorder,
+        handleColumnVisibilityModelChange, moveColumn, resetColumnOrder, listViewColumn, allRenderableRows, dataRows,
+        pagination, effectivePaginationModel, currentPage, pageSizeOptions, columnsByField,
+        paginationRowCount, handlePaginationModelChange,
+        onRowsScrollEnd, toggleExpansion, showCellSelectionStats, apiRef, hasAggregation, isHierarchyEnabled,
+        dataSourceError, filteredRowCount, onRetry,
+        ...viewport
+    } = props;
+    const {
+        effectiveRowHeight, headerHeight, showHeaderFilters, effectiveLoading, columnsPanel, columnGroupingModel, ariaLabel,
+        pinnedTopRows, pinnedBottomRows, sortedUnpinnedRowCount, effectiveNoRowsLabel, checkboxSelection, paginationMode,
+        localeText, getRowIdOf, rowSelectionEnabled, disableMultipleRowSelection, cellSelection, aggregationModel,
+        aggregationResult, filterModel, selectedRowIds, rowMetaMap, handleRowClick, onRowDoubleClick, handleSelectionChange,
+    } = viewport;
+
+    const NoRowsOverlaySlot = slots?.noRowsOverlay;
+    const LoadingOverlaySlot = slots?.loadingOverlay;
+    const loadingOverlay = LoadingOverlaySlot ? <LoadingOverlaySlot {...slotProps?.loadingOverlay} /> : undefined;
+    const noRowsOverlay = NoRowsOverlaySlot ? <NoRowsOverlaySlot {...slotProps?.noRowsOverlay} /> : undefined;
+    const FooterSlot = slots?.footer;
+    // Loading with rows on screen: the rows stay and an indicator runs over them. With no rows the
+    // body shows skeletons or the loading overlay instead, and infinite scroll appends skeleton rows.
+    const showLoadingOverRows = effectiveLoading && allRenderableRows.length > 0 && paginationMode !== 'infinite';
+    const ToolbarSlot = slots?.toolbar;
+
+    return (
+        <div
+            ref={containerRef}
+            className={['ogx', className, autoHeight && 'ogx--auto-height', !autoHeight && height === undefined && style?.height === undefined && 'ogx--fill', hasRowSpanning && 'ogx--row-spanning', listView && 'ogx--list-view'].filter(Boolean).join(' ')}
+            style={{
+                ...style,
+                height: height ?? style?.height,
+                '--ogx-row-height': `${effectiveRowHeight}px`,
+                '--ogx-header-height': `${headerHeight}px`,
+                ...(showHeaderFilters ? { '--ogx-header-filter-height': `${headerFilterHeight}px` } : undefined),
+            } as unknown as React.CSSProperties}
+            aria-busy={effectiveLoading}
+        >
+            {ToolbarSlot && toolbarProps && (
+                <GridToolbarHostContext.Provider value={columnsPanel.toolbarHost}>
+                    <GridToolbarSlot component={ToolbarSlot} toolbarProps={toolbarProps} />
+                </GridToolbarHostContext.Provider>
+            )}
+
+            {aiAssistantPanel.panelProps && (
+                <GridAiAssistantArea
+                    panelProps={aiAssistantPanel.panelProps}
+                    slot={slots?.aiAssistantPanel}
+                    slotProps={slotProps?.aiAssistantPanel}
+                />
+            )}
+
+            {/* Used by the column menu's Manage columns when no GridToolbar can show the panel */}
+            <GridStandaloneColumnPanel<R>
+                isOpen={columnsPanel.standalonePanelOpen}
+                containerRef={containerRef}
+                panelRef={columnsPanel.standalonePanelRef}
+                columns={orderedColumns}
+                columnVisibilityModel={columnVisibilityModel}
+                disableColumnReorder={disableColumnReorder}
+                onClose={columnsPanel.closeStandalonePanel}
+                onColumnVisibilityChange={handleColumnVisibilityModelChange}
+                onColumnMove={moveColumn}
+                onColumnOrderReset={resetColumnOrder}
+                columnGroupingModel={columnGroupingModel}
+            />
+
+
+            {listView && listViewColumn && (
+                <GridListView<R>
+                    ariaLabel={ariaLabel}
+                    allRenderableRows={allRenderableRows}
+                    dataRowCount={dataRows.length}
+                    pinnedTopRowCount={pinnedTopRows.length}
+                    pinnedBottomRowCount={pinnedBottomRows.length}
+                    unpinnedRowCount={sortedUnpinnedRowCount}
+                    pagination={pagination}
+                    effectivePaginationModel={effectivePaginationModel}
+                    currentPage={currentPage}
+                    pageSizeOptions={pageSizeOptions}
+                    selectedRowIds={selectedRowIds}
+                    listViewColumn={listViewColumn}
+                    columnsByField={columnsByField}
+                    rowMetaMap={rowMetaMap}
+                    noRowsLabel={effectiveNoRowsLabel}
+                    rowHeight={effectiveRowHeight}
+                    checkboxSelection={checkboxSelection}
+                    paginationMode={paginationMode}
+                    serverRowCount={paginationRowCount}
+                    paginationSlot={slots?.pagination}
+                    paginationSlotProps={slotProps?.pagination}
+                    localeText={pickPaginationLocaleText(localeText)}
+                    onRowClick={handleRowClick}
+                    onRowDoubleClick={onRowDoubleClick}
+                    onSelectionChange={handleSelectionChange}
+                    onPaginationModelChange={handlePaginationModelChange}
+                    onRowsScrollEnd={onRowsScrollEnd}
+                    getRowId={getRowIdOf}
+                    multiselectable={rowSelectionEnabled && !disableMultipleRowSelection}
+                    selectable={rowSelectionEnabled}
+                    onToggleExpansion={toggleExpansion}
+                    loading={effectiveLoading}
+                    loadingOverlay={loadingOverlay}
+                    noRowsOverlay={noRowsOverlay}
+                    showPaginationControls={!FooterSlot}
+                />
+            )}
+
+            {/* Standard grid viewport (hidden when listView=true) */}
+            {!listView && <GridViewport<R> {...viewport} loadingOverlay={loadingOverlay} noRowsOverlay={noRowsOverlay} />}
+
+            {cellSelection.enabled && showCellSelectionStats && (
+                <GridCellSelectionStatsArea
+                    stats={cellSelection.stats}
+                    apiRef={apiRef}
+                    slot={slots?.cellSelectionStats}
+                    slotProps={slotProps?.cellSelectionStats}
+                />
+            )}
+
+            {FooterSlot && (
+                <FooterSlot
+                    apiRef={apiRef}
+                    aggregationModel={aggregationModel}
+                    aggregationResult={hasAggregation ? aggregationResult : null}
+                    rowCount={isHierarchyEnabled && paginationMode !== 'server' ? dataRows.length : paginationRowCount}
+                    pagination={pagination}
+                    paginationModel={effectivePaginationModel}
+                    pageSizeOptions={pageSizeOptions}
+                    onPaginationModelChange={handlePaginationModelChange}
+                    {...slotProps?.footer}
+                />
+            )}
+
+            {!listView && !FooterSlot && pagination && (
+                <GridPaginationArea
+                    paginationSlot={slots?.pagination}
+                    paginationSlotProps={slotProps?.pagination}
+                    page={currentPage}
+                    paginationModel={effectivePaginationModel}
+                    rowCount={paginationRowCount}
+                    pageSizeOptions={pageSizeOptions}
+                    onPaginationModelChange={handlePaginationModelChange}
+                    localeText={localeText}
+                />
+            )}
+
+            <GridLiveRegion
+                loading={effectiveLoading}
+                error={dataSourceError}
+                noRowsLabel={effectiveNoRowsLabel}
+                filteredRowCount={filteredRowCount}
+                dataRowCount={dataRows.length}
+                filterModel={filterModel}
+                cellSelectionAnnouncement={cellSelection.announcement}
+                aiAssistantAnnouncement={aiAssistantPanel.announcement}
+            />
+
+            {showLoadingOverRows && (
+                <GridLoadingOverlay overlay={loadingOverlay} />
+            )}
+
+            <GridErrorOverlay error={dataSourceError} onRetry={onRetry} />
+        </div>
+    );
+}

package/lib/components/DataGrid/GridViewport.tsx

@@ -0,0 +1,314 @@
+import React from 'react';
+import { Header, type HeaderProps } from '../Header/Header';
+import { GridPinnedRows, type GridPinnedRowsProps } from './GridPinnedRows';
+import { GridVirtualRows, type GridVirtualRowsProps } from './GridVirtualRows';
+import { GridEmptyState } from './GridEmptyState';
+import { GridAggregationFooter } from './GridAggregationFooter';
+import type { GridAggregationModel, GridAggregationResult, GridColDef, GridColumnPinning, GridRowId, GridRowModel } from '../../types';
+import type { GridAriaRowLayout } from '../../utils/aria';
+import type { UseGridCellSelectionReturn } from '../../hooks/core/useGridCellSelection';
+import type { UseGridKeyboardNavigationReturn } from '../../hooks/core/useGridKeyboardNavigation';
+import type { UseGridRowSelectionReturn } from '../../hooks/core/useGridRowSelection';
+import type { UseGridColumnsPanelResult } from '../../hooks/core/useGridColumnsPanel';
+import type { UseGridViewportResult } from '../../hooks/core/useGridViewport';
+import type { GridVirtualizationResult } from '../../hooks/core/useGridVirtualization';
+import type { UseColumnReorderReturn } from '../../hooks/useColumnReorder';
+import type { GridSpanningResult } from '../../hooks/features/useGridSpanning';
+
+/** The props the row renderers (top-pinned, centre and bottom-pinned rows) all take. */
+export type GridRowRenderProps<R extends GridRowModel> = Pick<GridVirtualRowsProps<R>,
+    'rowReordering' | 'columnIndexMap' | 'editingHandlers' | 'isCellEditable' | 'selectedRowIds' | 'checkboxSelection' |
+    'onRowClick' | 'onRowDoubleClick' | 'onCellClick' | 'onSelectionChange' | 'columnWidths' | 'pinnedColumns' |
+    'hasDetailPanel' | 'expandedRowIds' | 'getDetailPanelContent' | 'getDetailPanelHeight' | 'onDetailPanelToggle' |
+    'onDetailPanelHeightChange' | 'pinCheckboxColumn' | 'pinExpandColumn' | 'focusedCell' | 'colspanMap' |
+    'rowSpanningCaches' | 'rowHeight' | 'rowMetaMap' | 'cellRange' | 'cellRangeHasRowSpan' | 'fillHandle'>;
+
+/** Named after the `DataGrid` values they carry. */
+export interface GridViewportProps<R extends GridRowModel> {
+    // The viewport element
+    setViewportElement: UseGridViewportResult['setViewportElement'];
+    handleScroll: UseGridViewportResult['handleScroll'];
+    ariaLabel: string | undefined;
+    ariaRows: GridAriaRowLayout;
+    navigationColumnCount: number;
+    rowSelectionEnabled: boolean;
+    disableMultipleRowSelection: boolean;
+    cellSelection: UseGridCellSelectionReturn;
+    effectiveLoading: boolean;
+    viewportTabIndex: number;
+    setKeyboardMode: (on: boolean) => void;
+    handleMouseDownCapture: UseGridKeyboardNavigationReturn['handleMouseDownCapture'];
+    handleKeyDown: UseGridKeyboardNavigationReturn['handleKeyDown'];
+    handleFocus: UseGridKeyboardNavigationReturn['handleFocus'];
+    handleBlur: UseGridKeyboardNavigationReturn['handleBlur'];
+    effectivePinnedColumns: GridColumnPinning;
+    virtualization: GridVirtualizationResult<R>;
+    // Header
+    renderColumns: GridColDef<R>[];
+    renderedDataColumns: GridColDef<R>[];
+    columnGroupingModel: HeaderProps<R>['columnGroupingModel'];
+    checkboxSelection: boolean;
+    rowSelection: UseGridRowSelectionReturn;
+    sortModel: HeaderProps<R>['sortModel'];
+    handleSort: HeaderProps<R>['onSort'];
+    handleSortAdd: HeaderProps<R>['onSortAdd'];
+    multiSort: boolean;
+    handleColumnResize: HeaderProps<R>['onColumnResize'];
+    handleColumnAutosize: HeaderProps<R>['onColumnAutosize'];
+    columnWidths: Record<string, number>;
+    focusedCell: UseGridKeyboardNavigationReturn['focusedCell'];
+    columnIndexMap: Map<string, number>;
+    handleHeaderClick: HeaderProps<R>['onHeaderClick'];
+    headerReorderHandlers: UseColumnReorderReturn;
+    rowReordering: boolean;
+    hasDetailPanel: boolean;
+    pinCheckboxColumn: boolean;
+    pinExpandColumn: boolean;
+    aggregationModel: GridAggregationModel;
+    handleHideColumn: HeaderProps<R>['onHideColumn'];
+    columnsPanel: UseGridColumnsPanelResult;
+    handlePinColumn: HeaderProps<R>['onPinColumn'];
+    wrapHeaderText: boolean;
+    headerHeight: number;
+    showHeaderFilters: boolean;
+    filterModel: HeaderProps<R>['filterModel'];
+    handleFilterModelChange: HeaderProps<R>['onFilterModelChange'];
+    localeText: HeaderProps<R>['localeText'];
+    // Rows
+    editingHandlers: GridRowRenderProps<R>['editingHandlers'];
+    isCellEditable: GridRowRenderProps<R>['isCellEditable'];
+    selectedRowIds: GridRowRenderProps<R>['selectedRowIds'];
+    handleRowClick: GridRowRenderProps<R>['onRowClick'];
+    onRowDoubleClick: GridRowRenderProps<R>['onRowDoubleClick'];
+    handleCellClick: GridRowRenderProps<R>['onCellClick'];
+    handleSelectionChange: GridRowRenderProps<R>['onSelectionChange'];
+    expandedRowIds: GridRowRenderProps<R>['expandedRowIds'];
+    getDetailPanelContent: GridRowRenderProps<R>['getDetailPanelContent'];
+    getDetailPanelHeight: GridRowRenderProps<R>['getDetailPanelHeight'];
+    handleDetailPanelToggle: GridRowRenderProps<R>['onDetailPanelToggle'];
+    reportDetailPanelHeight: GridRowRenderProps<R>['onDetailPanelHeightChange'];
+    spanning: Pick<GridSpanningResult, 'colspanMap' | 'rowSpanningCaches'>;
+    rowMetaMap: GridRowRenderProps<R>['rowMetaMap'];
+    fillHandle: { handle: GridRowRenderProps<R>['fillHandle'] };
+    pinnedTopRows: R[];
+    pinnedBottomRows: R[];
+    pinnedRows: GridPinnedRowsProps<R>['pinnedRows'];
+    getRowIdOf: (row: R) => GridRowId;
+    showEmptyState: boolean;
+    effectiveNoRowsLabel: string;
+    noRowsOverlay: React.ReactNode;
+    loadingOverlay: React.ReactNode;
+    spanRowWindow: { renderContext: { lastRowIndex: number }; offsetTop: number };
+    visibleRows: GridVirtualRowsProps<R>['visibleRows'];
+    baseColumns: GridColDef<R>[];
+    viewportWidth: number;
+    rowReorderHandlers: GridVirtualRowsProps<R>['rowReorderHandlers'];
+    paginationMode: GridVirtualRowsProps<R>['paginationMode'];
+    dataSourceLoading: boolean;
+    sortedUnpinnedRowCount: number;
+    pageSize: number;
+    unpinnedRowsLength: number;
+    // Aggregation footer
+    showAggregationFooter: boolean;
+    aggregationResult: GridAggregationResult;
+    effectiveRowHeight: number;
+    isAggregationLoading: boolean;
+}
+
+/**
+ * The standard (non-list) view: the scrolling `role="grid"` viewport with the header, pinned rows, the
+ * empty state, the virtual centre rows and the aggregation footer.
+ */
+export function GridViewport<R extends GridRowModel>(props: GridViewportProps<R>) {
+    const {
+        setViewportElement, handleScroll, ariaLabel, ariaRows, navigationColumnCount, rowSelectionEnabled,
+        disableMultipleRowSelection, cellSelection, effectiveLoading, viewportTabIndex, setKeyboardMode,
+        handleMouseDownCapture, handleKeyDown, handleFocus, handleBlur, effectivePinnedColumns, virtualization,
+        renderColumns, renderedDataColumns, columnGroupingModel, checkboxSelection, rowSelection, sortModel, handleSort,
+        handleSortAdd, multiSort, handleColumnResize, handleColumnAutosize, columnWidths, focusedCell, columnIndexMap,
+        handleHeaderClick, headerReorderHandlers, rowReordering, hasDetailPanel, pinCheckboxColumn, pinExpandColumn,
+        aggregationModel, handleHideColumn, columnsPanel, handlePinColumn, wrapHeaderText, headerHeight, showHeaderFilters,
+        filterModel, handleFilterModelChange, localeText, editingHandlers, isCellEditable, selectedRowIds, handleRowClick,
+        onRowDoubleClick, handleCellClick, handleSelectionChange, expandedRowIds, getDetailPanelContent, getDetailPanelHeight,
+        handleDetailPanelToggle, reportDetailPanelHeight, spanning, rowMetaMap, fillHandle, pinnedTopRows, pinnedBottomRows, pinnedRows,
+        getRowIdOf, showEmptyState, effectiveNoRowsLabel, noRowsOverlay, loadingOverlay, spanRowWindow, visibleRows,
+        baseColumns, viewportWidth, rowReorderHandlers, paginationMode, dataSourceLoading, sortedUnpinnedRowCount,
+        pageSize, unpinnedRowsLength, showAggregationFooter, aggregationResult, effectiveRowHeight, isAggregationLoading,
+    } = props;
+    const { allSelected, someSelected } = rowSelection;
+
+    // Props the row renderers (top-pinned, centre and bottom-pinned rows) all take.
+    const rowRenderProps: GridRowRenderProps<R> = {
+        rowReordering, columnIndexMap, editingHandlers, isCellEditable, selectedRowIds, checkboxSelection,
+        onRowClick: handleRowClick,
+        onRowDoubleClick,
+        onCellClick: handleCellClick,
+        onSelectionChange: handleSelectionChange,
+        columnWidths,
+        pinnedColumns: effectivePinnedColumns,
+        hasDetailPanel, expandedRowIds, getDetailPanelContent, getDetailPanelHeight,
+        onDetailPanelToggle: handleDetailPanelToggle,
+        onDetailPanelHeightChange: reportDetailPanelHeight,
+        pinCheckboxColumn, pinExpandColumn, focusedCell,
+        colspanMap: spanning.colspanMap,
+        rowSpanningCaches: spanning.rowSpanningCaches,
+        rowHeight: effectiveRowHeight,
+        rowMetaMap,
+        cellRange: cellSelection.displayRange,
+        cellRangeHasRowSpan: cellSelection.hasRowSpan,
+        fillHandle: fillHandle.handle,
+    };
+
+    return (
+        <div
+            ref={setViewportElement}
+            className="ogx__viewport"
+            onScroll={handleScroll}
+            role="grid"
+            aria-label={ariaLabel || 'Data grid'}
+            aria-rowcount={ariaRows.rowCount}
+            aria-colcount={navigationColumnCount}
+            aria-multiselectable={(rowSelectionEnabled && !disableMultipleRowSelection) || cellSelection.enabled}
+            aria-busy={effectiveLoading}
+            tabIndex={viewportTabIndex}
+            onKeyDownCapture={() => { setKeyboardMode(true); }}
+            onMouseDownCapture={handleMouseDownCapture}
+            onMouseDown={cellSelection.handleMouseDown}
+            onClickCapture={cellSelection.handleClickCapture}
+            onKeyDown={handleKeyDown}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+        >
+            <div
+                className="ogx__content"
+                style={{
+                    // With right-pinned columns the content spans at least the viewport, so they sit at its right edge.
+                    width: effectivePinnedColumns?.right?.length
+                        ? `max(100%, ${virtualization.totalWidth}px)`
+                        : virtualization.totalWidth
+                }}
+                role="presentation"
+            >
+                {/* Header and top-pinned rows stick together, so pinned rows sit below every header row. */}
+                <div className="ogx__sticky-top" role="presentation">
+                    <Header
+                        columns={renderColumns}
+                        allColumns={renderedDataColumns}
+                        columnGroupingModel={columnGroupingModel}
+                        checkboxSelection={checkboxSelection}
+                        allSelected={allSelected}
+                        someSelected={someSelected}
+                        onSelectAll={rowSelection.selectAll}
+                        sortModel={sortModel}
+                        onSort={handleSort}
+                        onSortAdd={handleSortAdd}
+                        multiSort={multiSort}
+
+                        onColumnResize={handleColumnResize}
+                        onColumnAutosize={handleColumnAutosize}
+                        columnWidths={columnWidths}
+                        pinnedColumns={effectivePinnedColumns}
+
+                        focusedCell={focusedCell}
+                        columnIndexMap={columnIndexMap}
+                        onHeaderClick={handleHeaderClick}
+                        onDragStart={headerReorderHandlers.onDragStart}
+                        onDragOver={headerReorderHandlers.onDragOver}
+                        onDragEnd={headerReorderHandlers.onDragEnd}
+                        onDrop={headerReorderHandlers.onDrop}
+                        draggedColumn={headerReorderHandlers.draggedColumn}
+                        dragOverColumn={headerReorderHandlers.dragOverColumn}
+                        rowReordering={rowReordering}
+                        hasDetailPanel={hasDetailPanel}
+                        pinCheckboxColumn={pinCheckboxColumn}
+                        pinExpandColumn={pinExpandColumn}
+                        aggregationModel={aggregationModel}
+                        onHideColumn={handleHideColumn}
+                        onManageColumns={columnsPanel.openColumnsPanel}
+                        onPinColumn={handlePinColumn}
+                        wrapHeaderText={wrapHeaderText}
+                        headerHeight={headerHeight}
+                        headerFilters={showHeaderFilters}
+                        filterModel={filterModel}
+                        onFilterModelChange={handleFilterModelChange}
+                        onOpenFilterPanel={columnsPanel.openFiltersPanel}
+                        localeText={localeText}
+                    />
+
+                    <GridPinnedRows<R>
+                        {...rowRenderProps}
+                        rows={pinnedTopRows}
+                        position="top"
+                        ariaRowIndexBase={ariaRows.topBase}
+                        columns={renderColumns}
+                        pinnedRows={pinnedRows}
+                        getRowId={getRowIdOf}
+                    />
+                </div>
+
+                {/* Empty State Overlay (Standard View) — showing after header */}
+                {showEmptyState && (
+                    <GridEmptyState
+                        noRowsLabel={effectiveNoRowsLabel}
+                        width={virtualization.totalWidth}
+                        overlay={noRowsOverlay}
+                    />
+                )}
+
+                <GridVirtualRows<R>
+                    {...rowRenderProps}
+                    virtualContainerHeight={virtualization.virtualContainerHeight}
+                    offsetTop={spanRowWindow.offsetTop}
+                    effectiveLoading={effectiveLoading}
+                    visibleRows={visibleRows}
+                    baseColumns={baseColumns}
+                    virtualColumns={renderColumns}
+                    viewportWidth={viewportWidth}
+                    rowReorderHandlers={rowReorderHandlers}
+                    paginationMode={paginationMode}
+                    dataSourceLoading={dataSourceLoading}
+                    sortedUnpinnedRowCount={sortedUnpinnedRowCount}
+                    infiniteScrollSkeletonCount={Math.min(pageSize, 20)}
+                    unpinnedRowsLength={unpinnedRowsLength}
+                    lastRenderedRowIndex={spanRowWindow.renderContext.lastRowIndex}
+                    ariaRowIndexOffset={ariaRows.centerOffset}
+                    loadingOverlay={loadingOverlay}
+                />
+
+                {/* Bottom-pinned rows and the aggregation footer stick together, footer last. */}
+                <div className="ogx__sticky-bottom" role="presentation">
+                    <GridPinnedRows<R>
+                        {...rowRenderProps}
+                        rows={pinnedBottomRows}
+                        position="bottom"
+                        rowIndexOffset={ariaRows.bottomRowIndexOffset}
+                        ariaRowIndexBase={ariaRows.bottomBase}
+                        columns={renderColumns}
+                        pinnedRows={pinnedRows}
+                        getRowId={getRowIdOf}
+                    />
+
+                    {/* Aggregation Footer Row — laid out from the same virtual columns as the rows, so
+                         hidden, pinned and scrolled columns line up. Off in pivot mode (hasAggregation). */}
+                    {showAggregationFooter && (
+                        <GridAggregationFooter
+                            columns={virtualization.virtualColumns as unknown as GridColDef[]}
+                            aggregationModel={aggregationModel}
+                            aggregationResult={aggregationResult}
+                            columnWidths={columnWidths}
+                            rowHeight={effectiveRowHeight}
+                            checkboxSelection={checkboxSelection}
+                            hasDetailPanel={hasDetailPanel}
+                            rowReordering={rowReordering}
+                            pinCheckboxColumn={pinCheckboxColumn}
+                            pinExpandColumn={pinExpandColumn}
+                            pinnedColumns={effectivePinnedColumns}
+                            loading={isAggregationLoading}
+                        />
+                    )}
+                </div>
+
+            </div>
+        </div>
+    );
+}

package/lib/components/FilterPanel/FilterPanel.css

@@ -7,7 +7,7 @@
   background: var(--ogx-grid-header-background);
 }
 .ogx-filter__logic-label {
-  font-family: var(--ogx-font-family);
+  font-family: var(--ogx-overlay-font-family, var(--ogx-font-family));
   font-size: var(--ogx-font-size-xs);
   font-weight: 500;
   color: var(--ogx-grid-header-text);
@@ -64,9 +64,9 @@
 }
 .ogx-filter__col-label {
   flex: 0 0 140px;
-  font-family: var(--ogx-font-family);
-  font-size: var(--ogx-font-size-xs);
-  font-weight: 500;
+  font-family: var(--ogx-overlay-font-family, var(--ogx-font-family));
+  font-size: var(--ogx-overlay-font-size, var(--ogx-font-size-xs));
+  font-weight: var(--ogx-overlay-font-weight, 500);
   color: var(--ogx-grid-row-text);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -113,8 +113,9 @@
   padding: 4px 8px;
   border: var(--ogx-border-width-thin) solid var(--ogx-border-color);
   border-radius: var(--ogx-border-radius-sm);
-  font-family: var(--ogx-font-family);
-  font-size: var(--ogx-font-size-xs);
+  font-family: var(--ogx-overlay-font-family, var(--ogx-font-family));
+  font-size: var(--ogx-overlay-font-size, var(--ogx-font-size-xs));
+  font-weight: var(--ogx-overlay-font-weight, 400);
   line-height: revert;
   background: var(--ogx-grid-background);
   color: var(--ogx-grid-row-text);
@@ -162,7 +163,7 @@
 .ogx-filter__hidden-note {
   padding: 6px var(--ogx-spacing-md);
   border-bottom: var(--ogx-border-width-thin) solid var(--ogx-grid-border-color);
-  font-family: var(--ogx-font-family);
+  font-family: var(--ogx-overlay-font-family, var(--ogx-font-family));
   font-size: var(--ogx-font-size-xs);
   color: var(--ogx-overlay-text, var(--ogx-color-gray-400));
 }
@@ -189,7 +190,7 @@
 }
 .ogx-filter__empty {
   padding: var(--ogx-spacing-md);
-  font-family: var(--ogx-font-family);
+  font-family: var(--ogx-overlay-font-family, var(--ogx-font-family));
   font-size: var(--ogx-font-size-sm);
   color: var(--ogx-overlay-text, var(--ogx-color-gray-400));
   opacity: 0.7;

package/lib/components/Header/ColumnMenu.css

@@ -9,7 +9,7 @@
 }
 .ogx-menu-section-label {
     padding: 6px 14px 2px;
-    font-family: var(--ogx-font-family, system-ui, sans-serif);
+    font-family: var(--ogx-overlay-font-family, var(--ogx-font-family, system-ui, sans-serif));
     font-size: 11px;
     font-weight: 600;
     text-transform: uppercase;
@@ -25,8 +25,9 @@
     border: none;
     background: transparent;
     cursor: pointer;
-    font-family: var(--ogx-font-family, system-ui, sans-serif);
-    font-size: var(--ogx-font-size-xs);
+    font-family: var(--ogx-overlay-font-family, var(--ogx-font-family, system-ui, sans-serif));
+    font-size: var(--ogx-overlay-font-size, var(--ogx-font-size-xs));
+    font-weight: var(--ogx-overlay-font-weight, 400);
     color: var(--ogx-overlay-text, #334155);
     text-align: start;
     gap: 6px;

package/lib/components/Header/Header.css

@@ -12,7 +12,7 @@
   display: flex;
   align-items: stretch;
   background: var(--ogx-grid-header-background);
-  border-bottom: 1px solid var(--ogx-grid-border-color);
+  border-bottom: var(--ogx-grid-row-divider-width) solid var(--ogx-grid-row-divider-color, var(--ogx-grid-border-color));
   min-height: var(--ogx-header-height);
   box-shadow: var(--ogx-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.03));
 }
@@ -25,10 +25,11 @@
 .ogx__header-cell {
   display: flex;
   align-items: center;
-  padding: var(--ogx-grid-cell-padding-y) var(--ogx-grid-cell-padding-x);
+  padding: var(--ogx-grid-cell-padding-y) var(--ogx-grid-header-padding-x, var(--ogx-grid-cell-padding-x));
   position: relative;
+  font-family: var(--ogx-grid-header-font-family, inherit);
   font-size: var(--ogx-grid-header-font-size);
-  font-weight: 600; 
+  font-weight: var(--ogx-grid-header-font-weight, 600);
   color: var(--ogx-grid-header-text);
   overflow: hidden;
   box-sizing: border-box;
@@ -42,7 +43,7 @@
   inset-inline-end: 0;
   top: 25%;
   height: 50%;
-  width: 1px;
+  width: var(--ogx-grid-header-column-divider-width);
   background-color: var(--ogx-color-gray-300);
   opacity: 0.5;
 }

package/lib/components/HeaderFilter/HeaderFilter.css

@@ -7,7 +7,7 @@
   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);
+  border-bottom: var(--ogx-grid-row-divider-width) solid var(--ogx-grid-row-divider-color, var(--ogx-grid-border-color));
 }
 .ogx__header-filter-cell {
   display: flex;