@coreui/react-data-grid 0.1.0-rc.0 → 0.3.0-rc.0

package/README.md

@@ -1,11 +1,15 @@
 # @coreui/react-data-grid
 
-High-performance React data grid for CoreUI, built on `@tanstack/react-table`
-and `@tanstack/react-virtual`.
+High-performance React data grid for CoreUI — sorting, filtering, selection,
+pagination, column resizing/reordering/pinning, inline editing, CSV export, and
+server-side data, virtualized to 100,000 rows.
 
-Requires the CoreUI stylesheet (`@coreui/coreui` or `@coreui/coreui-pro` ≥ 5)
-for the base `.table` styles plus the shared grid stylesheet from
-`@coreui/data-grid`.
+Load the shared grid stylesheet from `@coreui/data-grid` (installed
+automatically). Use `data-grid.css` next to the CoreUI stylesheet
+(`@coreui/coreui` or `@coreui/coreui-pro` ≥ 5), which supplies the base `.table`,
+`.btn` and form styles; without CoreUI on the page use
+`data-grid.standalone.css` instead, which carries those base styles itself for
+~2.7 kB gzip.
 
 ## Usage
 

package/dist/cjs/CDataGrid.d.ts

@@ -4,5 +4,15 @@
  * License (https://coreui.io/pro/license/)
  * --------------------------------------------------------------------------
  */
+import { type TableFeatures } from '@tanstack/react-table';
+import { type ReactNode, type Ref } from 'react';
+import { type DataGridFeatures } from './features';
 import type { CDataGridProps } from './types';
-export declare const CDataGrid: import("react").ForwardRefExoticComponent<CDataGridProps & import("react").RefAttributes<HTMLDivElement>>;
+interface CDataGridComponent {
+    <TFeatures extends TableFeatures = DataGridFeatures>(props: CDataGridProps<TFeatures> & {
+        ref?: Ref<HTMLDivElement>;
+    }): ReactNode;
+    displayName?: string;
+}
+export declare const CDataGrid: CDataGridComponent;
+export {};

package/dist/cjs/CDataGrid.js

@@ -2,6 +2,11 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var filters = require('@coreui/data-grid/filters');
+var clipboard = require('@coreui/data-grid/clipboard');
+var print = require('@coreui/data-grid/print');
+var direction = require('@coreui/data-grid/direction');
+var drag = require('@coreui/data-grid/drag');
+var validate = require('@coreui/data-grid/validate');
 var reactTable = require('@tanstack/react-table');
 var react = require('react');
 var activeCell = require('./active-cell.js');
@@ -11,6 +16,7 @@ var CDataGridHeader = require('./CDataGridHeader.js');
 var CDataGridPagination = require('./CDataGridPagination.js');
 var CDataGridToolbar = require('./CDataGridToolbar.js');
 var columns = require('./columns.js');
+var features = require('./features.js');
 var icons = require('./icons.js');
 var labels = require('@coreui/data-grid/labels');
 var toolbar = require('./toolbar.js');
@@ -19,6 +25,8 @@ var tooltip = require('./tooltip.js');
 const DEFAULT_PAGE_SIZE_OPTIONS = [5, 10, 20, 50];
 const STATE_STORAGE_PREFIX = 'coreui-data-grid:';
 const HISTORY_LIMIT = 100;
+const INFINITE_SCROLL_PAGE_SIZE = 50;
+const UNPAGINATED_PAGE_SIZE = Number.MAX_SAFE_INTEGER;
 const readPersistedState = (stateKey) => {
     if (!stateKey) {
         return null;
@@ -31,6 +39,17 @@ const readPersistedState = (stateKey) => {
         return null;
     }
 };
+// Under RTL the two horizontal keys point at the opposite logical neighbour.
+const INVERTED_ARROWS = {
+    ArrowLeft: 'ArrowRight',
+    ArrowRight: 'ArrowLeft'
+};
+const CELL_SELECTION_DIRECTIONS = {
+    ArrowDown: 'down',
+    ArrowLeft: 'left',
+    ArrowRight: 'right',
+    ArrowUp: 'up'
+};
 const FETCH_DEBOUNCE_MS = 100;
 // Module-level so an omitted `items` prop keeps a stable identity - a fresh
 // array per render would force TanStack to recompute row models every time.
@@ -43,17 +62,17 @@ const toTanStackFilterFn = (column) => {
     return (row, columnId, filterValue) => filters.evaluateColumnFilter(row.getValue(columnId), filterValue, column.filterType);
 };
 const CDataGrid = react.forwardRef((props, ref) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
-    const { cellNavigation = false, className, columnFilters = false, columnMenu = false, columnMenuIcon = icons.DEFAULT_COLUMN_MENU_ICON, columnOrder = false, columnPinning = false, columnSizing = false, columnVisibility = false, columns: columns$1, dataProvider, editing = false, empty = 'No items found', filterIcon = icons.DEFAULT_FILTER_ICON, globalFilter = false, hideColumnIcon = icons.DEFAULT_HIDE_COLUMN_ICON, history = false, itemKey, items = EMPTY_ITEMS, labels: labels$1, moveLeftIcon = icons.DEFAULT_MOVE_LEFT_ICON, moveRightIcon = icons.DEFAULT_MOVE_RIGHT_ICON, onDataError, onDataLoad, onEditCancel, onEditCommit, onEditStart, onFilterChange, onOrderChange, onPaginationChange, onPinningChange, onSelectionChange, onSizingChange, onSortingChange, onVisibilityChange, overscan = 10, pagination = false, pinLeftIcon = icons.DEFAULT_PIN_LEFT_ICON, pinRightIcon = icons.DEFAULT_PIN_RIGHT_ICON, rowHeight = 44, rowSelection = false, slots, sortAscendingIcon = icons.DEFAULT_SORT_ASCENDING_ICON, sortDescendingIcon = icons.DEFAULT_SORT_DESCENDING_ICON, sortNeutralIcon = icons.DEFAULT_SORT_NEUTRAL_ICON, sorterVisibility, sorting = true, stateKey, tableRef, toolbar: toolbar$1 = false, toolbarColumnsIcon = icons.DEFAULT_TOOLBAR_COLUMNS_ICON, toolbarExportIcon = icons.DEFAULT_TOOLBAR_EXPORT_ICON, toolbarRedoIcon = icons.DEFAULT_TOOLBAR_REDO_ICON, toolbarUndoIcon = icons.DEFAULT_TOOLBAR_UNDO_ICON, unpinIcon = icons.DEFAULT_UNPIN_ICON, virtualization = true, ...rest } = props;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    const { autoRowHeight = false, cellNavigation = false, cellSelection = false, className, columnFilters = false, columnMenu = false, columnMenuIcon = icons.DEFAULT_COLUMN_MENU_ICON, columnOrder = false, columnPinning = false, columnSizing = false, columnVisibility = false, columns: columns$1, dataProvider, editing = false, empty = 'No items found', features: features$1 = features.dataGridFeatures, filterIcon = icons.DEFAULT_FILTER_ICON, globalFilter = false, hideColumnIcon = icons.DEFAULT_HIDE_COLUMN_ICON, history = false, infiniteScroll = false, itemKey, items = EMPTY_ITEMS, labels: labels$1, moveStartIcon = icons.DEFAULT_MOVE_START_ICON, moveEndIcon = icons.DEFAULT_MOVE_END_ICON, onDataError, onDataLoad, onEditCancel, onEditCommit, onEditStart, onFilterChange, onOrderChange, onPaginationChange, onPinningChange, onSelectionChange, onRowOrderChange, onCellCopy, onSizingChange, onSortingChange, onVisibilityChange, overscan = 10, pagination = false, pinStartIcon = icons.DEFAULT_PIN_START_ICON, pinEndIcon = icons.DEFAULT_PIN_END_ICON, rowHandleIcon = icons.DEFAULT_ROW_HANDLE_ICON, rowHeight = 44, rowOrder = false, rowSelection = false, slots, sortAscendingIcon = icons.DEFAULT_SORT_ASCENDING_ICON, sortDescendingIcon = icons.DEFAULT_SORT_DESCENDING_ICON, sortNeutralIcon = icons.DEFAULT_SORT_NEUTRAL_ICON, sorterVisibility, sorting = true, stateKey, tableRef, toolbar: toolbar$1 = false, toolbarColumnsIcon = icons.DEFAULT_TOOLBAR_COLUMNS_ICON, printTitle, toolbarExportIcon = icons.DEFAULT_TOOLBAR_EXPORT_ICON, toolbarPrintIcon = icons.DEFAULT_TOOLBAR_PRINT_ICON, toolbarRedoIcon = icons.DEFAULT_TOOLBAR_REDO_ICON, toolbarUndoIcon = icons.DEFAULT_TOOLBAR_UNDO_ICON, unpinIcon = icons.DEFAULT_UNPIN_ICON, virtualization = true, ...rest } = props;
     const mergedLabels = react.useMemo(() => ({ ...labels.DEFAULT_LABELS, ...labels$1 }), [labels$1]);
     const menuIcons = react.useMemo(() => ({
         columnMenu: columnMenuIcon,
         filter: filterIcon,
         hideColumn: hideColumnIcon,
-        moveLeft: moveLeftIcon,
-        moveRight: moveRightIcon,
-        pinLeft: pinLeftIcon,
-        pinRight: pinRightIcon,
+        moveStart: moveStartIcon,
+        moveEnd: moveEndIcon,
+        pinStart: pinStartIcon,
+        pinEnd: pinEndIcon,
         sortAscending: sortAscendingIcon,
         sortDescending: sortDescendingIcon,
         sortNeutral: sortNeutralIcon,
@@ -62,18 +81,19 @@ const CDataGrid = react.forwardRef((props, ref) => {
         columnMenuIcon,
         filterIcon,
         hideColumnIcon,
-        moveLeftIcon,
-        moveRightIcon,
-        pinLeftIcon,
-        pinRightIcon,
+        moveStartIcon,
+        moveEndIcon,
+        pinStartIcon,
+        pinEndIcon,
         sortAscendingIcon,
         sortDescendingIcon,
         sortNeutralIcon,
         unpinIcon
     ]);
     const menuBuilder = typeof columnMenu === 'function' ? columnMenu : null;
-    // Editing needs the active-cell substrate (Enter/F2 target the active cell).
-    const cellNavigationEnabled = cellNavigation || editing;
+    // Both need the active-cell substrate: editing targets it with Enter/F2,
+    // cell selection anchors ranges on it.
+    const cellNavigationEnabled = cellNavigation || editing || cellSelection;
     const sortingOptions = typeof sorting === 'object' ? sorting : {};
     const sizingEnabled = Boolean(columnSizing);
     const sizingOptions = typeof columnSizing === 'object' ? columnSizing : {};
@@ -82,9 +102,23 @@ const CDataGrid = react.forwardRef((props, ref) => {
     const selectionEnabled = Boolean(rowSelection);
     const selectionOptions = typeof rowSelection === 'object' ? rowSelection : {};
     const serverSide = Boolean(dataProvider);
-    // Server-side mode implies pagination — virtualized infinite scroll over a
-    // dataProvider is out of scope until 0.3.0.
-    const paginationEnabled = Boolean(pagination) || serverSide;
+    if (infiniteScroll) {
+        if (!serverSide) {
+            throw new TypeError('DATA-GRID: Option "infiniteScroll" requires "dataProvider".');
+        }
+        if (pagination) {
+            throw new TypeError('DATA-GRID: Option "infiniteScroll" cannot be combined with "pagination".');
+        }
+        if (!virtualization) {
+            throw new TypeError('DATA-GRID: Option "infiniteScroll" requires "virtualization".');
+        }
+    }
+    const infiniteOptions = typeof infiniteScroll === 'object' ? infiniteScroll : {};
+    // Server-side mode implies pagination unless it scrolls infinitely, where
+    // the pages accumulate behind the virtualizer instead of replacing. The
+    // pagination STATE stays either way — infinite scroll pages the requests.
+    const paginationEnabled = Boolean(pagination) || (serverSide && !infiniteScroll);
+    const paginated = paginationEnabled || Boolean(infiniteScroll);
     const paginationOptions = typeof pagination === 'object' ? pagination : {};
     const virtualizationEnabled = virtualization && !paginationEnabled;
     const resolvedToolbar = toolbar.resolveToolbar({
@@ -97,6 +131,7 @@ const CDataGrid = react.forwardRef((props, ref) => {
     const isColumnFilterable = (column) => columnFilters && column.filterable !== false;
     const isColumnResizable = (column) => sizingEnabled && column.resizable !== false;
     // A persisted view (stateKey) seeds the initial state - read once.
+    const rootRef = react.useRef(null);
     const persistedStateRef = react.useRef(undefined);
     if (persistedStateRef.current === undefined) {
         persistedStateRef.current = readPersistedState(stateKey);
@@ -107,7 +142,11 @@ const CDataGrid = react.forwardRef((props, ref) => {
     const [globalFilterState, setGlobalFilterState] = react.useState((persisted === null || persisted === void 0 ? void 0 : persisted.globalFilter) === undefined || persisted.globalFilter === '' ? undefined : persisted.globalFilter);
     const [rowSelectionState, setRowSelectionState] = react.useState((_c = persisted === null || persisted === void 0 ? void 0 : persisted.rowSelection) !== null && _c !== void 0 ? _c : {});
     const [columnSizingState, setColumnSizingState] = react.useState((_d = persisted === null || persisted === void 0 ? void 0 : persisted.columnSizing) !== null && _d !== void 0 ? _d : {});
-    const [columnPinningState, setColumnPinningState] = react.useState((_e = persisted === null || persisted === void 0 ? void 0 : persisted.columnPinning) !== null && _e !== void 0 ? _e : (typeof columnPinning === 'object' ? columnPinning : {}));
+    const [columnPinningState, setColumnPinningState] = react.useState({
+        start: [],
+        end: [],
+        ...((_e = persisted === null || persisted === void 0 ? void 0 : persisted.columnPinning) !== null && _e !== void 0 ? _e : (typeof columnPinning === 'object' ? columnPinning : {}))
+    });
     const [columnOrderState, setColumnOrderState] = react.useState((_f = persisted === null || persisted === void 0 ? void 0 : persisted.columnOrder) !== null && _f !== void 0 ? _f : (Array.isArray(columnOrder) ? columnOrder : []));
     const [columnVisibilityState, setColumnVisibilityState] = react.useState((_g = persisted === null || persisted === void 0 ? void 0 : persisted.columnVisibility) !== null && _g !== void 0 ? _g : (typeof columnVisibility === 'object' ? columnVisibility : {}));
     // The chooser's Reset restores the initial columnVisibility object, captured
@@ -115,7 +154,13 @@ const CDataGrid = react.forwardRef((props, ref) => {
     const initialColumnVisibility = react.useRef(typeof columnVisibility === 'object' ? columnVisibility : {});
     const [paginationState, setPaginationState] = react.useState({
         pageIndex: (_j = (_h = persisted === null || persisted === void 0 ? void 0 : persisted.pagination) === null || _h === void 0 ? void 0 : _h.pageIndex) !== null && _j !== void 0 ? _j : 0,
-        pageSize: (_m = (_l = (_k = persisted === null || persisted === void 0 ? void 0 : persisted.pagination) === null || _k === void 0 ? void 0 : _k.pageSize) !== null && _l !== void 0 ? _l : paginationOptions.pageSize) !== null && _m !== void 0 ? _m : 10
+        // Pagination is a registered feature on every grid (v9 features are
+        // static), so an unpaginated grid is one page holding every row.
+        pageSize: infiniteScroll ?
+            (_k = infiniteOptions.pageSize) !== null && _k !== void 0 ? _k : INFINITE_SCROLL_PAGE_SIZE :
+            (paginationEnabled ?
+                (_o = (_m = (_l = persisted === null || persisted === void 0 ? void 0 : persisted.pagination) === null || _l === void 0 ? void 0 : _l.pageSize) !== null && _m !== void 0 ? _m : paginationOptions.pageSize) !== null && _o !== void 0 ? _o : 10 :
+                UNPAGINATED_PAGE_SIZE)
     });
     const [activeCell$1, setActiveCell] = react.useState(null);
     // A pending focus request survives renders until the target cell exists in
@@ -165,14 +210,31 @@ const CDataGrid = react.forwardRef((props, ref) => {
             enableSorting: column.sortable !== false,
             filterFn: toTanStackFilterFn(column),
             id: column.key,
-            meta: { label: column.label, formatter: column.formatter },
+            meta: { label: column.label, formatter: column.formatter, width: column.width },
             ...(widthsEnabled && size !== null && { size })
         };
     }), [columns$1, widthsEnabled]);
-    const table = reactTable.useReactTable({
+    validate.assertFeatureCoverage('data-grid', features$1, {
+        cellSelection,
+        columnFilters,
+        columnOrder: Boolean(columnOrder),
+        columnPinning: pinningEnabled,
+        columnSizing: sizingEnabled,
+        columnVisibility: Boolean(columnVisibility),
+        globalFilter: resolvedToolbar.search,
+        pagination: paginated,
+        rowSelection: selectionEnabled,
+        selectFilters: columnFilters && columns$1.some(column => column.filterType === 'select'),
+        sorting: Boolean(sorting)
+    });
+    const table = reactTable.useTable({
         columns: columnDefs,
-        columnResizeMode: (_o = sizingOptions.mode) !== null && _o !== void 0 ? _o : 'onChange',
+        columnResizeMode: (_p = sizingOptions.mode) !== null && _p !== void 0 ? _p : 'onChange',
+        // Construction-time only — table-core copies the options object. A
+        // direction flipped later is picked up when a resize starts.
+        columnResizeDirection: direction.isElementRTL(rootRef.current) ? 'rtl' : 'ltr',
         data: serverSide ? serverItems : items,
+        enableCellSelection: cellSelection,
         enableColumnFilters: columnFilters,
         enableColumnPinning: pinningEnabled,
         enableColumnResizing: sizingEnabled,
@@ -182,12 +244,10 @@ const CDataGrid = react.forwardRef((props, ref) => {
         enableRowSelection: selectionEnabled,
         enableSorting: Boolean(sorting),
         enableSortingRemoval: Boolean(sortingOptions.resetable),
-        getCoreRowModel: reactTable.getCoreRowModel(),
-        // Faceting powers custom filter UIs (column.getFacetedUniqueValues()).
-        getFacetedRowModel: reactTable.getFacetedRowModel(),
-        getFacetedUniqueValues: reactTable.getFacetedUniqueValues(),
-        getFilteredRowModel: reactTable.getFilteredRowModel(),
-        getSortedRowModel: reactTable.getSortedRowModel(),
+        // The runtime set may be smaller than the DataGridFeatures the table is
+        // typed against - internals stay typed on the full set and every call
+        // into an optional feature is capability-guarded.
+        features: features$1,
         globalFilterFn: 'includesString',
         ...(serverSide && {
             manualFiltering: true,
@@ -195,7 +255,6 @@ const CDataGrid = react.forwardRef((props, ref) => {
             manualSorting: true,
             rowCount: serverTotalRows
         }),
-        ...(paginationEnabled && { getPaginationRowModel: reactTable.getPaginationRowModel() }),
         ...(itemKey && { getRowId: itemKey }),
         onColumnFiltersChange: setColumnFiltersState,
         onColumnOrderChange: setColumnOrderState,
@@ -218,7 +277,6 @@ const CDataGrid = react.forwardRef((props, ref) => {
             sorting: sortingState
         }
     });
-    const rootRef = react.useRef(null);
     // Stable across renders - an inline callback ref would be detached/reattached
     // (null, node) on every render, hammering consumer callback refs.
     const setRootRef = react.useCallback((node) => {
@@ -256,8 +314,68 @@ const CDataGrid = react.forwardRef((props, ref) => {
         const tooltip$1 = tooltip.createTooltip(rootRef.current);
         return () => tooltip$1.dispose();
     }, []);
+    // Pointer-based column drag: the shared controller owns the ghost, the drop
+    // indicator and the edge auto-scroll, and writes to the DOM directly, so a
+    // drag costs no React renders. The table is read through a ref so the
+    // controller survives every unrelated re-render.
+    const tableRefForDrag = react.useRef(table);
+    tableRefForDrag.current = table;
+    react.useEffect(() => {
+        const root = rootRef.current;
+        if (!columnOrder || !root) {
+            return;
+        }
+        const controller = drag.createColumnDragController({
+            root,
+            getScrollElement: () => viewportElement,
+            canDrop: (sourceKey, targetKey) => columns.canReorderColumn(tableRefForDrag.current, sourceKey, targetKey),
+            onReorder: (sourceKey, targetKey, after) => columns.reorderColumn(tableRefForDrag.current, sourceKey, targetKey, after)
+        });
+        return () => controller.dispose();
+    }, [columnOrder, viewportElement]);
+    // The grid never mutates `items` — it hands the reordered array to the app
+    // through onRowOrderChange, the same contract inline editing uses.
+    const rowOrderRef = react.useRef({ items, rowIndexOffset: 0, onRowOrderChange });
+    rowOrderRef.current = {
+        items,
+        rowIndexOffset: paginationEnabled ? paginationState.pageIndex * paginationState.pageSize : 0,
+        onRowOrderChange
+    };
+    react.useEffect(() => {
+        const root = rootRef.current;
+        if (!rowOrder || !root) {
+            return;
+        }
+        const controller = drag.createRowDragController({
+            root,
+            getScrollElement: () => viewportElement,
+            onReorder(sourceIndex, targetIndex, after) {
+                var _a;
+                const { current } = rowOrderRef;
+                const next = [...current.items];
+                const from = current.rowIndexOffset + sourceIndex;
+                const [item] = next.splice(from, 1);
+                if (item === undefined) {
+                    return;
+                }
+                // Resolved AFTER the removal, so the index still points at the target
+                // whichever direction the row travelled.
+                const target = current.rowIndexOffset + targetIndex;
+                const to = target > from ? target - 1 : target;
+                const newIndex = after ? to + 1 : to;
+                next.splice(newIndex, 0, item);
+                (_a = current.onRowOrderChange) === null || _a === void 0 ? void 0 : _a.call(current, {
+                    items: next, item, oldIndex: from, newIndex
+                });
+            }
+        });
+        return () => controller.dispose();
+    }, [rowOrder, viewportElement]);
     const requestIdRef = react.useRef(0);
     const lastFilterKeyRef = react.useRef(null);
+    // One page bump per fetch: the body re-renders many times before the next
+    // page lands, and each of those passes still sees the end of the buffer.
+    const loadMorePendingRef = react.useRef(false);
     react.useEffect(() => {
         if (!dataProvider) {
             return;
@@ -284,7 +402,14 @@ const CDataGrid = react.forwardRef((props, ref) => {
                 if (id !== requestIdRef.current) {
                     return;
                 }
-                setServerItems(response.items);
+                // Infinite scroll accumulates: only a first page replaces what is on
+                // screen, every later one appends to it. A replacement also shrinks
+                // the buffer back under a viewport scrolled far past it.
+                loadMorePendingRef.current = false;
+                if (infiniteScroll && paginationState.pageIndex === 0 && viewportElement) {
+                    viewportElement.scrollTop = 0;
+                }
+                setServerItems(previous => (infiniteScroll && paginationState.pageIndex > 0 ? [...previous, ...response.items] : response.items));
                 setServerTotalRows(response.totalRows);
                 setLoadFailed(false);
                 setAnnouncement(labels.interpolate(mergedLabels.resultsAnnouncement, { count: response.totalRows }));
@@ -294,7 +419,8 @@ const CDataGrid = react.forwardRef((props, ref) => {
                 if (id !== requestIdRef.current) {
                     return;
                 }
-                setServerItems([]);
+                loadMorePendingRef.current = false;
+                setServerItems(EMPTY_ITEMS);
                 setServerTotalRows(0);
                 setLoadFailed(true);
                 onDataError === null || onDataError === void 0 ? void 0 : onDataError(error);
@@ -309,7 +435,9 @@ const CDataGrid = react.forwardRef((props, ref) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [dataProvider, sortingState, columnFiltersState, globalFilterState, paginationState]);
     const mounted = react.useRef(false);
-    const totalRows = serverSide ? serverTotalRows : table.getFilteredRowModel().rows.length;
+    const totalRows = serverSide ?
+        serverTotalRows :
+        (typeof table.getFilteredRowModel === 'function' ? table.getFilteredRowModel() : table.getCoreRowModel()).rows.length;
     react.useEffect(() => {
         if (mounted.current) {
             onSortingChange === null || onSortingChange === void 0 ? void 0 : onSortingChange(sortingState);
@@ -323,13 +451,15 @@ const CDataGrid = react.forwardRef((props, ref) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [columnFiltersState, globalFilterState]);
     react.useEffect(() => {
-        if (mounted.current) {
+        if (mounted.current && typeof table.getSelectedRowModel === 'function') {
             onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(rowSelectionState, table.getSelectedRowModel().rows.map(row => row.original));
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [rowSelectionState]);
+    // No onPaginationChange under infinite scroll — pagination is internal
+    // there (no widget, not user-adjustable); onDataLoad is the page signal.
     react.useEffect(() => {
-        if (mounted.current) {
+        if (mounted.current && !infiniteScroll) {
             onPaginationChange === null || onPaginationChange === void 0 ? void 0 : onPaginationChange(paginationState);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -374,11 +504,17 @@ const CDataGrid = react.forwardRef((props, ref) => {
         // reshuffles rows would make it point at an arbitrary one. An in-flight
         // edit stops (commit) first. A pending focus request marks an intentional
         // navigation (PageUp/PageDown page flip) - keep the cell it just set.
-        const signature = JSON.stringify([
-            sortingState, columnFiltersState,
-            globalFilterState !== null && globalFilterState !== void 0 ? globalFilterState : '',
-            paginationState.pageIndex, paginationState.pageSize
-        ]);
+        // Infinite scroll is the exception: its page bumps only append, so every
+        // row already on screen keeps its index and its focus.
+        const signature = JSON.stringify(infiniteScroll ?
+            [sortingState, columnFiltersState, globalFilterState !== null && globalFilterState !== void 0 ? globalFilterState : ''] :
+            [
+                sortingState,
+                columnFiltersState,
+                globalFilterState !== null && globalFilterState !== void 0 ? globalFilterState : '',
+                paginationState.pageIndex,
+                paginationState.pageSize
+            ]);
         if (rowSetSignatureRef.current === signature) {
             return;
         }
@@ -389,6 +525,7 @@ const CDataGrid = react.forwardRef((props, ref) => {
                 setActiveCell(null);
             }
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [sortingState, columnFiltersState, globalFilterState, paginationState]);
     react.useEffect(() => {
         mounted.current = true;
@@ -400,9 +537,31 @@ const CDataGrid = react.forwardRef((props, ref) => {
     }, []);
     const hasCustomFilterRow = columnFilters && columns$1.some(column => column.filter && column.filterable !== false);
     const headerRowCount = hasCustomFilterRow ? 2 : 1;
-    const position = (_p = paginationOptions.position) !== null && _p !== void 0 ? _p : 'bottom';
+    const position = (_q = paginationOptions.position) !== null && _q !== void 0 ? _q : 'bottom';
     const rowCount = table.getRowModel().rows.length;
+    const appending = Boolean(infiniteScroll) && serverItems.length > 0;
+    const loadMore = () => {
+        if (loadMorePendingRef.current || rowCount === 0 || rowCount >= totalRows) {
+            return;
+        }
+        loadMorePendingRef.current = true;
+        setPaginationState(previous => ({ ...previous, pageIndex: previous.pageIndex + 1 }));
+    };
     const visibleColumnIds = columns.visibleColumns(table, columns$1).map(column => column.key);
+    // The columns the selection's column indexes address, with the formatter
+    // each cell displays through — a copied date pastes as the date on screen.
+    const clipboardColumns = () => columns.visibleColumns(table, columns$1).map(column => ({ id: column.key, formatter: column.formatter }));
+    // Prints every sorted and filtered row, not the virtual window or the
+    // current page: the grid renders a plain complete table, prints it, and
+    // throws it away.
+    const printGridTable = () => print.printGrid(table, columns.visibleColumns(table, columns$1).map(column => {
+        var _a;
+        return ({
+            id: column.key,
+            label: (_a = column.label) !== null && _a !== void 0 ? _a : column.key,
+            formatter: column.formatter
+        });
+    }), { title: printTitle });
     const activeCellContext = () => {
         var _a;
         return ({
@@ -411,7 +570,8 @@ const CDataGrid = react.forwardRef((props, ref) => {
             pageStep: paginationEnabled ?
                 paginationState.pageSize :
                 Math.max(1, Math.floor(((_a = viewportElement === null || viewportElement === void 0 ? void 0 : viewportElement.clientHeight) !== null && _a !== void 0 ? _a : 0) / rowHeight) || rowCount),
-            paginated: paginationEnabled
+            paginated: paginationEnabled,
+            rtl: direction.isElementRTL(rootRef.current)
         });
     };
     // Clamped for rendering only - the state stays as set and re-clamps as the
@@ -455,6 +615,14 @@ const CDataGrid = react.forwardRef((props, ref) => {
         var _a;
         focusRequestRef.current = cell;
         setActiveCell(cell);
+        // The active cell is the grid's single focus owner; cell selection follows
+        // it rather than keeping a second anchor of its own.
+        if (cellSelection && cell.rowIndex >= 0) {
+            const row = table.getRowModel().rows[cell.rowIndex];
+            if (row) {
+                table.setFocusedCell(row.id, cell.columnId);
+            }
+        }
         if (virtualizationEnabled && cell.rowIndex >= 0) {
             // No-op when the row is already in view (align: auto); otherwise the
             // focus request stays pending until the row renders.
@@ -742,7 +910,7 @@ const CDataGrid = react.forwardRef((props, ref) => {
         }
     };
     const handleNavigationKeydown = (event) => {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         if (!cellNavigationEnabled) {
             return;
         }
@@ -836,11 +1004,37 @@ const CDataGrid = react.forwardRef((props, ref) => {
             }
             return;
         }
+        if (cellSelection && (event.ctrlKey || event.metaKey) && found.cell.rowIndex >= 0) {
+            const key = event.key.toLowerCase();
+            if (key === 'a') {
+                event.preventDefault();
+                table.selectAllCells();
+                return;
+            }
+            if (key === 'c') {
+                event.preventDefault();
+                clipboard.copyCellSelection(table, clipboardColumns()).then(text => {
+                    if (text !== '') {
+                        onCellCopy === null || onCellCopy === void 0 ? void 0 : onCellCopy({ text });
+                    }
+                }, () => { });
+                return;
+            }
+        }
         const result = activeCell.resolveNavigation(event.key, event.ctrlKey || event.metaKey, found.cell, activeCellContext());
         if (!result) {
             return;
         }
         event.preventDefault();
+        // Shift+arrow grows the range from its anchor and leaves focus put; a
+        // plain arrow moves focus and collapses the range to the new cell.
+        if (cellSelection && found.cell.rowIndex >= 0 && result.cell.rowIndex >= 0) {
+            const direction$1 = CELL_SELECTION_DIRECTIONS[direction.isElementRTL(rootRef.current) ? ((_e = INVERTED_ARROWS[event.key]) !== null && _e !== void 0 ? _e : event.key) : event.key];
+            if (event.shiftKey && direction$1) {
+                table.extendCellSelection(direction$1);
+                return;
+            }
+        }
         if (result.pageDelta === 1 && table.getCanNextPage()) {
             table.nextPage();
         }
@@ -862,9 +1056,9 @@ const CDataGrid = react.forwardRef((props, ref) => {
         jsxRuntime.jsx(EmptySlot, { table: table, labels: mergedLabels }) :
         (loadFailed ? mergedLabels.loadError : empty);
     const editingConfig = editingCell ?
-        (_q = columns$1.find(column => column.key === editingCell.columnId)) !== null && _q !== void 0 ? _q : null :
+        (_r = columns$1.find(column => column.key === editingCell.columnId)) !== null && _r !== void 0 ? _r : null :
         null;
-    const EditorComponent = (_r = editingConfig === null || editingConfig === void 0 ? void 0 : editingConfig.editor) !== null && _r !== void 0 ? _r : CDataGridCellEditor.CDataGridCellEditor;
+    const EditorComponent = (_s = editingConfig === null || editingConfig === void 0 ? void 0 : editingConfig.editor) !== null && _s !== void 0 ? _s : CDataGridCellEditor.CDataGridCellEditor;
     const editorSession = editingCell && editingConfig ?
         {
             rowId: editingCell.rowId,
@@ -883,9 +1077,10 @@ const CDataGrid = react.forwardRef((props, ref) => {
             onHidden: () => stopEditingRef.current({ commit: true, force: true })
         } :
         null;
-    return (jsxRuntime.jsxs("div", { className: `data-grid${sizingEnabled ? ' data-grid-resizable' : ''}${pinningEnabled ? ' data-grid-pinned' : ''}${className ? ` ${className}` : ''}`, "data-coreui-sorter-visibility": sorterVisibility || undefined, ref: setRootRef, ...rest, children: [jsxRuntime.jsx("div", { className: "visually-hidden", "aria-live": "polite", children: announcement }), ToolbarSlot ?
+    return (jsxRuntime.jsxs("div", { className: `data-grid${autoRowHeight && virtualizationEnabled ? ' data-grid-auto-row-height' : ''}${sizingEnabled ? ' data-grid-resizable' : ''}${pinningEnabled ? ' data-grid-pinned' : ''}${className ? ` ${className}` : ''}`, "data-coreui-sorter-visibility": sorterVisibility || undefined, ref: setRootRef, ...rest, children: [jsxRuntime.jsx("div", { className: "visually-hidden", "aria-live": "polite", children: announcement }), ToolbarSlot ?
                 jsxRuntime.jsx(ToolbarSlot, { table: table, labels: mergedLabels }) :
-                (resolvedToolbar.columns || resolvedToolbar.export || resolvedToolbar.search || resolvedToolbar.history) && (jsxRuntime.jsx(CDataGridToolbar.CDataGridToolbar, { columns: columns$1, columnsIcon: toolbarColumnsIcon, container: rootRef, export: resolvedToolbar.export, exportIcon: toolbarExportIcon, exportOptions: resolvedToolbar.exportOptions, initialVisibility: initialColumnVisibility.current, labels: mergedLabels, canRedo: canRedo, canUndo: canUndo, onRedo: redo, onUndo: undo, redoIcon: toolbarRedoIcon, search: resolvedToolbar.search, searchValue: globalFilterState !== null && globalFilterState !== void 0 ? globalFilterState : '', showColumns: resolvedToolbar.columns, showHistory: resolvedToolbar.history, undoIcon: toolbarUndoIcon, table: table })), paginationEnabled && (position === 'top' || position === 'both') && paginationElement('top'), jsxRuntime.jsxs("div", { className: "data-grid-viewport", ref: setViewportElement, ...(serverSide && { 'aria-busy': loading }), ...(cellNavigationEnabled && {
+                (resolvedToolbar.columns || resolvedToolbar.export || resolvedToolbar.print ||
+                    resolvedToolbar.search || resolvedToolbar.history) && (jsxRuntime.jsx(CDataGridToolbar.CDataGridToolbar, { columns: columns$1, columnsIcon: toolbarColumnsIcon, container: rootRef, export: resolvedToolbar.export, exportIcon: toolbarExportIcon, exportOptions: resolvedToolbar.exportOptions, initialVisibility: initialColumnVisibility.current, labels: mergedLabels, canRedo: canRedo, canUndo: canUndo, onPrint: printGridTable, onRedo: redo, onUndo: undo, print: resolvedToolbar.print, printIcon: toolbarPrintIcon, redoIcon: toolbarRedoIcon, search: resolvedToolbar.search, searchValue: globalFilterState !== null && globalFilterState !== void 0 ? globalFilterState : '', showColumns: resolvedToolbar.columns, showHistory: resolvedToolbar.history, undoIcon: toolbarUndoIcon, table: table })), paginationEnabled && (position === 'top' || position === 'both') && paginationElement('top'), jsxRuntime.jsxs("div", { className: "data-grid-viewport", ref: setViewportElement, ...(serverSide && { 'aria-busy': loading }), ...(cellNavigationEnabled && {
                     // Focus parks here when the focused row is recycled out of the
                     // window; the keydown fallback then scrolls the active cell back.
                     tabIndex: -1,
@@ -895,7 +1090,7 @@ const CDataGrid = react.forwardRef((props, ref) => {
                 }), ...(editing && { onDoubleClick: handleEditingDoubleClick }), children: [jsxRuntime.jsxs("table", { className: "table", "aria-rowcount": headerRowCount + totalRows, ...(cellNavigationEnabled && {
                             role: 'grid',
                             'aria-colcount': visibleColumnIds.length + (selectionEnabled ? 1 : 0)
-                        }), children: [jsxRuntime.jsx(CDataGridHeader.CDataGridHeader, { cellNavigation: cellNavigationEnabled, columnFilters: columnFilters, columns: columns$1, draggable: Boolean(columnOrder), icons: menuIcons, isFilterable: isColumnFilterable, isResizable: isColumnResizable, isSortable: isColumnSortable, labels: mergedLabels, menu: Boolean(columnMenu), menuBuilder: menuBuilder, menuContainer: rootRef, pinning: pinningEnabled, resizable: sizingEnabled, selectAll: selectionEnabled && selectionOptions.selectAll !== false, selection: selectionEnabled, tabStop: tabStop, table: table, visibility: Boolean(columnVisibility) }), jsxRuntime.jsx(CDataGridBody.CDataGridBody, { cellNavigation: cellNavigationEnabled, columns: columns$1, containsFocusRef: containsFocusRef, editorSession: editorSession, empty: emptyContent, focusRequestRef: focusRequestRef, headerRowCount: headerRowCount, labels: mergedLabels, overscan: overscan, pinning: pinningEnabled, rowHeight: rowHeight, rowIndexOffset: paginationEnabled ? paginationState.pageIndex * paginationState.pageSize : 0, scrollElement: viewportElement, scrollToIndexRef: scrollToIndexRef, selection: selectionEnabled, tabStop: tabStop, table: table, virtualization: virtualizationEnabled })] }), serverSide && (jsxRuntime.jsx("div", { className: "data-grid-loading", hidden: !loading, children: jsxRuntime.jsx("div", { className: "spinner-border", role: "status", children: jsxRuntime.jsx("span", { className: "visually-hidden", children: mergedLabels.loading }) }) }))] }), (editorSession === null || editorSession === void 0 ? void 0 : editorSession.popup) && (jsxRuntime.jsx("div", { className: "data-grid-editor-popup", style: editorPopupStyle !== null && editorPopupStyle !== void 0 ? editorPopupStyle : undefined, onBlur: editorSession.onBlur, onKeyDown: handleNavigationKeydown, children: editorSession.render() })), paginationEnabled && (position === 'bottom' || position === 'both') && paginationElement('bottom')] }));
+                        }), children: [jsxRuntime.jsx(CDataGridHeader.CDataGridHeader, { cellNavigation: cellNavigationEnabled, columnFilters: columnFilters, columns: columns$1, draggable: Boolean(columnOrder), icons: menuIcons, isFilterable: isColumnFilterable, isResizable: isColumnResizable, isSortable: isColumnSortable, labels: mergedLabels, menu: Boolean(columnMenu), menuBuilder: menuBuilder, menuContainer: rootRef, pinning: pinningEnabled, resizable: sizingEnabled, rowOrder: rowOrder, selectAll: selectionEnabled && selectionOptions.selectAll !== false, selection: selectionEnabled, tabStop: tabStop, table: table, visibility: Boolean(columnVisibility) }), jsxRuntime.jsx(CDataGridBody.CDataGridBody, { cellNavigation: cellNavigationEnabled, columns: columns$1, containsFocusRef: containsFocusRef, editorSession: editorSession, empty: emptyContent, focusRequestRef: focusRequestRef, headerRowCount: headerRowCount, labels: mergedLabels, loadMoreThreshold: infiniteScroll ? (_t = infiniteOptions.threshold) !== null && _t !== void 0 ? _t : overscan : null, onLoadMore: loadMore, overscan: overscan, pinning: pinningEnabled, autoRowHeight: autoRowHeight && virtualizationEnabled, rowHeight: rowHeight, cellSelection: cellSelection, rowHandleIcon: rowHandleIcon, rowIndexOffset: paginationEnabled ? paginationState.pageIndex * paginationState.pageSize : 0, rowOrder: rowOrder, scrollElement: viewportElement, scrollToIndexRef: scrollToIndexRef, selection: selectionEnabled, tabStop: tabStop, table: table, virtualization: virtualizationEnabled })] }), serverSide && (jsxRuntime.jsx("div", { className: "data-grid-loading", hidden: !loading || appending, children: jsxRuntime.jsx("div", { className: "spinner-border", role: "status", children: jsxRuntime.jsx("span", { className: "visually-hidden", children: mergedLabels.loading }) }) })), Boolean(infiniteScroll) && (jsxRuntime.jsx("div", { className: "data-grid-loading-more", hidden: !loading || !appending, children: jsxRuntime.jsx("div", { className: "spinner-border", role: "status", children: jsxRuntime.jsx("span", { className: "visually-hidden", children: mergedLabels.loading }) }) }))] }), (editorSession === null || editorSession === void 0 ? void 0 : editorSession.popup) && (jsxRuntime.jsx("div", { className: "data-grid-editor-popup", style: editorPopupStyle !== null && editorPopupStyle !== void 0 ? editorPopupStyle : undefined, onBlur: editorSession.onBlur, onKeyDown: handleNavigationKeydown, children: editorSession.render() })), paginationEnabled && (position === 'bottom' || position === 'both') && paginationElement('bottom')] }));
 });
 CDataGrid.displayName = 'CDataGrid';