@absreim/react-bootstrap-data-grid 2.3.0 → 2.4.0

package/Grid.d.ts

@@ -1,23 +1,5 @@
 import { FC } from "react";
-import { ColDef, RowDef } from "./types";
-import { StyleModel } from "./styling/types";
-import { EditModel } from "./editing/types";
-import { SelectModel } from "./selection/types";
-import { FilterModel } from "./filtering/types";
-import { TableSortModel } from "./sorting/types";
-import { GridPaginationState } from "./pagination/types";
-export interface GridProps {
-    rows: RowDef[];
-    cols: ColDef[];
-    pagination?: GridPaginationState;
-    sortModel?: TableSortModel;
-    filterModel?: FilterModel;
-    selectModel?: SelectModel;
-    editModel?: EditModel;
-    caption?: string;
-    styleModel?: StyleModel;
-    useToolbar?: boolean;
-    responsive?: boolean;
-}
+import { GridProps } from "./types";
 declare const Grid: FC<GridProps>;
 export default Grid;
+export type { GridProps } from "./types";

package/Grid.js

@@ -1,219 +1,56 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useId, useMemo, useState } from "react";
-import ColHeaderCell from "./ColHeaderCell";
-import useFilter from "./pipeline/useFilter";
-import ToggleButton from "./ToggleButton";
-import FilterOptionsTable from "./filtering/FilterOptionsTable";
-import useFilterStateFromEditable from "./pipeline/useFilterStateFromEditable";
-import useSortedRows from "./pipeline/useSortedRows";
-import useDisplayRows from "./pipeline/useDisplayRows";
-import SelectAllHeaderCell from "./selection/SelectAllHeaderCell";
-import SelectionInput from "./selection/SelectionInput";
-import Pagination from "./pagination/Pagination";
-import classNames from "classnames";
-import EditableRow from "./editing/EditableRow";
-import inputStrsToRowData from "./editing/inputStrsToRowData";
-import { unwrapAdditionalComponentsStyleModel, unwrapTableStyleModel, } from "./styling/styleModelUnwrappers";
-import useCurrentPageRows from "./pipeline/useCurrentPageRows";
-import isSubset from "./util/isSubset";
-import useFilterStateStore from "./pipeline/useFilterStateStore";
-import useInterfaces from "./toolbar/useInterfaces";
-import ToolbarContainer from "./toolbar/ToolbarContainer";
-import useExportFn from "./export/useExportFn";
-var Grid = function (_a) {
-    var _b;
-    var rows = _a.rows, cols = _a.cols, pagination = _a.pagination, sortModel = _a.sortModel, filterModel = _a.filterModel, selectModel = _a.selectModel, editModel = _a.editModel, caption = _a.caption, styleModel = _a.styleModel, useToolbar = _a.useToolbar, responsive = _a.responsive;
-    var normalizedTableFilterModel = useFilterStateStore(filterModel, cols);
-    var editableFilterState = (normalizedTableFilterModel === null || normalizedTableFilterModel === void 0 ? void 0 : normalizedTableFilterModel.tableFilterState) || null;
-    var filteredRows = useFilter(rows, editableFilterState);
-    var filterState = useFilterStateFromEditable(cols, editableFilterState);
-    var _c = useSortedRows(filteredRows, cols, sortModel), sortedRows = _c.sortedRows, sortingEnabled = _c.sortingEnabled, sortColDef = _c.sortColDef, setSortColDef = _c.setSortColDef;
-    var _d = useCurrentPageRows(sortedRows, pagination), paginatedRows = _d.paginatedRows, normalizedModel = _d.normalizedModel;
-    var showSelectCol = selectModel && selectModel.mode !== "row";
-    var ariaColIndexOffset = showSelectCol ? 1 : 0;
-    var displayRows = useDisplayRows(paginatedRows, cols, ariaColIndexOffset);
-    var _e = useState(false), filterOptionsVisible = _e[0], setFilterOptionsVisible = _e[1];
-    var exportFnInfo = useExportFn({
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import InternalGrid from "./InternalGrid";
+import ColHeaderCell from "./main/ColHeaderCell";
+import useCombinedPipeline from "./pipeline/useCombinedPipeline";
+import useGridSelectionFns from "./pipeline/useGridSelectionFns";
+import useUnwrappedGridStyles from "./pipeline/useUnwrappedGridStyles";
+import useGetInputStrSubmitCallback from "./pipeline/useGetInputStrSubmitCallback";
+import useAugFormattedRows from "./pipeline/useAugFormattedRows";
+import BodyRows from "./main/BodyRows";
+var Grid = function (props) {
+    var rows = props.rows, cols = props.cols, filterModel = props.filterModel, sortModel = props.sortModel, pagination = props.pagination, selectModel = props.selectModel, styleModel = props.styleModel, editModel = props.editModel;
+    var combinedPipelineOutput = useCombinedPipeline({
         rows: rows,
         cols: cols,
-        filteredRows: filterModel && filteredRows,
-        currentPageRows: pagination && paginatedRows,
+        filterModel: filterModel,
+        sortModel: sortModel,
+        pagination: pagination,
+        selectModel: selectModel,
     });
-    var toolbarInterfaceParams = useMemo(function () { return ({
-        filtering: useToolbar && filterState && filterModel && normalizedTableFilterModel
+    var _a = combinedPipelineOutput.sortedRowsOutput, sortColDef = _a.sortColDef, setSortColDef = _a.setSortColDef, sortingEnabled = _a.sortingEnabled, showSelectCol = combinedPipelineOutput.showSelectCol, displayRows = combinedPipelineOutput.displayRows;
+    var gridSelectionFns = useGridSelectionFns(selectModel, rows);
+    var unwrappedStyles = useUnwrappedGridStyles(styleModel);
+    var getInputStrSubmitCallback = useGetInputStrSubmitCallback(editModel, cols);
+    var colNameToWidth = useMemo(function () {
+        var map = {};
+        cols.forEach(function (_a) {
+            var name = _a.name, width = _a.width;
+            return (map[name] = width);
+        });
+        return map;
+    }, [cols]);
+    var augFormattedRows = useAugFormattedRows(colNameToWidth, displayRows);
+    var colHeaderCells = cols.map(function (_a, index) {
+        var _b;
+        var name = _a.name, label = _a.label, sortable = _a.sortable, width = _a.width;
+        var colSortModel = sortingEnabled && sortable
             ? {
-                filterState: filterState,
-                setFilterState: normalizedTableFilterModel.setTableFilterState,
-                caption: filterModel.filterTableCaption,
-                styleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.filterInputTableStyleModel,
-            }
-            : undefined,
-        exporting: useToolbar
-            ? { exportFnInfo: exportFnInfo, styleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.exportFormStyleModel }
-            : undefined,
-    }); }, [
-        exportFnInfo,
-        filterModel,
-        filterState,
-        normalizedTableFilterModel,
-        styleModel === null || styleModel === void 0 ? void 0 : styleModel.exportFormStyleModel,
-        styleModel === null || styleModel === void 0 ? void 0 : styleModel.filterInputTableStyleModel,
-        useToolbar,
-    ]);
-    var toolbarInterfaces = useInterfaces(toolbarInterfaceParams);
-    var handleToggleFilterOptions = function () {
-        setFilterOptionsVisible(!filterOptionsVisible);
-    };
-    var getSelectionExists = function () {
-        if (!selectModel) {
-            return false;
-        }
-        if (selectModel.type === "single") {
-            return selectModel.selected !== null;
-        }
-        return selectModel.selected.length > 0;
-    };
-    var selectionExists = getSelectionExists();
-    var selectAllOnClick = function () {
-        if (!selectModel) {
-            return;
-        }
-        if (selectionExists && selectModel.type === "single") {
-            selectModel.setSelected(null);
-            return;
-        }
-        if (selectionExists && selectModel.type === "multi") {
-            selectModel.setSelected([]);
-            return;
-        }
-        if (!selectionExists && selectModel.type === "multi") {
-            var allRowIndices = rows.map(function (_, index) { return index; });
-            selectModel.setSelected(allRowIndices);
-        }
-        // Button should be disabled in the case of selectionExists &&
-        // selectModel.type === "single", so function execution should never get
-        // to this point.
-    };
-    var getSelectHandler = function (index) { return function () {
-        if (!selectModel) {
-            return;
-        }
-        if (selectModel.type === "single") {
-            selectModel.setSelected(index);
-            return;
-        }
-        selectModel.setSelected(selectModel.selected.concat(index));
-    }; };
-    var getDeselectHandler = function (index) { return function () {
-        if (!selectModel || selectModel.type === "single") {
-            return;
-        }
-        selectModel.setSelected(selectModel.selected.filter(function (num) { return num !== index; }));
-    }; };
-    // used to group radio buttons for selection
-    var gridId = useId();
-    var getSelectInputModel = function (id, selectModel) {
-        if (selectModel.type === "single") {
-            return {
-                type: "radio",
-                name: selectModel.groupName || gridId,
-            };
-        }
-        return {
-            type: "checkbox",
-            deselectCallback: getDeselectHandler(id),
-        };
-    };
-    var selectedSet = new Set();
-    if (selectModel && selectModel.type === "multi") {
-        selectModel.selected.forEach(function (value) { return selectedSet.add(value); });
-    }
-    if (selectModel &&
-        selectModel.type === "single" &&
-        selectModel.selected !== null) {
-        selectedSet.add(selectModel.selected);
-    }
-    var rowsAreSelectable = !!(selectModel && selectModel.mode !== "column");
-    var selectionInfo = useMemo(function () {
-        if (!selectModel) {
-            return null;
-        }
-        if (selectModel.type === "single") {
-            return {
-                selectType: "single",
-                existingSelection: selectionExists,
-            };
-        }
-        var getMultiExistingSelection = function (selectionExists, rows) {
-            var rowIndices = rows.map(function (_, index) { return index; });
-            // Note that isFullSelection is true if there are no rows at all. In that case, the return value of this function
-            // should be "none", not "full".
-            var isFullSelection = isSubset(rowIndices, selectModel.selected);
-            if (!selectionExists) {
-                return "none";
-            }
-            if (isFullSelection) {
-                return "full";
+                sortOrder: (sortColDef === null || sortColDef === void 0 ? void 0 : sortColDef.name) === name ? sortColDef.order : null,
+                setSortOrder: function (order) {
+                    setSortColDef && setSortColDef(order && { name: name, order: order });
+                },
             }
-            return "partial";
-        };
-        return {
-            selectType: "multi",
-            existingSelection: getMultiExistingSelection(selectionExists, rows),
-        };
-    }, [selectModel, selectionExists, rows]);
-    var getRowClickHandler = function (index) { return function () {
-        if (!rowsAreSelectable) {
-            return;
-        }
-        if (selectedSet.has(index)) {
-            getDeselectHandler(index)();
-            return;
-        }
-        getSelectHandler(index)();
-    }; };
-    var getAriaSelectedValue = function (id) {
-        if (!selectModel) {
-            return undefined;
-        }
-        return String(selectedSet.has(id));
-    };
-    var getInputStrSubmitCallback = editModel &&
-        (function (id) {
-            var idSpecificCallback = editModel.getUpdateCallback(id);
-            return function (inputStrs) {
-                var rowData = inputStrsToRowData(cols, inputStrs);
-                idSpecificCallback(rowData);
-            };
-        });
-    var unwrappedTableModel = useMemo(function () { return unwrapTableStyleModel(styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel); }, [styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel]);
-    var unwrappedAdditionalStyleModel = useMemo(function () {
-        return unwrapAdditionalComponentsStyleModel(styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel);
-    }, [styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel]);
-    var mainTable = (_jsxs("table", { className: classNames("table", {
-            "table-hover": rowsAreSelectable,
-        }, unwrappedTableModel.table), "aria-rowcount": filteredRows.length + 1, children: [caption !== undefined && (_jsx("caption", { className: classNames(unwrappedTableModel.caption), children: caption })), _jsx("thead", { className: classNames(unwrappedTableModel.thead), children: _jsxs("tr", { "aria-rowindex": 1, className: classNames(unwrappedTableModel.theadTr), children: [showSelectCol && (_jsx(SelectAllHeaderCell, { selectionInfo: selectionInfo, onClick: selectAllOnClick, totalRows: rows.length, additionalClasses: unwrappedTableModel.rowSelectColTh })), cols.map(function (_a, index) {
-                            var name = _a.name, label = _a.label, sortable = _a.sortable;
-                            var colSortModel = sortingEnabled && sortable
-                                ? {
-                                    sortOrder: (sortColDef === null || sortColDef === void 0 ? void 0 : sortColDef.name) === name ? sortColDef.order : null,
-                                    setSortOrder: function (order) {
-                                        setSortColDef && setSortColDef(order && { name: name, order: order });
-                                    },
-                                }
-                                : undefined;
-                            return (_jsx(ColHeaderCell, { label: label, sortModel: colSortModel, ariaColIndex: index + 1 + (showSelectCol ? 1 : 0), additionalClasses: unwrappedTableModel.theadTh(index) }, name));
-                        }), editModel && (_jsx("th", { "aria-colindex": cols.length + 1 + (showSelectCol ? 1 : 0), className: classNames(unwrappedTableModel.editColTh), children: "Edit Controls" }))] }) }), _jsx("tbody", { className: classNames(unwrappedTableModel.tbody), children: displayRows.map(function (row, index) {
-                    return (_jsx(EditableRow, { onClick: getRowClickHandler(row.id), className: classNames({
-                            "table-active": selectedSet.has(row.id),
-                        }, unwrappedTableModel.tbodyTr(row.id, index)), "aria-rowindex": index + 2, dataRowId: row.id, "aria-selected": getAriaSelectedValue(row.id), ariaColIndexOffset: ariaColIndexOffset, cellData: row.contents, updateCallback: getInputStrSubmitCallback && getInputStrSubmitCallback(row.id), deleteCallback: (editModel === null || editModel === void 0 ? void 0 : editModel.getDeleteCallback) &&
-                            editModel.getDeleteCallback(row.id), dataCellClasses: function (colIndex) {
-                            return unwrappedTableModel.tbodyTd(row.id, index, colIndex);
-                        }, dataCellInputClasses: function (colIndex) {
-                            return unwrappedTableModel.tbodyTdInput(row.id, index, colIndex);
-                        }, editCellClasses: unwrappedTableModel.editColTd(row.id, index), saveButtonClasses: unwrappedTableModel.editSaveButton(row.id, index), deleteButtonClasses: unwrappedTableModel.editDeleteButton(row.id, index), startButtonClasses: unwrappedTableModel.editStartButton(row.id, index), cancelButtonClasses: unwrappedTableModel.editCancelButton(row.id, index), children: showSelectCol && (_jsx("td", { className: classNames(unwrappedTableModel.rowSelectColTd(row.id, index)), "aria-colindex": 1, children: _jsx(SelectionInput, { selected: selectedSet.has(row.id), selectionInputModel: getSelectInputModel(row.id, selectModel), selectCallback: getSelectHandler(row.id), additionalClasses: unwrappedTableModel.rowSelectInput(row.id, index) }) })) }, row.id));
-                }) })] }));
-    return (_jsxs("div", { "data-testid": "rbdg-top-level-div", className: classNames(unwrappedAdditionalStyleModel.topLevelDiv), children: [normalizedTableFilterModel && !useToolbar && (_jsxs("div", { "data-testid": "rbdg-filter-inputs-div", className: classNames(unwrappedAdditionalStyleModel.filterInputsDiv), children: [_jsx(ToggleButton, { isActive: filterOptionsVisible, label: "".concat(filterOptionsVisible ? "Hide" : "Show ", " Filter Options"), onClick: handleToggleFilterOptions, classes: (_b = styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel) === null || _b === void 0 ? void 0 : _b.filterUiToggleButton }), filterOptionsVisible && (_jsx(FilterOptionsTable, { caption: filterModel.filterTableCaption, filterState: filterState, setFilterState: normalizedTableFilterModel.setTableFilterState, styleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.filterInputTableStyleModel }))] })), useToolbar && (_jsx(ToolbarContainer, { interfaces: toolbarInterfaces, styleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.toolbarStyleModel })), _jsxs("div", { "data-testid": "rbdg-table-and-pagination-div", className: classNames(unwrappedAdditionalStyleModel.tableAndPaginationDiv), children: [responsive ? (_jsx("div", { "data-testid": "rbdg-table-div", className: "table-responsive", children: mainTable })) : (_jsx(_Fragment, { children: mainTable })), normalizedModel && (_jsx(Pagination, { normalizedModel: normalizedModel, prePagingNumRows: sortedRows.length, containerDivClasses: unwrappedAdditionalStyleModel.paginationUiDiv }))] })] }));
+            : undefined;
+        return (_jsx(ColHeaderCell, { label: label, sortModel: colSortModel, ariaColIndex: index + 1 + (showSelectCol ? 1 : 0), additionalClasses: ((_b = styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel) === null || _b === void 0 ? void 0 : _b.theadTh) &&
+                styleModel.mainTableStyleModel.theadTh(index), width: width }, name));
+    });
+    var bodyRows = (_jsx(BodyRows, { augFormattedRows: augFormattedRows, gridSelectionFns: gridSelectionFns, selectModel: selectModel, unwrappedStyles: unwrappedStyles, combinedPipelineOutput: combinedPipelineOutput, editModel: editModel, getInputStrSubmitCallback: getInputStrSubmitCallback }));
+    return (_jsx(InternalGrid, { gridProps: props, hooks: {
+            pipelineOutput: combinedPipelineOutput,
+            selectFns: gridSelectionFns,
+            unwrappedStyles: unwrappedStyles,
+        }, slots: { colHeaderCells: colHeaderCells, bodyRows: bodyRows } }));
 };
 export default Grid;

package/InternalGrid.d.ts

@@ -0,0 +1,19 @@
+import { FC, ReactNode } from "react";
+import { BaseGridProps } from "./types";
+import { UseCombinedPipelineHook } from "./pipeline/useCombinedPipeline";
+import { UseGridSelectionFnsHook } from "./pipeline/useGridSelectionFns";
+import { UseUnwrappedGridStylesHook } from "./pipeline/useUnwrappedGridStyles";
+export interface InternalGridProps {
+    gridProps: BaseGridProps;
+    hooks: {
+        selectFns: UseGridSelectionFnsHook;
+        pipelineOutput: UseCombinedPipelineHook;
+        unwrappedStyles: UseUnwrappedGridStylesHook;
+    };
+    slots: {
+        colHeaderCells: ReactNode;
+        bodyRows: ReactNode;
+    };
+}
+declare const InternalGrid: FC<InternalGridProps>;
+export default InternalGrid;

package/InternalGrid.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import ToggleButton from "./main/ToggleButton";
+import FilterOptionsTable from "./filtering/FilterOptionsTable";
+import SelectAllHeaderCell from "./selection/SelectAllHeaderCell";
+import Pagination from "./pagination/Pagination";
+import classNames from "classnames";
+import useInterfaces from "./toolbar/useInterfaces";
+import ToolbarContainer from "./toolbar/ToolbarContainer";
+import useExportFn from "./export/useExportFn";
+import getWidthStyle from "./util/getWidthStyle";
+var InternalGrid = function (_a) {
+    var _b;
+    var _c = _a.gridProps, rows = _c.rows, cols = _c.cols, pagination = _c.pagination, filterModel = _c.filterModel, selectModel = _c.selectModel, editModel = _c.editModel, caption = _c.caption, styleModel = _c.styleModel, useToolbar = _c.useToolbar, responsive = _c.responsive, displayMode = _c.displayMode, _d = _a.hooks, pipelineOutput = _d.pipelineOutput, selectFns = _d.selectFns, unwrappedStyles = _d.unwrappedStyles, _e = _a.slots, colHeaderCells = _e.colHeaderCells, bodyRows = _e.bodyRows;
+    var normalizedTableFilterModel = pipelineOutput.normalizedTableFilterModel, filteredRows = pipelineOutput.filteredRows, filterState = pipelineOutput.filterState, sortedRows = pipelineOutput.sortedRowsOutput.sortedRows, _f = pipelineOutput.currentPageRowsOutput, paginatedRows = _f.paginatedRows, normalizedModel = _f.normalizedModel, showSelectCol = pipelineOutput.showSelectCol;
+    var _g = useState(false), filterOptionsVisible = _g[0], setFilterOptionsVisible = _g[1];
+    var exportFnInfo = useExportFn({
+        rows: rows,
+        cols: cols,
+        filteredRows: filterModel && filteredRows,
+        currentPageRows: pagination && paginatedRows,
+    });
+    var toolbarInterfaceParams = useMemo(function () { return ({
+        filtering: useToolbar && filterState && filterModel && normalizedTableFilterModel
+            ? {
+                filterState: filterState,
+                setFilterState: normalizedTableFilterModel.setTableFilterState,
+                caption: filterModel.filterTableCaption,
+                styleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.filterInputTableStyleModel,
+            }
+            : undefined,
+        exporting: useToolbar
+            ? { exportFnInfo: exportFnInfo, styleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.exportFormStyleModel }
+            : undefined,
+    }); }, [
+        exportFnInfo,
+        filterModel,
+        filterState,
+        normalizedTableFilterModel,
+        styleModel === null || styleModel === void 0 ? void 0 : styleModel.exportFormStyleModel,
+        styleModel === null || styleModel === void 0 ? void 0 : styleModel.filterInputTableStyleModel,
+        useToolbar,
+    ]);
+    var toolbarInterfaces = useInterfaces(toolbarInterfaceParams);
+    var handleToggleFilterOptions = function () {
+        setFilterOptionsVisible(!filterOptionsVisible);
+    };
+    var rowsAreSelectable = selectFns.rowsAreSelectable, selectionInfo = selectFns.selectionInfo, selectAllOnClick = selectFns.selectAllOnClick;
+    var unwrappedTableModel = unwrappedStyles.unwrappedTableModel, unwrappedAdditionalStyleModel = unwrappedStyles.unwrappedAdditionalStyleModel;
+    var mainTable = (_jsxs("table", { className: classNames("table", {
+            "table-hover": rowsAreSelectable,
+            "d-block": displayMode === "block",
+        }, unwrappedTableModel.table), "aria-rowcount": filteredRows.length + 1, children: [caption !== undefined && (_jsx("caption", { className: classNames(unwrappedTableModel.caption), children: caption })), _jsx("thead", { className: classNames(unwrappedTableModel.thead), children: _jsxs("tr", { "aria-rowindex": 1, className: classNames(unwrappedTableModel.theadTr), children: [showSelectCol && (_jsx(SelectAllHeaderCell, { style: getWidthStyle(selectModel === null || selectModel === void 0 ? void 0 : selectModel.selectColWidth), selectionInfo: selectionInfo, onClick: selectAllOnClick, totalRows: rows.length, additionalClasses: unwrappedTableModel.rowSelectColTh })), colHeaderCells, editModel && (_jsx("th", { "aria-colindex": cols.length + 1 + (showSelectCol ? 1 : 0), className: classNames(unwrappedTableModel.editColTh), style: getWidthStyle(editModel === null || editModel === void 0 ? void 0 : editModel.editColWidth), children: "Edit Controls" }))] }) }), _jsx("tbody", { className: classNames(unwrappedTableModel.tbody), children: bodyRows })] }));
+    return (_jsxs("div", { "data-testid": "rbdg-top-level-div", className: classNames(unwrappedAdditionalStyleModel.topLevelDiv), children: [normalizedTableFilterModel && !useToolbar && (_jsxs("div", { "data-testid": "rbdg-filter-inputs-div", className: classNames(unwrappedAdditionalStyleModel.filterInputsDiv), children: [_jsx(ToggleButton, { isActive: filterOptionsVisible, label: "".concat(filterOptionsVisible ? "Hide" : "Show ", " Filter Options"), onClick: handleToggleFilterOptions, classes: (_b = styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel) === null || _b === void 0 ? void 0 : _b.filterUiToggleButton }), filterOptionsVisible && (_jsx(FilterOptionsTable, { caption: filterModel.filterTableCaption, filterState: filterState, setFilterState: normalizedTableFilterModel.setTableFilterState, styleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.filterInputTableStyleModel }))] })), useToolbar && (_jsx(ToolbarContainer, { interfaces: toolbarInterfaces, styleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.toolbarStyleModel })), _jsxs("div", { "data-testid": "rbdg-table-and-pagination-div", className: classNames(unwrappedAdditionalStyleModel.tableAndPaginationDiv), children: [responsive ? (_jsx("div", { "data-testid": "rbdg-table-div", className: "table-responsive", children: mainTable })) : (_jsx(_Fragment, { children: mainTable })), normalizedModel && (_jsx(Pagination, { normalizedModel: normalizedModel, prePagingNumRows: sortedRows.length, containerDivClasses: unwrappedAdditionalStyleModel.paginationUiDiv }))] })] }));
+};
+export default InternalGrid;

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Brook Li
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/editing/EditControlsCell.d.ts

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { CSSProperties, FC } from "react";
 export interface EditControlsCellProps {
     ariaColIndex: number;
     beginEditingCallback: () => void;
@@ -11,6 +11,7 @@ export interface EditControlsCellProps {
     deleteButtonClasses: string[];
     startButtonClasses: string[];
     cancelButtonClasses: string[];
+    style?: CSSProperties;
 }
 declare const EditControlsCell: FC<EditControlsCellProps>;
 export default EditControlsCell;

package/editing/EditableRow.d.ts

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from "react";
+import { CSSProperties, FC, ReactNode } from "react";
 import { RowId } from "../types";
 import React from "react";
 import { CellData } from "./types";
@@ -16,6 +16,7 @@ export type EditableRowProps = Pick<React.ComponentProps<"tr">, "onClick" | "cla
     cancelButtonClasses: string[];
     startButtonClasses: string[];
     saveButtonClasses: string[];
+    editControlCellStyles?: CSSProperties;
 };
 declare const EditableRow: FC<EditableRowProps>;
 export default EditableRow;

package/editing/EditableRow.js

@@ -4,6 +4,7 @@ import { useRef, useState } from "react";
 import { dateToDatetimeInputStr, dateToInputStr } from "../util/datetime";
 import EditControlsCell from "./EditControlsCell";
 import classNames from "classnames";
+import getWidthStyle from "../util/getWidthStyle";
 var initValueToFormValue = function (value, type) {
     switch (type) {
         case "date":
@@ -29,7 +30,7 @@ var colDataTypeToInputType = function (colDataType) {
     }
 };
 var EditableRow = function (_a) {
-    var ariaColIndexOffset = _a.ariaColIndexOffset, cellData = _a.cellData, children = _a.children, updateCallback = _a.updateCallback, deleteCallback = _a.deleteCallback, onClick = _a.onClick, className = _a.className, ariaRowIndex = _a["aria-rowindex"], ariaSelected = _a["aria-selected"], dataRowId = _a.dataRowId, dataCellClasses = _a.dataCellClasses, dataCellInputClasses = _a.dataCellInputClasses, editCellClasses = _a.editCellClasses, saveButtonClasses = _a.saveButtonClasses, startButtonClasses = _a.startButtonClasses, cancelButtonClasses = _a.cancelButtonClasses, deleteButtonClasses = _a.deleteButtonClasses;
+    var ariaColIndexOffset = _a.ariaColIndexOffset, cellData = _a.cellData, children = _a.children, updateCallback = _a.updateCallback, deleteCallback = _a.deleteCallback, onClick = _a.onClick, className = _a.className, ariaRowIndex = _a["aria-rowindex"], ariaSelected = _a["aria-selected"], dataRowId = _a.dataRowId, dataCellClasses = _a.dataCellClasses, dataCellInputClasses = _a.dataCellInputClasses, editCellClasses = _a.editCellClasses, saveButtonClasses = _a.saveButtonClasses, startButtonClasses = _a.startButtonClasses, cancelButtonClasses = _a.cancelButtonClasses, deleteButtonClasses = _a.deleteButtonClasses, editControlCellStyles = _a.editControlCellStyles;
     var trRef = useRef(null);
     var _b = useState(false), isEditing = _b[0], setIsEditing = _b[1];
     var handleSave = function () {
@@ -60,8 +61,8 @@ var EditableRow = function (_a) {
         }
     };
     return (_jsxs("tr", { ref: trRef, onClick: onClick, className: className, "aria-rowindex": ariaRowIndex, "aria-selected": ariaSelected, "data-rowid": dataRowId, children: [children, cellData.map(function (_a, index) {
-                var type = _a.type, value = _a.value, formattedValue = _a.formattedValue, label = _a.label;
-                return (_jsx("td", { "aria-colindex": index + ariaColIndexOffset + 1, className: classNames(dataCellClasses(index)), children: isEditing && !!updateCallback ? (_jsx("input", { "aria-label": label, name: "editable-cell-input-".concat(dataRowId, "-").concat(index), className: classNames("form-control", dataCellInputClasses(index)), type: colDataTypeToInputType(type), defaultValue: initValueToFormValue(value, type), required: type !== "string" })) : (formattedValue) }, index));
-            }), updateCallback && (_jsx(EditControlsCell, { ariaColIndex: ariaColIndexOffset + cellData.length + 1, beginEditingCallback: function () { return setIsEditing(true); }, cancelEditingCallback: function () { return setIsEditing(false); }, isEditing: isEditing, saveCallback: handleSave, deleteCallback: deleteCallback, editControlsCellClasses: editCellClasses, startButtonClasses: startButtonClasses, deleteButtonClasses: deleteButtonClasses, cancelButtonClasses: cancelButtonClasses, saveButtonClasses: saveButtonClasses }))] }));
+                var type = _a.type, value = _a.value, formattedValue = _a.formattedValue, label = _a.label, width = _a.width;
+                return (_jsx("td", { "aria-colindex": index + ariaColIndexOffset + 1, className: classNames(dataCellClasses(index)), style: getWidthStyle(width), children: isEditing && !!updateCallback ? (_jsx("input", { "aria-label": label, name: "editable-cell-input-".concat(dataRowId, "-").concat(index), className: classNames("form-control", dataCellInputClasses(index)), type: colDataTypeToInputType(type), defaultValue: initValueToFormValue(value, type), required: type !== "string" })) : (formattedValue) }, index));
+            }), updateCallback && (_jsx(EditControlsCell, { ariaColIndex: ariaColIndexOffset + cellData.length + 1, beginEditingCallback: function () { return setIsEditing(true); }, cancelEditingCallback: function () { return setIsEditing(false); }, isEditing: isEditing, saveCallback: handleSave, deleteCallback: deleteCallback, editControlsCellClasses: editCellClasses, startButtonClasses: startButtonClasses, deleteButtonClasses: deleteButtonClasses, cancelButtonClasses: cancelButtonClasses, saveButtonClasses: saveButtonClasses, style: editControlCellStyles }))] }));
 };
 export default EditableRow;

package/editing/inputStrsToRowData.d.ts

@@ -1,3 +1,3 @@
-import { ColDef, RowData } from "../types";
-declare const inputStrsToRowData: (cols: ColDef[], inputStrs: string[]) => RowData;
+import { ColDefBase, RowData } from "../types";
+declare const inputStrsToRowData: (cols: ColDefBase[], inputStrs: string[]) => RowData;
 export default inputStrsToRowData;

package/editing/types.d.ts

@@ -6,9 +6,11 @@ export interface CellData {
     ariaColIndex: number;
     formattedValue: string;
     label: string;
+    width?: number;
 }
 export type UpdateCallbackGenerator = (id: RowId) => (rowData: RowData) => void;
 export interface EditModel {
     getUpdateCallback: UpdateCallbackGenerator;
     getDeleteCallback?: (id: RowId) => () => void;
+    editColWidth?: number;
 }

package/filtering/FilterOptionsTable.js

@@ -22,7 +22,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
 import StringFilterRow from "./StringFilterRow";
 import NumberFilterRow from "./NumberFilterRow";
-import useFormStateFromTableFilterState from "./useFormStateFromTableFilterState";
+import useFilterFormState from "./useFilterFormState";
 import DateFilterRow from "./DateFilterRow";
 import classNames from "classnames";
 import { unwrapFilterInputTableStyleModel } from "../styling/styleModelUnwrappers";
@@ -74,7 +74,7 @@ var convertFilterFormStateToEditableState = function (filterFormState) {
 };
 var FilterOptionsTable = function (_a) {
     var filterState = _a.filterState, setFilterState = _a.setFilterState, caption = _a.caption, styleModel = _a.styleModel;
-    var formFilterState = useFormStateFromTableFilterState(filterState);
+    var formFilterState = useFilterFormState(filterState);
     var _b = useState(formFilterState), formState = _b[0], setFormState = _b[1];
     var unwrappedStyleModel = useMemo(function () { return unwrapFilterInputTableStyleModel(styleModel); }, [styleModel]);
     var getRows = function () {

package/filtering/useFilterFormState.d.ts

@@ -0,0 +1,3 @@
+import { FilterFormState, TableFilterState } from "./types";
+declare const useFilterFormState: (tableFilterState: TableFilterState) => FilterFormState;
+export default useFilterFormState;

package/filtering/{useFormStateFromTableFilterState.js → useFilterFormState.js}

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import { useMemo } from "react";
 import { dateToDatetimeInputStr, dateToInputStr } from "../util/datetime";
-var useFormStateFromTableFilterState = function (tableFilterState) {
+var useFilterFormState = function (tableFilterState) {
     return useMemo(function () {
         return Object.keys(tableFilterState).reduce(function (filterFormState, colName) {
             var editableState = tableFilterState[colName].editableState;
@@ -69,4 +69,4 @@ var useFormStateFromTableFilterState = function (tableFilterState) {
         }, {});
     }, [tableFilterState]);
 };
-export default useFormStateFromTableFilterState;
+export default useFilterFormState;

package/main/BodyRows.d.ts

@@ -0,0 +1,19 @@
+import { AugFormattedRow } from "../types";
+import { FC } from "react";
+import { UseGridSelectionFnsHook } from "../pipeline/useGridSelectionFns";
+import { UseUnwrappedGridStylesHook } from "../pipeline/useUnwrappedGridStyles";
+import { UseCombinedPipelineHook } from "../pipeline/useCombinedPipeline";
+import { SelectModel } from "../selection/types";
+import { EditModel } from "../editing/types";
+import { UseGetInputStrSubmitCallbackHook } from "../pipeline/useGetInputStrSubmitCallback";
+interface BodyRowsProps {
+    augFormattedRows: AugFormattedRow[];
+    gridSelectionFns: UseGridSelectionFnsHook;
+    unwrappedStyles: UseUnwrappedGridStylesHook;
+    combinedPipelineOutput: UseCombinedPipelineHook;
+    selectModel: SelectModel | undefined;
+    editModel: EditModel | undefined;
+    getInputStrSubmitCallback: UseGetInputStrSubmitCallbackHook;
+}
+declare const BodyRows: FC<BodyRowsProps>;
+export default BodyRows;

package/main/BodyRows.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import EditableRow from "../editing/EditableRow";
+import classNames from "classnames";
+import getWidthStyle from "../util/getWidthStyle";
+import SelectionInput from "../selection/SelectionInput";
+var BodyRows = function (_a) {
+    var augFormattedRows = _a.augFormattedRows, _b = _a.gridSelectionFns, selectedSet = _b.selectedSet, getSelectInputModel = _b.getSelectInputModel, getSelectHandler = _b.getSelectHandler, getRowClickHandler = _b.getRowClickHandler, getAriaSelectedValue = _b.getAriaSelectedValue, unwrappedTableModel = _a.unwrappedStyles.unwrappedTableModel, _c = _a.combinedPipelineOutput, showSelectCol = _c.showSelectCol, ariaColIndexOffset = _c.ariaColIndexOffset, selectModel = _a.selectModel, editModel = _a.editModel, getInputStrSubmitCallback = _a.getInputStrSubmitCallback;
+    return augFormattedRows.map(function (row, index) {
+        return (_jsx(EditableRow, { onClick: getRowClickHandler(row.id), className: classNames({
+                "table-active": selectedSet.has(row.id),
+            }, unwrappedTableModel.tbodyTr(row.id, index)), "aria-rowindex": index + 2, dataRowId: row.id, "aria-selected": getAriaSelectedValue(row.id), ariaColIndexOffset: ariaColIndexOffset, cellData: row.contents, updateCallback: getInputStrSubmitCallback && getInputStrSubmitCallback(row.id), deleteCallback: (editModel === null || editModel === void 0 ? void 0 : editModel.getDeleteCallback) && editModel.getDeleteCallback(row.id), dataCellClasses: function (colIndex) {
+                return unwrappedTableModel.tbodyTd(row.id, index, colIndex);
+            }, dataCellInputClasses: function (colIndex) {
+                return unwrappedTableModel.tbodyTdInput(row.id, index, colIndex);
+            }, editCellClasses: unwrappedTableModel.editColTd(row.id, index), saveButtonClasses: unwrappedTableModel.editSaveButton(row.id, index), deleteButtonClasses: unwrappedTableModel.editDeleteButton(row.id, index), startButtonClasses: unwrappedTableModel.editStartButton(row.id, index), cancelButtonClasses: unwrappedTableModel.editCancelButton(row.id, index), children: showSelectCol && (_jsx("td", { className: classNames(unwrappedTableModel.rowSelectColTd(row.id, index)), "aria-colindex": 1, style: getWidthStyle(selectModel.selectColWidth), children: _jsx(SelectionInput, { selected: selectedSet.has(row.id), selectionInputModel: getSelectInputModel(row.id, selectModel), selectCallback: getSelectHandler(row.id), additionalClasses: unwrappedTableModel.rowSelectInput(row.id, index) }) })) }, row.id));
+    });
+};
+export default BodyRows;

package/main/ColHeaderCell/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { ColHeaderCellProps } from "../../types";
+declare const ColHeaderCell: FC<ColHeaderCellProps>;
+export default ColHeaderCell;

package/main/ColHeaderCell/index.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import getWidthStyle from "../../util/getWidthStyle";
+import useSortHeaderStates from "./useSortHeaderStates";
+var ColHeaderCell = function (_a) {
+    var label = _a.label, sortModel = _a.sortModel, ariaColIndex = _a.ariaColIndex, additionalClasses = _a.additionalClasses, width = _a.width;
+    var _b = useSortHeaderStates(sortModel), handleClick = _b.handleClick, handleMouseOver = _b.handleMouseOver, handleMouseOut = _b.handleMouseOut, sortSymbol = _b.sortSymbol;
+    return (_jsxs("th", { className: classNames({
+            "rbdg-clickable-grid-header-cell": sortModel,
+            "table-active": sortModel === null || sortModel === void 0 ? void 0 : sortModel.sortOrder,
+        }, additionalClasses || []), onClick: sortModel && handleClick, onMouseOver: handleMouseOver, onMouseOut: handleMouseOut, "aria-description": sortModel
+            ? "Column header"
+            : "Column header that can be clicked to change the sorting mode", "aria-colindex": ariaColIndex, style: getWidthStyle(width), children: [label, sortSymbol] }));
+};
+export default ColHeaderCell;

package/main/ColHeaderCell/useSortHeaderStates.d.ts

@@ -0,0 +1,9 @@
+import { UseControlledHoverHook } from "../../util/useControlledHover";
+import { ReactNode } from "react";
+import { ColSortModel } from "../../sorting/types";
+export type UseSortHeaderStatesHook = UseControlledHoverHook<HTMLTableCellElement> & {
+    handleClick: () => void;
+    sortSymbol: ReactNode;
+};
+declare const useSortHeaderStates: (sortModel: ColSortModel | undefined) => UseSortHeaderStatesHook;
+export default useSortHeaderStates;