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

package/dist/esm/CDataGrid.mjs

@@ -1,6 +1,10 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { evaluateColumnFilter } from '@coreui/data-grid/filters';
-import { useReactTable, getPaginationRowModel, getSortedRowModel, getFilteredRowModel, getFacetedUniqueValues, getFacetedRowModel, getCoreRowModel } from '@tanstack/react-table';
+import { copyCellSelection } from '@coreui/data-grid/clipboard';
+import { printGrid } from '@coreui/data-grid/print';
+import { createColumnDragController, createRowDragController } from '@coreui/data-grid/drag';
+import { assertFeatureCoverage } from '@coreui/data-grid/validate';
+import { useTable } from '@tanstack/react-table';
 import { forwardRef, useMemo, useRef, useState, useCallback, useEffect } from 'react';
 import { clampActiveCell, resolveNavigation } from './active-cell.mjs';
 import { CDataGridBody } from './CDataGridBody.mjs';
@@ -8,8 +12,9 @@ import { CDataGridCellEditor } from './CDataGridCellEditor.mjs';
 import { CDataGridHeader } from './CDataGridHeader.mjs';
 import { CDataGridPagination } from './CDataGridPagination.mjs';
 import { CDataGridToolbar } from './CDataGridToolbar.mjs';
-import { visibleColumns } from './columns.mjs';
-import { DEFAULT_COLUMN_MENU_ICON, DEFAULT_FILTER_ICON, DEFAULT_HIDE_COLUMN_ICON, DEFAULT_MOVE_LEFT_ICON, DEFAULT_MOVE_RIGHT_ICON, DEFAULT_PIN_LEFT_ICON, DEFAULT_PIN_RIGHT_ICON, DEFAULT_SORT_ASCENDING_ICON, DEFAULT_SORT_DESCENDING_ICON, DEFAULT_SORT_NEUTRAL_ICON, DEFAULT_TOOLBAR_COLUMNS_ICON, DEFAULT_TOOLBAR_EXPORT_ICON, DEFAULT_TOOLBAR_REDO_ICON, DEFAULT_TOOLBAR_UNDO_ICON, DEFAULT_UNPIN_ICON } from './icons.mjs';
+import { reorderColumn, canReorderColumn, visibleColumns } from './columns.mjs';
+import { dataGridFeatures } from './features.mjs';
+import { DEFAULT_COLUMN_MENU_ICON, DEFAULT_FILTER_ICON, DEFAULT_HIDE_COLUMN_ICON, DEFAULT_MOVE_START_ICON, DEFAULT_MOVE_END_ICON, DEFAULT_PIN_START_ICON, DEFAULT_PIN_END_ICON, DEFAULT_ROW_HANDLE_ICON, DEFAULT_SORT_ASCENDING_ICON, DEFAULT_SORT_DESCENDING_ICON, DEFAULT_SORT_NEUTRAL_ICON, DEFAULT_TOOLBAR_COLUMNS_ICON, DEFAULT_TOOLBAR_EXPORT_ICON, DEFAULT_TOOLBAR_PRINT_ICON, DEFAULT_TOOLBAR_REDO_ICON, DEFAULT_TOOLBAR_UNDO_ICON, DEFAULT_UNPIN_ICON } from './icons.mjs';
 import { DEFAULT_LABELS, interpolate } from '@coreui/data-grid/labels';
 import { resolveToolbar } from './toolbar.mjs';
 import { createTooltip } from './tooltip.mjs';
@@ -17,6 +22,8 @@ import { createTooltip } from './tooltip.mjs';
 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;
@@ -29,6 +36,12 @@ const readPersistedState = (stateKey) => {
         return null;
     }
 };
+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.
@@ -41,17 +54,17 @@ const toTanStackFilterFn = (column) => {
     return (row, columnId, filterValue) => evaluateColumnFilter(row.getValue(columnId), filterValue, column.filterType);
 };
 const CDataGrid = 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 = DEFAULT_COLUMN_MENU_ICON, columnOrder = false, columnPinning = false, columnSizing = false, columnVisibility = false, columns, dataProvider, editing = false, empty = 'No items found', filterIcon = DEFAULT_FILTER_ICON, globalFilter = false, hideColumnIcon = DEFAULT_HIDE_COLUMN_ICON, history = false, itemKey, items = EMPTY_ITEMS, labels, moveLeftIcon = DEFAULT_MOVE_LEFT_ICON, moveRightIcon = DEFAULT_MOVE_RIGHT_ICON, onDataError, onDataLoad, onEditCancel, onEditCommit, onEditStart, onFilterChange, onOrderChange, onPaginationChange, onPinningChange, onSelectionChange, onSizingChange, onSortingChange, onVisibilityChange, overscan = 10, pagination = false, pinLeftIcon = DEFAULT_PIN_LEFT_ICON, pinRightIcon = DEFAULT_PIN_RIGHT_ICON, rowHeight = 44, rowSelection = false, slots, sortAscendingIcon = DEFAULT_SORT_ASCENDING_ICON, sortDescendingIcon = DEFAULT_SORT_DESCENDING_ICON, sortNeutralIcon = DEFAULT_SORT_NEUTRAL_ICON, sorterVisibility, sorting = true, stateKey, tableRef, toolbar = false, toolbarColumnsIcon = DEFAULT_TOOLBAR_COLUMNS_ICON, toolbarExportIcon = DEFAULT_TOOLBAR_EXPORT_ICON, toolbarRedoIcon = DEFAULT_TOOLBAR_REDO_ICON, toolbarUndoIcon = DEFAULT_TOOLBAR_UNDO_ICON, unpinIcon = 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 = DEFAULT_COLUMN_MENU_ICON, columnOrder = false, columnPinning = false, columnSizing = false, columnVisibility = false, columns, dataProvider, editing = false, empty = 'No items found', features = dataGridFeatures, filterIcon = DEFAULT_FILTER_ICON, globalFilter = false, hideColumnIcon = DEFAULT_HIDE_COLUMN_ICON, history = false, infiniteScroll = false, itemKey, items = EMPTY_ITEMS, labels, moveStartIcon = DEFAULT_MOVE_START_ICON, moveEndIcon = DEFAULT_MOVE_END_ICON, onDataError, onDataLoad, onEditCancel, onEditCommit, onEditStart, onFilterChange, onOrderChange, onPaginationChange, onPinningChange, onSelectionChange, onRowOrderChange, onCellCopy, onSizingChange, onSortingChange, onVisibilityChange, overscan = 10, pagination = false, pinStartIcon = DEFAULT_PIN_START_ICON, pinEndIcon = DEFAULT_PIN_END_ICON, rowHandleIcon = DEFAULT_ROW_HANDLE_ICON, rowHeight = 44, rowOrder = false, rowSelection = false, slots, sortAscendingIcon = DEFAULT_SORT_ASCENDING_ICON, sortDescendingIcon = DEFAULT_SORT_DESCENDING_ICON, sortNeutralIcon = DEFAULT_SORT_NEUTRAL_ICON, sorterVisibility, sorting = true, stateKey, tableRef, toolbar = false, toolbarColumnsIcon = DEFAULT_TOOLBAR_COLUMNS_ICON, printTitle, toolbarExportIcon = DEFAULT_TOOLBAR_EXPORT_ICON, toolbarPrintIcon = DEFAULT_TOOLBAR_PRINT_ICON, toolbarRedoIcon = DEFAULT_TOOLBAR_REDO_ICON, toolbarUndoIcon = DEFAULT_TOOLBAR_UNDO_ICON, unpinIcon = DEFAULT_UNPIN_ICON, virtualization = true, ...rest } = props;
     const mergedLabels = useMemo(() => ({ ...DEFAULT_LABELS, ...labels }), [labels]);
     const menuIcons = 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,
@@ -60,18 +73,19 @@ const CDataGrid = 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 : {};
@@ -80,9 +94,23 @@ const CDataGrid = 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 = resolveToolbar({
@@ -105,7 +133,11 @@ const CDataGrid = forwardRef((props, ref) => {
     const [globalFilterState, setGlobalFilterState] = useState((persisted === null || persisted === void 0 ? void 0 : persisted.globalFilter) === undefined || persisted.globalFilter === '' ? undefined : persisted.globalFilter);
     const [rowSelectionState, setRowSelectionState] = useState((_c = persisted === null || persisted === void 0 ? void 0 : persisted.rowSelection) !== null && _c !== void 0 ? _c : {});
     const [columnSizingState, setColumnSizingState] = useState((_d = persisted === null || persisted === void 0 ? void 0 : persisted.columnSizing) !== null && _d !== void 0 ? _d : {});
-    const [columnPinningState, setColumnPinningState] = useState((_e = persisted === null || persisted === void 0 ? void 0 : persisted.columnPinning) !== null && _e !== void 0 ? _e : (typeof columnPinning === 'object' ? columnPinning : {}));
+    const [columnPinningState, setColumnPinningState] = 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] = useState((_f = persisted === null || persisted === void 0 ? void 0 : persisted.columnOrder) !== null && _f !== void 0 ? _f : (Array.isArray(columnOrder) ? columnOrder : []));
     const [columnVisibilityState, setColumnVisibilityState] = 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
@@ -113,7 +145,13 @@ const CDataGrid = forwardRef((props, ref) => {
     const initialColumnVisibility = useRef(typeof columnVisibility === 'object' ? columnVisibility : {});
     const [paginationState, setPaginationState] = 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, setActiveCell] = useState(null);
     // A pending focus request survives renders until the target cell exists in
@@ -163,14 +201,28 @@ const CDataGrid = 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, widthsEnabled]);
-    const table = useReactTable({
+    assertFeatureCoverage('data-grid', features, {
+        cellSelection,
+        columnFilters,
+        columnOrder: Boolean(columnOrder),
+        columnPinning: pinningEnabled,
+        columnSizing: sizingEnabled,
+        columnVisibility: Boolean(columnVisibility),
+        globalFilter: resolvedToolbar.search,
+        pagination: paginated,
+        rowSelection: selectionEnabled,
+        selectFilters: columnFilters && columns.some(column => column.filterType === 'select'),
+        sorting: Boolean(sorting)
+    });
+    const table = useTable({
         columns: columnDefs,
-        columnResizeMode: (_o = sizingOptions.mode) !== null && _o !== void 0 ? _o : 'onChange',
+        columnResizeMode: (_p = sizingOptions.mode) !== null && _p !== void 0 ? _p : 'onChange',
         data: serverSide ? serverItems : items,
+        enableCellSelection: cellSelection,
         enableColumnFilters: columnFilters,
         enableColumnPinning: pinningEnabled,
         enableColumnResizing: sizingEnabled,
@@ -180,12 +232,10 @@ const CDataGrid = forwardRef((props, ref) => {
         enableRowSelection: selectionEnabled,
         enableSorting: Boolean(sorting),
         enableSortingRemoval: Boolean(sortingOptions.resetable),
-        getCoreRowModel: getCoreRowModel(),
-        // Faceting powers custom filter UIs (column.getFacetedUniqueValues()).
-        getFacetedRowModel: getFacetedRowModel(),
-        getFacetedUniqueValues: getFacetedUniqueValues(),
-        getFilteredRowModel: getFilteredRowModel(),
-        getSortedRowModel: 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,
         globalFilterFn: 'includesString',
         ...(serverSide && {
             manualFiltering: true,
@@ -193,7 +243,6 @@ const CDataGrid = forwardRef((props, ref) => {
             manualSorting: true,
             rowCount: serverTotalRows
         }),
-        ...(paginationEnabled && { getPaginationRowModel: getPaginationRowModel() }),
         ...(itemKey && { getRowId: itemKey }),
         onColumnFiltersChange: setColumnFiltersState,
         onColumnOrderChange: setColumnOrderState,
@@ -254,8 +303,68 @@ const CDataGrid = forwardRef((props, ref) => {
         const tooltip = createTooltip(rootRef.current);
         return () => tooltip.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 = useRef(table);
+    tableRefForDrag.current = table;
+    useEffect(() => {
+        const root = rootRef.current;
+        if (!columnOrder || !root) {
+            return;
+        }
+        const controller = createColumnDragController({
+            root,
+            getScrollElement: () => viewportElement,
+            canDrop: (sourceKey, targetKey) => canReorderColumn(tableRefForDrag.current, sourceKey, targetKey),
+            onReorder: (sourceKey, targetKey, after) => 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 = useRef({ items, rowIndexOffset: 0, onRowOrderChange });
+    rowOrderRef.current = {
+        items,
+        rowIndexOffset: paginationEnabled ? paginationState.pageIndex * paginationState.pageSize : 0,
+        onRowOrderChange
+    };
+    useEffect(() => {
+        const root = rootRef.current;
+        if (!rowOrder || !root) {
+            return;
+        }
+        const controller = 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 = useRef(0);
     const lastFilterKeyRef = 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 = useRef(false);
     useEffect(() => {
         if (!dataProvider) {
             return;
@@ -282,7 +391,14 @@ const CDataGrid = 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(interpolate(mergedLabels.resultsAnnouncement, { count: response.totalRows }));
@@ -292,7 +408,8 @@ const CDataGrid = 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);
@@ -307,7 +424,9 @@ const CDataGrid = forwardRef((props, ref) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [dataProvider, sortingState, columnFiltersState, globalFilterState, paginationState]);
     const mounted = useRef(false);
-    const totalRows = serverSide ? serverTotalRows : table.getFilteredRowModel().rows.length;
+    const totalRows = serverSide ?
+        serverTotalRows :
+        (typeof table.getFilteredRowModel === 'function' ? table.getFilteredRowModel() : table.getCoreRowModel()).rows.length;
     useEffect(() => {
         if (mounted.current) {
             onSortingChange === null || onSortingChange === void 0 ? void 0 : onSortingChange(sortingState);
@@ -321,13 +440,15 @@ const CDataGrid = forwardRef((props, ref) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [columnFiltersState, globalFilterState]);
     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.
     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
@@ -372,11 +493,17 @@ const CDataGrid = 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;
         }
@@ -387,6 +514,7 @@ const CDataGrid = forwardRef((props, ref) => {
                 setActiveCell(null);
             }
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [sortingState, columnFiltersState, globalFilterState, paginationState]);
     useEffect(() => {
         mounted.current = true;
@@ -398,9 +526,31 @@ const CDataGrid = forwardRef((props, ref) => {
     }, []);
     const hasCustomFilterRow = columnFilters && columns.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 = visibleColumns(table, columns).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 = () => visibleColumns(table, columns).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 = () => printGrid(table, visibleColumns(table, columns).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 ({
@@ -453,6 +603,14 @@ const CDataGrid = 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.
@@ -834,11 +992,37 @@ const CDataGrid = 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();
+                copyCellSelection(table, clipboardColumns()).then(text => {
+                    if (text !== '') {
+                        onCellCopy === null || onCellCopy === void 0 ? void 0 : onCellCopy({ text });
+                    }
+                }, () => { });
+                return;
+            }
+        }
         const result = 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 = CELL_SELECTION_DIRECTIONS[event.key];
+            if (event.shiftKey && direction) {
+                table.extendCellSelection(direction);
+                return;
+            }
+        }
         if (result.pageDelta === 1 && table.getCanNextPage()) {
             table.nextPage();
         }
@@ -860,9 +1044,9 @@ const CDataGrid = forwardRef((props, ref) => {
         jsx(EmptySlot, { table: table, labels: mergedLabels }) :
         (loadFailed ? mergedLabels.loadError : empty);
     const editingConfig = editingCell ?
-        (_q = columns.find(column => column.key === editingCell.columnId)) !== null && _q !== void 0 ? _q : null :
+        (_r = columns.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;
+    const EditorComponent = (_s = editingConfig === null || editingConfig === void 0 ? void 0 : editingConfig.editor) !== null && _s !== void 0 ? _s : CDataGridCellEditor;
     const editorSession = editingCell && editingConfig ?
         {
             rowId: editingCell.rowId,
@@ -881,9 +1065,10 @@ const CDataGrid = forwardRef((props, ref) => {
             onHidden: () => stopEditingRef.current({ commit: true, force: true })
         } :
         null;
-    return (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: [jsx("div", { className: "visually-hidden", "aria-live": "polite", children: announcement }), ToolbarSlot ?
+    return (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: [jsx("div", { className: "visually-hidden", "aria-live": "polite", children: announcement }), ToolbarSlot ?
                 jsx(ToolbarSlot, { table: table, labels: mergedLabels }) :
-                (resolvedToolbar.columns || resolvedToolbar.export || resolvedToolbar.search || resolvedToolbar.history) && (jsx(CDataGridToolbar, { columns: columns, 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'), jsxs("div", { className: "data-grid-viewport", ref: setViewportElement, ...(serverSide && { 'aria-busy': loading }), ...(cellNavigationEnabled && {
+                (resolvedToolbar.columns || resolvedToolbar.export || resolvedToolbar.print ||
+                    resolvedToolbar.search || resolvedToolbar.history) && (jsx(CDataGridToolbar, { columns: columns, 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'), 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,
@@ -893,7 +1078,7 @@ const CDataGrid = forwardRef((props, ref) => {
                 }), ...(editing && { onDoubleClick: handleEditingDoubleClick }), children: [jsxs("table", { className: "table", "aria-rowcount": headerRowCount + totalRows, ...(cellNavigationEnabled && {
                             role: 'grid',
                             'aria-colcount': visibleColumnIds.length + (selectionEnabled ? 1 : 0)
-                        }), children: [jsx(CDataGridHeader, { cellNavigation: cellNavigationEnabled, columnFilters: columnFilters, columns: columns, 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) }), jsx(CDataGridBody, { cellNavigation: cellNavigationEnabled, columns: columns, 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 && (jsx("div", { className: "data-grid-loading", hidden: !loading, children: jsx("div", { className: "spinner-border", role: "status", children: jsx("span", { className: "visually-hidden", children: mergedLabels.loading }) }) }))] }), (editorSession === null || editorSession === void 0 ? void 0 : editorSession.popup) && (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: [jsx(CDataGridHeader, { cellNavigation: cellNavigationEnabled, columnFilters: columnFilters, columns: columns, 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) }), jsx(CDataGridBody, { cellNavigation: cellNavigationEnabled, columns: columns, 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 && (jsx("div", { className: "data-grid-loading", hidden: !loading || appending, children: jsx("div", { className: "spinner-border", role: "status", children: jsx("span", { className: "visually-hidden", children: mergedLabels.loading }) }) })), Boolean(infiniteScroll) && (jsx("div", { className: "data-grid-loading-more", hidden: !loading || !appending, children: jsx("div", { className: "spinner-border", role: "status", children: jsx("span", { className: "visually-hidden", children: mergedLabels.loading }) }) }))] }), (editorSession === null || editorSession === void 0 ? void 0 : editorSession.popup) && (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';