@vuu-ui/vuu-table 2.1.19-beta.1 → 2.1.19-beta.2

package/src/useSelection.mjs

@@ -0,0 +1,101 @@
+import { deselectItem, dispatchMouseEvent, queryClosest, selectItem } from "@vuu-ui/vuu-utils";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { getRowElementByAriaIndex } from "./table-dom-utils.mjs";
+const orderedRowKeys = (activeRowIdentifier, newRowIdentifier, rangeSelect = false)=>{
+    if (!rangeSelect || !activeRowIdentifier) return [
+        newRowIdentifier.rowKey
+    ];
+    if (newRowIdentifier.rowIdx > activeRowIdentifier.rowIdx) return [
+        activeRowIdentifier.rowKey,
+        newRowIdentifier.rowKey
+    ];
+    return [
+        newRowIdentifier.rowKey,
+        activeRowIdentifier.rowKey
+    ];
+};
+const defaultSelectionKeys = [
+    "Enter",
+    " "
+];
+const useSelection = ({ allowSelectCheckboxRow, containerRef, dataSource, highlightedIndexRef, onSelect, onSelectionChange, selectionKeys = defaultSelectionKeys, selectionModel })=>{
+    const lastActiveRef = useRef(void 0);
+    const [allRowsSelected, setAllRowsSelected] = useState(false);
+    const selectionAllowed = "none" !== selectionModel && "checkbox-disabled" !== selectionModel;
+    const handleRowSelection = useCallback((selectedRowsCount)=>{
+        setAllRowsSelected((allSelected)=>allSelected && selectedRowsCount < dataSource.size ? false : allSelected);
+    }, [
+        dataSource.size
+    ]);
+    useEffect(()=>{
+        dataSource.on("row-selection", handleRowSelection);
+        return ()=>dataSource.removeListener("row-selection", handleRowSelection);
+    }, [
+        dataSource,
+        handleRowSelection
+    ]);
+    const isSelectionEvent = useCallback((evt)=>selectionKeys.includes(evt.key), [
+        selectionKeys
+    ]);
+    const handleRowClick = useCallback((e, dataRow, rangeSelect, keepExistingSelection)=>{
+        const { index: rowIdx, key: rowKey } = dataRow;
+        const { current: activeRowKey } = lastActiveRef;
+        const newRowIdentifier = {
+            rowIdx,
+            rowKey
+        };
+        if (dataRow.isSelected && "single-no-deselect" === selectionModel) return;
+        const selectOperation = dataRow.isSelected ? deselectItem : selectItem;
+        if ("checkbox" === selectionModel && true !== allowSelectCheckboxRow) {
+            const cell = queryClosest(e.target, ".vuuTableCell");
+            if (!cell?.querySelector(".vuuCheckboxRowSelector")) return;
+        }
+        const [fromRowKey, toRowKey] = orderedRowKeys(activeRowKey, newRowIdentifier, rangeSelect);
+        const selectRequest = selectOperation(selectionModel, fromRowKey, rangeSelect, keepExistingSelection, toRowKey);
+        lastActiveRef.current = newRowIdentifier;
+        if (selectRequest) {
+            onSelect?.(selectOperation === selectItem ? dataRow : null);
+            onSelectionChange?.(selectRequest);
+        }
+        if (allRowsSelected && selectOperation === deselectItem) setAllRowsSelected(false);
+    }, [
+        allRowsSelected,
+        allowSelectCheckboxRow,
+        onSelect,
+        onSelectionChange,
+        selectionModel
+    ]);
+    const handleKeyDown = useCallback((e)=>{
+        if (isSelectionEvent(e)) {
+            const { current: rowIndex } = highlightedIndexRef;
+            const { current: container } = containerRef;
+            if (void 0 !== rowIndex && -1 !== rowIndex && container) {
+                const rowEl = getRowElementByAriaIndex(container, rowIndex);
+                if (rowEl) dispatchMouseEvent(rowEl, "click");
+            }
+        }
+    }, [
+        containerRef,
+        highlightedIndexRef,
+        isSelectionEvent
+    ]);
+    const handleCheckboxColumnHeaderClick = useCallback(()=>{
+        setAllRowsSelected((allSelected)=>{
+            allSelected ? onSelectionChange({
+                type: "DESELECT_ALL"
+            }) : onSelectionChange({
+                type: "SELECT_ALL"
+            });
+            return !allSelected;
+        });
+    }, [
+        onSelectionChange
+    ]);
+    return {
+        allRowsSelected,
+        onCheckBoxColumnHeaderClick: handleCheckboxColumnHeaderClick,
+        onKeyDown: handleKeyDown,
+        onRowClick: selectionAllowed ? handleRowClick : void 0
+    };
+};
+export { useSelection };

package/src/useTable.mjs

@@ -0,0 +1,588 @@
+import { useColumnActions } from "@vuu-ui/vuu-table-extras";
+import { useDragDrop } from "@vuu-ui/vuu-ui-controls";
+import { getAllCellsInColumn, getAriaRowIndex, getPinStateFromElement, isGroupColumn, isJsonGroup, isValidNumber, logUnhandledMessage, metadataKeys, toggleOrApplySort, updateColumn, useEditSession, useLayoutEffectSkipFirst, useStableReference } from "@vuu-ui/vuu-utils";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCellBlockSelection } from "./cell-block/useCellBlockSelection.mjs";
+import { CellFocusState } from "./CellFocusState.mjs";
+import { updateTableConfig } from "./table-config.mjs";
+import { getHeaderCell } from "./table-dom-utils.mjs";
+import { useCellEditing } from "./useCellEditing.mjs";
+import { useCellFocus } from "./useCellFocus.mjs";
+import { useDataSource } from "./table-data-source/useDataSource.mjs";
+import { useKeyboardNavigation } from "./useKeyboardNavigation.mjs";
+import { useRowClassNameGenerators } from "./useRowClassNameGenerators.mjs";
+import { useSelection } from "./useSelection.mjs";
+import { useTableContextMenu } from "./useTableContextMenu.mjs";
+import { useTableModel } from "./useTableModel.mjs";
+import { useTableScroll } from "./useTableScroll.mjs";
+import { useTableViewport } from "./useTableViewport.mjs";
+const nullHeaderState = {
+    height: -1,
+    count: -1
+};
+const zeroHeaderState = {
+    height: 0,
+    count: 0
+};
+const { IS_EXPANDED: IS_EXPANDED, IS_LEAF: IS_LEAF } = metadataKeys;
+const NULL_DRAG_DROP = {
+    draggable: void 0,
+    onMouseDown: void 0
+};
+const useNullDragDrop = ()=>NULL_DRAG_DROP;
+const useTable = ({ allowCellBlockSelection, allowSelectCheckboxRow, allowDragDrop = false, autoSelectFirstRow, autoSelectRowKey, config, containerRef, dataSource, disableFocus, highlightedIndex: highlightedIndexProp, id, navigationStyle = "cell", onConfigChange, onDragStart, onDrop, onHighlight, onRowClick: onRowClickProp, onSelect, onSelectCellBlock, onSelectionChange, renderBufferSize = 0, revealSelected, rowHeight, scrollingApiRef, selectionModel, showColumnHeaders, showPaginationControls, size })=>{
+    const tableConfigRef = useRef(config);
+    const scrollTopRef = useRef(0);
+    const requestScrollRef = useRef(void 0);
+    useMemo(()=>{
+        tableConfigRef.current = config;
+    }, [
+        config
+    ]);
+    const editSession = useEditSession();
+    const initialState = useMemo(()=>new CellFocusState(), []);
+    const cellFocusStateRef = useRef(initialState);
+    const focusCellRef = useRef(void 0);
+    const [headerState, setHeaderState] = useState(showColumnHeaders ? nullHeaderState : zeroHeaderState);
+    const [rowCount, setRowCount] = useState(dataSource.size);
+    if (void 0 === dataSource) throw Error("no data source provided to Vuu Table");
+    const onDataRowcountChange = useCallback((size)=>{
+        setRowCount(size);
+    }, []);
+    const { selectionBookendWidth = 4 } = config;
+    const virtualContentHeight = rowHeight * rowCount;
+    const viewportBodyHeight = size.height - (-1 === headerState.height ? 0 : headerState.height);
+    const verticalScrollbarWidth = virtualContentHeight > viewportBodyHeight ? 10 : 0;
+    const availableWidth = size.width - (verticalScrollbarWidth + 2 * selectionBookendWidth);
+    const rowClassNameGenerator = useRowClassNameGenerators(config);
+    const useRowDragDrop = allowDragDrop ? useDragDrop : useNullDragDrop;
+    const { columns, dispatchTableModelAction, headings, tableAttributes, tableConfig } = useTableModel({
+        config,
+        dataSource,
+        selectionModel,
+        availableWidth
+    });
+    const columnsRef = useStableReference(columns);
+    useLayoutEffectSkipFirst(()=>{
+        dispatchTableModelAction({
+            availableWidth,
+            selectionModel,
+            type: "init",
+            tableConfig: tableConfigRef.current,
+            dataSource
+        });
+    }, [
+        availableWidth,
+        config,
+        dataSource,
+        dispatchTableModelAction,
+        selectionModel
+    ]);
+    const applyTableConfigChange = useCallback((config, changeType)=>{
+        dispatchTableModelAction({
+            availableWidth,
+            selectionModel,
+            type: "init",
+            tableConfig: config,
+            dataSource
+        });
+        tableConfigRef.current = config;
+        onConfigChange?.(config, changeType);
+    }, [
+        availableWidth,
+        dataSource,
+        dispatchTableModelAction,
+        onConfigChange,
+        selectionModel
+    ]);
+    const handleSelectionChange = useCallback((selectRequest)=>{
+        dataSource.select?.(selectRequest);
+        onSelectionChange?.(selectRequest);
+    }, [
+        dataSource,
+        onSelectionChange
+    ]);
+    const handleSelect = useCallback((dataRow)=>{
+        if (onSelect) onSelect(dataRow);
+    }, [
+        onSelect
+    ]);
+    const onSubscribed = useCallback(({ tableSchema })=>{
+        if (tableSchema) dispatchTableModelAction({
+            type: "setTableSchema",
+            tableSchema
+        });
+        else console.log("subscription message with no schema");
+    }, [
+        dispatchTableModelAction
+    ]);
+    const { getRowAtPosition, getRowOffset, setInSituRowOffset: viewportHookSetInSituRowOffset, setScrollTop: viewportHookSetScrollTop, ...viewportMeasurements } = useTableViewport({
+        columns,
+        headerHeight: headerState.height,
+        rowCount,
+        rowHeight,
+        selectionEndSize: selectionBookendWidth,
+        size: size,
+        showPaginationControls
+    });
+    const { dataRows, dataRowsRef, getSelectedRows, range, setRange } = useDataSource({
+        autoSelectFirstRow,
+        autoSelectRowKey,
+        dataSource,
+        renderBufferSize,
+        revealSelected,
+        onSelect: handleSelect,
+        onSizeChange: onDataRowcountChange,
+        onSubscribed,
+        selectionModel
+    });
+    const { requestScroll, scrollTop, ...scrollProps } = useTableScroll({
+        cellFocusStateRef,
+        columns,
+        getRowAtPosition,
+        rowHeight,
+        scrollingApiRef,
+        setRange,
+        showPaginationControls,
+        onVerticalScroll: viewportHookSetScrollTop,
+        onVerticalScrollInSitu: viewportHookSetInSituRowOffset,
+        viewportMeasurements
+    });
+    scrollTopRef.current = scrollTop;
+    requestScrollRef.current = requestScroll;
+    const handleConfigChange = useCallback((config, _range, confirmed, changes)=>{
+        const scrollSensitiveChanges = changes?.filterChanged || changes?.groupByChanged;
+        if (scrollSensitiveChanges && scrollTopRef.current > 0) {
+            setRange(range.reset);
+            requestScrollRef.current?.({
+                type: "scroll-top",
+                scrollPos: 0,
+                instant: true
+            });
+        }
+        dispatchTableModelAction({
+            type: "tableConfig",
+            ...config,
+            confirmed
+        });
+    }, [
+        dispatchTableModelAction,
+        range,
+        setRange
+    ]);
+    useEffect(()=>{
+        dataSource.on("config", handleConfigChange);
+        return ()=>{
+            dataSource.removeListener("config", handleConfigChange);
+        };
+    }, [
+        dataSource,
+        dispatchTableModelAction,
+        handleConfigChange
+    ]);
+    const removeColumn = useCallback((action)=>{
+        const { column } = action;
+        const newTableConfig = {
+            ...tableConfig,
+            columns: tableConfig.columns.filter((col)=>col.name !== column.name)
+        };
+        applyTableConfigChange(newTableConfig, {
+            type: "column-removed",
+            column
+        });
+    }, [
+        applyTableConfigChange,
+        tableConfig
+    ]);
+    const hideColumns = useCallback((action)=>{
+        const { columns } = action;
+        const hiddenColumns = columns.map((c)=>c.name);
+        const newTableConfig = {
+            ...tableConfig,
+            columns: tableConfig.columns.map((col)=>hiddenColumns.includes(col.name) ? {
+                    ...col,
+                    hidden: true
+                } : col)
+        };
+        applyTableConfigChange(newTableConfig, {
+            type: "columns-hidden",
+            columns
+        });
+    }, [
+        tableConfig,
+        applyTableConfigChange
+    ]);
+    const pinColumn = useCallback(({ column, pin })=>{
+        applyTableConfigChange({
+            ...tableConfig,
+            columns: updateColumn(tableConfig.columns, {
+                ...column,
+                pin
+            })
+        }, {
+            type: "column-pinned",
+            column
+        });
+    }, [
+        tableConfig,
+        applyTableConfigChange
+    ]);
+    const handleColumnDisplayAction = useCallback((action)=>{
+        const { type } = action;
+        switch(type){
+            case "hideColumn":
+                return hideColumns({
+                    type: "hideColumns",
+                    columns: [
+                        action.column
+                    ]
+                });
+            case "removeColumn":
+                return removeColumn({
+                    type: "removeColumn",
+                    column: action.column
+                });
+            case "pinColumn":
+                return pinColumn(action);
+            default:
+                logUnhandledMessage(type, "[vuu-table] handleColumnDisplayAction");
+        }
+    }, [
+        hideColumns,
+        pinColumn,
+        removeColumn
+    ]);
+    const handleColumnAction = useColumnActions({
+        dataSource,
+        onColumnDisplayAction: handleColumnDisplayAction
+    });
+    const handleSort = useCallback((column, extendSort = false, sortType)=>{
+        if (dataSource) dataSource.sort = toggleOrApplySort(dataSource.sort, column, extendSort, sortType);
+    }, [
+        dataSource
+    ]);
+    const cellResizeState = useRef(void 0);
+    const onResizeColumn = useCallback((phase, columnName, width = 0)=>{
+        if ("resize" === phase) {
+            cellResizeState.current?.cells.forEach((cell)=>{
+                cell.style.width = `${width}px`;
+            });
+            if (cellResizeState.current?.pinState) {
+                const { pinState, startWidth } = cellResizeState.current;
+                const { cell: pinnedCell, pinnedWidth } = pinState;
+                const diff = width - startWidth;
+                if (pinState.pinnedCells) pinState.pinnedCells.forEach((cell)=>{
+                    cell.style.left = `${parseInt(cell.style.left) + diff}px`;
+                });
+                pinnedCell.style.setProperty("--pin-width", `${pinnedWidth + diff}px`);
+            }
+        } else {
+            const column = columnsRef.current.find((column)=>column.name === columnName);
+            if (column) {
+                if ("end" === phase) {
+                    cellResizeState.current = void 0;
+                    if (isValidNumber(width)) {
+                        dispatchTableModelAction({
+                            type: "resizeColumn",
+                            phase,
+                            column,
+                            width
+                        });
+                        onConfigChange?.(updateTableConfig(tableConfig, {
+                            type: "col-size",
+                            column,
+                            columns,
+                            width
+                        }), {
+                            type: "column-resized",
+                            column,
+                            width
+                        });
+                    }
+                } else if ("begin" === phase) {
+                    cellResizeState.current = {
+                        cells: getAllCellsInColumn(containerRef.current, column.ariaColIndex),
+                        startWidth: column.width
+                    };
+                    const [headerCell] = cellResizeState.current.cells;
+                    cellResizeState.current.pinState = getPinStateFromElement(headerCell);
+                    dispatchTableModelAction({
+                        type: "resizeColumn",
+                        phase,
+                        column,
+                        width
+                    });
+                    onConfigChange?.(updateTableConfig(tableConfig, {
+                        type: "col-size",
+                        column,
+                        columns,
+                        width
+                    }), {
+                        type: "column-resized",
+                        column,
+                        width
+                    });
+                }
+            } else throw Error(`useDataTable.handleColumnResize, column ${columnName} not found`);
+        }
+    }, [
+        columnsRef,
+        dispatchTableModelAction,
+        onConfigChange,
+        tableConfig,
+        columns,
+        containerRef
+    ]);
+    const onToggleGroup = useCallback((dataRow, column)=>{
+        const isJson = isJsonGroup(column, dataRow);
+        const { key } = dataRow;
+        if (dataRow.isExpanded) {
+            dataSource.closeTreeNode(key, true);
+            if (isJson) {
+                const idx = columns.indexOf(column);
+                const rows = dataSource.getRowsAtDepth?.(idx + 1);
+                if (rows && !rows.some((row)=>row[IS_EXPANDED] || row[IS_LEAF])) dispatchTableModelAction({
+                    type: "hideColumns",
+                    columns: columns.slice(idx + 2)
+                });
+            }
+        } else {
+            dataSource.openTreeNode(key);
+            if (isJson) {
+                const childRows = dataSource.getChildRows?.(key);
+                const idx = columns.indexOf(column) + 1;
+                const columnsToShow = [
+                    columns[idx]
+                ];
+                if (childRows && childRows.some((row)=>row[IS_LEAF])) columnsToShow.push(columns[idx + 1]);
+                if (columnsToShow.some((col)=>col.hidden)) dispatchTableModelAction({
+                    type: "showColumns",
+                    columns: columnsToShow
+                });
+            }
+        }
+    }, [
+        columns,
+        dataSource,
+        dispatchTableModelAction
+    ]);
+    const handleToggleGroup = useCallback((treeNodeOperation, rowIdx)=>{
+        if ("expand" === treeNodeOperation) dataSource.openTreeNode(rowIdx);
+        else dataSource.closeTreeNode(rowIdx);
+    }, [
+        dataSource
+    ]);
+    const { focusCell, focusCellPlaceholderKeyDown, focusCellPlaceholderRef, setTableBodyRef: tableBodyRef } = useCellFocus({
+        cellFocusStateRef,
+        containerRef,
+        disableFocus,
+        requestScroll
+    });
+    focusCellRef.current = focusCell;
+    const columnCount = columns.filter((c)=>true !== c.hidden).length;
+    const { highlightedIndexRef, navigateCell: navigate, onFocus: navigationFocus, onKeyDown: navigationKeyDown, ...containerProps } = useKeyboardNavigation({
+        cellFocusStateRef,
+        columnCount,
+        containerRef,
+        disableFocus,
+        editSessionInProgress: editSession?.inEditMode,
+        focusCell,
+        headerCount: headerState.count,
+        highlightedIndex: highlightedIndexProp,
+        navigationStyle,
+        requestScroll,
+        rowCount,
+        onHighlight,
+        onToggleGroup: handleToggleGroup,
+        viewportRange: range,
+        viewportRowCount: viewportMeasurements.rowCount
+    });
+    const { onBlur: editingBlur, onDoubleClick: editingDoubleClick, onKeyDown: editingKeyDown, onFocus: editingFocus } = useCellEditing({
+        navigate
+    });
+    const handleFocus = useCallback((e)=>{
+        navigationFocus();
+        if (!e.defaultPrevented) editingFocus(e);
+    }, [
+        editingFocus,
+        navigationFocus
+    ]);
+    const onContextMenu = useTableContextMenu({
+        columns,
+        dataRows,
+        dataSource,
+        getSelectedRows,
+        headerCount: headerState.count
+    });
+    const onMoveGroupColumn = useCallback((columns)=>{
+        dataSource.groupBy = columns.map((col)=>col.name);
+    }, [
+        dataSource
+    ]);
+    const onRemoveGroupColumn = useCallback((column)=>{
+        if (isGroupColumn(column)) dataSource.groupBy = [];
+        else if (dataSource && dataSource.groupBy?.includes(column.name)) dataSource.groupBy = dataSource.groupBy.filter((columnName)=>columnName !== column.name);
+    }, [
+        dataSource
+    ]);
+    const { allRowsSelected, onCheckBoxColumnHeaderClick, onKeyDown: selectionHookKeyDown, onRowClick: selectionHookOnRowClick } = useSelection({
+        allowSelectCheckboxRow,
+        containerRef,
+        dataSource,
+        highlightedIndexRef,
+        onSelect: handleSelect,
+        onSelectionChange: handleSelectionChange,
+        selectionModel
+    });
+    const handleSelectCellBlock = useCallback((cellBlock)=>{
+        handleSelectionChange({
+            type: "DESELECT_ALL"
+        });
+        onSelectCellBlock?.(cellBlock);
+    }, [
+        handleSelectionChange,
+        onSelectCellBlock
+    ]);
+    const { onMouseDown: cellBlockHookMouseDown, cellBlock, onKeyDown: cellBlockSelectionKeyDown } = useCellBlockSelection({
+        allowCellBlockSelection,
+        columnCount,
+        containerRef,
+        onSelectCellBlock: handleSelectCellBlock,
+        rowCount
+    });
+    const handleRowClick = useCallback((evt, dataRow, rangeSelect, keepExistingSelection)=>{
+        selectionHookOnRowClick?.(evt, dataRow, rangeSelect, keepExistingSelection);
+        onRowClickProp?.(evt, dataRow);
+    }, [
+        onRowClickProp,
+        selectionHookOnRowClick
+    ]);
+    const handleKeyDown = useCallback((e)=>{
+        cellBlockSelectionKeyDown?.(e);
+        if (!e.defaultPrevented) navigationKeyDown(e);
+        if (!e.defaultPrevented) editingKeyDown(e);
+        if (!e.defaultPrevented) selectionHookKeyDown(e);
+    }, [
+        cellBlockSelectionKeyDown,
+        navigationKeyDown,
+        editingKeyDown,
+        selectionHookKeyDown
+    ]);
+    const onMoveColumn = useCallback((columnName, columns)=>{
+        const newTableConfig = {
+            ...tableConfig,
+            columns
+        };
+        tableConfigRef.current = newTableConfig;
+        dispatchTableModelAction({
+            availableWidth,
+            type: "init",
+            tableConfig: newTableConfig,
+            dataSource
+        });
+        onConfigChange?.(newTableConfig, {
+            columnName,
+            columns,
+            type: "column-moved"
+        });
+        setTimeout(()=>{
+            const headerCell = getHeaderCell(containerRef, columnName);
+            if (headerCell) {
+                const { ariaColIndex } = headerCell;
+                const { ariaRowIndex } = headerCell.parentElement;
+                const col = parseInt(ariaColIndex ?? "-1");
+                const row = parseInt(ariaRowIndex ?? "-1");
+                if (!isNaN(col) && -1 !== col && !isNaN(row) && -1 !== row) focusCell([
+                    row,
+                    col
+                ]);
+            }
+        }, 300);
+    }, [
+        availableWidth,
+        containerRef,
+        dataSource,
+        dispatchTableModelAction,
+        focusCell,
+        onConfigChange,
+        tableConfig
+    ]);
+    const handleDropRow = useCallback((dragDropState)=>{
+        onDrop?.(dragDropState);
+    }, [
+        onDrop
+    ]);
+    const handleDragStartRow = useCallback((dragDropState)=>{
+        const { initialDragElement } = dragDropState;
+        const rowIndex = getAriaRowIndex(initialDragElement) - headerState.count - 1;
+        const row = dataRowsRef.current.find((row)=>row.index === rowIndex);
+        if (row) dragDropState.setPayload(row);
+        onDragStart?.(dragDropState);
+    }, [
+        dataRowsRef,
+        headerState.count,
+        onDragStart
+    ]);
+    const onHeaderHeightMeasured = useCallback((height, count)=>{
+        setHeaderState({
+            height,
+            count
+        });
+    }, []);
+    const { onMouseDown: rowDragMouseDown, draggable: draggableRow } = useRowDragDrop({
+        allowDragDrop,
+        containerRef,
+        draggableClassName: "vuuTable",
+        id,
+        onDragStart: handleDragStartRow,
+        onDrop: handleDropRow,
+        orientation: "vertical",
+        itemQuery: ".vuuTableRow"
+    });
+    const handleMouseDown = useCallback((evt)=>{
+        rowDragMouseDown?.(evt);
+        if (!evt.isPropagationStopped()) cellBlockHookMouseDown?.(evt);
+    }, [
+        rowDragMouseDown,
+        cellBlockHookMouseDown
+    ]);
+    return {
+        ...containerProps,
+        allRowsSelected,
+        "aria-rowcount": dataSource.size,
+        cellBlock,
+        columns,
+        dataRows,
+        draggableRow,
+        editSessionInProgress: editSession?.inEditMode,
+        focusCellPlaceholderKeyDown,
+        focusCellPlaceholderRef,
+        getRowOffset,
+        handleColumnAction,
+        headerState,
+        headings,
+        highlightedIndex: highlightedIndexRef.current,
+        onBlur: editingBlur,
+        onCheckBoxColumnHeaderClick,
+        onDoubleClick: editingDoubleClick,
+        onFocus: handleFocus,
+        onKeyDown: handleKeyDown,
+        onMouseDown: handleMouseDown,
+        onContextMenu,
+        onHeaderHeightMeasured,
+        onMoveColumn,
+        onMoveGroupColumn,
+        onRemoveGroupColumn,
+        onRowClick: handleRowClick,
+        onSortColumn: handleSort,
+        onResizeColumn,
+        onToggleGroup,
+        rowClassNameGenerator,
+        scrollProps,
+        tableAttributes,
+        tableBodyRef,
+        tableConfig,
+        viewportMeasurements
+    };
+};
+export { useTable };