@alaarab/ogrid 1.4.0 → 1.6.0

package/dist/esm/ColumnChooser/ColumnChooser.module.css

@@ -44,6 +44,7 @@
   display: flex;
   flex-direction: column;
   padding: 0;
+  z-index: 50;
 }
 
 .header {

package/dist/esm/DataGridTable/DataGridTable.js

@@ -15,7 +15,13 @@ function DataGridTableInner(props) {
     const tableContainerRef = useRef(null);
     const state = useDataGridState({ props, wrapperRef });
     const lastMouseShiftRef = useRef(false);
-    const { visibleCols, totalColCount, hasCheckboxCol, selectedRowIds, updateSelection, handleRowCheckboxChange, handleSelectAll, allSelected, someSelected, setEditingCell, pendingEditorValue, setPendingEditorValue, setActiveCell, handleCellMouseDown, handleSelectAllCells, contextMenu, handleCellContextMenu, closeContextMenu, canUndo, canRedo, onUndo, onRedo, handleCopy, handleCut, handlePaste, handleGridKeyDown, handleFillHandleMouseDown, containerWidth, minTableWidth, desiredTableWidth, columnSizingOverrides, setColumnSizingOverrides, statusBarConfig, showEmptyInGrid, hasCellSelection, selectionRange, copyRange, cutRange, colOffset, headerFilterInput, cellDescriptorInput, commitCellEdit, cancelPopoverEdit, popoverAnchorEl, setPopoverAnchorEl, } = state;
+    const { layout, rowSelection: rowSel, editing, interaction, contextMenu: ctxMenu, viewModels } = state;
+    const { visibleCols, totalColCount, hasCheckboxCol, colOffset, containerWidth, minTableWidth, desiredTableWidth, columnSizingOverrides, setColumnSizingOverrides } = layout;
+    const { selectedRowIds, updateSelection, handleRowCheckboxChange, handleSelectAll, allSelected, someSelected } = rowSel;
+    const { setEditingCell, pendingEditorValue, setPendingEditorValue, commitCellEdit, cancelPopoverEdit, popoverAnchorEl, setPopoverAnchorEl } = editing;
+    const { setActiveCell, handleCellMouseDown, handleSelectAllCells, selectionRange, hasCellSelection, handleGridKeyDown, handleFillHandleMouseDown, handleCopy, handleCut, handlePaste, cutRange, copyRange, canUndo, canRedo, onUndo, onRedo } = interaction;
+    const { menuPosition, handleCellContextMenu, closeContextMenu } = ctxMenu;
+    const { headerFilterInput, cellDescriptorInput, statusBarConfig, showEmptyInGrid } = viewModels;
     const { items, columns, getRowId, emptyState, layoutMode = 'fill', rowSelection = 'none', freezeRows, freezeCols, suppressHorizontalScroll, isLoading = false, loadingMessage = 'Loading\u2026', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, visibleColumns, } = props;
     const headerRows = buildHeaderRows(columns, visibleColumns);
     const allowOverflowX = !suppressHorizontalScroll && containerWidth > 0 && (minTableWidth > containerWidth || desiredTableWidth > containerWidth);
@@ -106,7 +112,7 @@ function DataGridTableInner(props) {
                                                                     textAlign: col.type === 'numeric' ? 'right' : col.type === 'boolean' ? 'center' : undefined,
                                                                 }, children: renderCellContent(item, col, rowIndex, colIdx) }, col.columnId));
                                                         })] }, rowIdStr));
-                                            }) }))] }), _jsx(MarchingAntsOverlay, { containerRef: tableContainerRef, selectionRange: selectionRange, copyRange: copyRange, cutRange: cutRange, colOffset: colOffset }), showEmptyInGrid && emptyState && (_jsx("div", { className: styles.emptyStateInGrid, children: _jsx("div", { children: emptyState.render ? (emptyState.render()) : (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.emptyStateInGridTitle, children: "No results found" }), _jsx("div", { className: styles.emptyStateInGridMessage, children: emptyState.message != null ? (emptyState.message) : emptyState.hasActiveFilters ? (_jsxs(_Fragment, { children: ["No items match your current filters. Try adjusting your search or", ' ', _jsx("button", { type: "button", className: styles.emptyStateInGridLink, onClick: emptyState.onClearAll, children: "clear all filters" }), ' ', "to see all items."] })) : ('There are no items available at this time.') })] })) }) }))] }) }), statusBarConfig && (_jsx(StatusBar, { totalCount: statusBarConfig.totalCount, filteredCount: statusBarConfig.filteredCount, selectedCount: statusBarConfig.selectedCount ?? selectedRowIds.size, selectedCellCount: selectionRange ? (Math.abs(selectionRange.endRow - selectionRange.startRow) + 1) * (Math.abs(selectionRange.endCol - selectionRange.startCol) + 1) : undefined, aggregation: statusBarConfig.aggregation }))] }), contextMenu &&
-                createPortal(_jsx(GridContextMenu, { x: contextMenu.x, y: contextMenu.y, hasSelection: hasCellSelection, canUndo: canUndo, canRedo: canRedo, onUndo: onUndo ?? (() => { }), onRedo: onRedo ?? (() => { }), onCopy: handleCopy, onCut: handleCut, onPaste: () => void handlePaste(), onSelectAll: handleSelectAllCells, onClose: closeContextMenu }), document.body)] }));
+                                            }) }))] }), _jsx(MarchingAntsOverlay, { containerRef: tableContainerRef, selectionRange: selectionRange, copyRange: copyRange, cutRange: cutRange, colOffset: colOffset }), showEmptyInGrid && emptyState && (_jsx("div", { className: styles.emptyStateInGrid, children: _jsx("div", { children: emptyState.render ? (emptyState.render()) : (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.emptyStateInGridTitle, children: "No results found" }), _jsx("div", { className: styles.emptyStateInGridMessage, children: emptyState.message != null ? (emptyState.message) : emptyState.hasActiveFilters ? (_jsxs(_Fragment, { children: ["No items match your current filters. Try adjusting your search or", ' ', _jsx("button", { type: "button", className: styles.emptyStateInGridLink, onClick: emptyState.onClearAll, children: "clear all filters" }), ' ', "to see all items."] })) : ('There are no items available at this time.') })] })) }) }))] }) }), statusBarConfig && (_jsx(StatusBar, { totalCount: statusBarConfig.totalCount, filteredCount: statusBarConfig.filteredCount, selectedCount: statusBarConfig.selectedCount ?? selectedRowIds.size, selectedCellCount: selectionRange ? (Math.abs(selectionRange.endRow - selectionRange.startRow) + 1) * (Math.abs(selectionRange.endCol - selectionRange.startCol) + 1) : undefined, aggregation: statusBarConfig.aggregation, suppressRowCount: statusBarConfig.suppressRowCount }))] }), menuPosition &&
+                createPortal(_jsx(GridContextMenu, { x: menuPosition.x, y: menuPosition.y, hasSelection: hasCellSelection, canUndo: canUndo, canRedo: canRedo, onUndo: onUndo ?? (() => { }), onRedo: onRedo ?? (() => { }), onCopy: handleCopy, onCut: handleCut, onPaste: () => void handlePaste(), onSelectAll: handleSelectAllCells, onClose: closeContextMenu }), document.body)] }));
 }
 export const DataGridTable = React.memo(DataGridTableInner);

package/dist/esm/DataGridTable/DataGridTable.module.css

@@ -1,8 +1,10 @@
+@charset "UTF-8";
 .tableScrollContent {
   display: flex;
   flex-direction: column;
   width: 100%;
   min-width: 0;
+  min-height: 100%;
   background: var(--ogrid-bg, #fff);
 }
 
@@ -90,6 +92,16 @@
   background: var(--ogrid-bg, #ffffff);
 }
 
+/* Freeze/pinned header cells need top: 0 + z-index: 3 so they stick in BOTH
+   directions — left (from .freezeCol/.pinnedCol) AND top (from .stickyHeader).
+   Without explicit top, the child's own position: sticky overrides the parent's. */
+.dataTable thead.stickyHeader .freezeColFirst,
+.dataTable thead.stickyHeader .pinnedColLeft,
+.dataTable thead.stickyHeader .pinnedColRight {
+  top: 0;
+  z-index: 3;
+}
+
 .dataTable thead .freezeColFirst {
   background: var(--ogrid-bg-subtle, #f3f2f1);
 }
@@ -156,21 +168,29 @@
   background: var(--ogrid-header-bg, #f5f5f5);
 }
 
-/* Column resize handle */
+/* Column resize handle — wide hit area with narrow visual indicator */
 .resizeHandle {
   position: absolute;
   top: 0;
-  right: 0;
+  right: -3px;
   bottom: 0;
-  width: 4px;
+  width: 8px;
   cursor: col-resize;
   user-select: none;
   z-index: 1;
 }
-.resizeHandle:hover {
+.resizeHandle::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 3px;
+  bottom: 0;
+  width: 2px;
+}
+.resizeHandle:hover::after {
   background-color: var(--ogrid-accent, #0078d4);
 }
-.resizeHandle:active {
+.resizeHandle:active::after {
   background-color: var(--ogrid-accent-dark, #005a9e);
 }
 
@@ -305,6 +325,7 @@
   background: var(--ogrid-bg-subtle, #f3f2f1);
   border-top: 1px solid var(--ogrid-border, #e0e0e0);
   min-height: 28px;
+  margin-top: auto;
 }
 
 .statusBarItem {

package/dist/esm/OGrid/OGrid.js

@@ -6,8 +6,8 @@ import { ColumnChooser } from '../ColumnChooser/ColumnChooser';
 import { PaginationControls } from '../PaginationControls/PaginationControls';
 import { useOGrid, OGridLayout, } from '@alaarab/ogrid-core';
 const OGridInner = forwardRef(function OGridInner(props, ref) {
-    const { dataGridProps, page, pageSize, displayTotalCount, setPage, setPageSize, columnChooserColumns, visibleColumns, handleVisibilityChange, columnChooserPlacement, title, toolbar, className, entityLabelPlural, pageSizeOptions, sideBarProps, } = useOGrid(props, ref);
-    return (_jsx(OGridLayout, { className: className, gap: 8, sideBar: sideBarProps, title: title, toolbar: toolbar, toolbarEnd: columnChooserPlacement === 'toolbar' ? (_jsx(ColumnChooser, { columns: columnChooserColumns, visibleColumns: visibleColumns, onVisibilityChange: handleVisibilityChange })) : undefined, pagination: _jsx(PaginationControls, { currentPage: page, pageSize: pageSize, totalCount: displayTotalCount, onPageChange: setPage, onPageSizeChange: (size) => {
+    const { dataGridProps, page, pageSize, displayTotalCount, setPage, setPageSize, columnChooserColumns, visibleColumns, handleVisibilityChange, columnChooserPlacement, toolbar, className, entityLabelPlural, pageSizeOptions, sideBarProps, } = useOGrid(props, ref);
+    return (_jsx(OGridLayout, { className: className, sideBar: sideBarProps, toolbar: toolbar, toolbarEnd: columnChooserPlacement === 'toolbar' ? (_jsx(ColumnChooser, { columns: columnChooserColumns, visibleColumns: visibleColumns, onVisibilityChange: handleVisibilityChange })) : undefined, pagination: _jsx(PaginationControls, { currentPage: page, pageSize: pageSize, totalCount: displayTotalCount, onPageChange: setPage, onPageSizeChange: (size) => {
                 setPageSize(size);
                 setPage(1);
             }, pageSizeOptions: pageSizeOptions, entityLabelPlural: entityLabelPlural }), children: _jsx(DataGridTable, { ...dataGridProps }) }));

package/dist/esm/index.js

@@ -4,5 +4,5 @@ export { DataGridTable } from './DataGridTable/DataGridTable';
 export { ColumnChooser } from './ColumnChooser/ColumnChooser';
 export { ColumnHeaderFilter } from './ColumnHeaderFilter/ColumnHeaderFilter';
 export { PaginationControls } from './PaginationControls/PaginationControls';
-// Re-export from core
-export { toUserLike, isInSelectionRange, normalizeSelectionRange, toDataGridFilterProps, useFilterOptions, getCellValue, flattenColumns, escapeCsvValue, buildCsvHeader, buildCsvRows, exportToCsv, triggerCsvDownload, } from '@alaarab/ogrid-core';
+// Re-export everything from core
+export * from '@alaarab/ogrid-core';

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

@@ -11,5 +11,6 @@ export interface StatusBarProps {
         max: number;
         count: number;
     } | null;
+    suppressRowCount?: boolean;
 }
 export declare function StatusBar(props: StatusBarProps): React.ReactElement;

package/dist/types/index.d.ts

@@ -3,4 +3,4 @@ export { DataGridTable, type IDataGridTableProps } from './DataGridTable/DataGri
 export { ColumnChooser, type IColumnChooserProps } from './ColumnChooser/ColumnChooser';
 export { ColumnHeaderFilter, type IColumnHeaderFilterProps } from './ColumnHeaderFilter/ColumnHeaderFilter';
 export { PaginationControls, type IPaginationControlsProps } from './PaginationControls/PaginationControls';
-export { type ColumnFilterType, type IColumnFilterDef, type IColumnMeta, type IColumnDef, type IColumnGroupDef, type IColumnDefinition, type ICellValueChangedEvent, type ICellEditorProps, type UserLike, type IFilters, type IFetchParams, type IPageResult, type IDataSource, type IGridColumnState, type IOGridApi, type RowSelectionMode, type IRowSelectionChangeEvent, type StatusBarPanel, type IStatusBarProps, type IActiveCell, type ISelectionRange, toUserLike, isInSelectionRange, normalizeSelectionRange, toDataGridFilterProps, useFilterOptions, type UseFilterOptionsResult, getCellValue, flattenColumns, escapeCsvValue, buildCsvHeader, buildCsvRows, exportToCsv, triggerCsvDownload, type CsvColumn, } from '@alaarab/ogrid-core';
+export * from '@alaarab/ogrid-core';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "description": "OGrid default (Radix) – Data grid with sorting, filtering, pagination, column chooser, and CSV export. Packed with Radix UI; no Fluent or Material required.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -41,7 +41,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-core": "^1.2.0",
+    "@alaarab/ogrid-core": "^1.6.0",
     "@radix-ui/react-checkbox": "^1.1.2",
     "@radix-ui/react-popover": "^1.1.2"
   },