@absreim/react-bootstrap-data-grid 1.4.1 → 2.0.0

package/Grid.js

@@ -6,7 +6,6 @@ import useFilter from "./pipeline/useFilter";
 import ToggleButton from "./ToggleButton";
 import FilterOptionsTable from "./filtering/FilterOptionsTable";
 import useFilterStateFromEditable from "./pipeline/useFilterStateFromEditable";
-import useAugmentedRows from "./pipeline/useAugmentedRows";
 import useSortedRows from "./pipeline/useSortedRows";
 import useDisplayRows from "./pipeline/useDisplayRows";
 import SelectAllHeaderCell from "./selection/SelectAllHeaderCell";
@@ -14,16 +13,16 @@ import SelectionInput from "./selection/SelectionInput";
 import Pagination from "./pagination/Pagination";
 import classNames from "classnames";
 import EditableRow from "./editing/EditableRow";
-import inputStrsToRowDef from "./editing/inputStrsToRowDef";
+import inputStrsToRowData from "./editing/inputStrsToRowData";
 import { unwrapAdditionalComponentsStyleModel, unwrapTableStyleModel, } from "./styling/styleModelUnwrappers";
 import useCurrentPageRows from "./pipeline/useCurrentPageRows";
+import isSubset from "./util/isSubset";
 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;
     var editableFilterState = (filterModel === null || filterModel === void 0 ? void 0 : filterModel.tableFilterState) || null;
     var filterState = useFilterStateFromEditable(cols, editableFilterState);
-    var augmentedRows = useAugmentedRows(rows);
-    var filteredRows = useFilter(augmentedRows, editableFilterState);
+    var filteredRows = useFilter(rows, editableFilterState);
     var sortedRows = useSortedRows(filteredRows, cols, sortModel);
     var currentPageRows = useCurrentPageRows(sortedRows, pagination);
     var showSelectCol = selectModel && selectModel.mode !== "row";
@@ -56,8 +55,8 @@ var Grid = function (_a) {
             return;
         }
         if (!selectionExists && selectModel.type === "multi") {
-            var allFilteredRowIndices = filteredRows.map(function (def) { return def.meta.origIndex; });
-            selectModel.setSelected(allFilteredRowIndices);
+            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
@@ -80,7 +79,7 @@ var Grid = function (_a) {
         selectModel.setSelected(selectModel.selected.filter(function (num) { return num !== index; }));
     }; };
     // used to group radio buttons for selection
-    var getSelectInputModel = function (index, selectModel) {
+    var getSelectInputModel = function (id, selectModel) {
         if (selectModel.type === "single") {
             return {
                 type: "radio",
@@ -89,7 +88,7 @@ var Grid = function (_a) {
         }
         return {
             type: "checkbox",
-            deselectCallback: getDeselectHandler(index),
+            deselectCallback: getDeselectHandler(id),
         };
     };
     var selectedSet = new Set();
@@ -102,7 +101,35 @@ var Grid = function (_a) {
         selectedSet.add(selectModel.selected);
     }
     var rowsAreSelectable = !!(selectModel && selectModel.mode !== "column");
-    var getRowClickHandler = function (index) { return function (event) {
+    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; });
+            var isFullSelection = isSubset(rowIndices, selectModel.selected);
+            // Note that isFullSelection is true if there are no rows at all. In that case, the existing selection value
+            // should be "none", not "full".
+            if (!selectionExists) {
+                return "none";
+            }
+            if (isFullSelection) {
+                return "full";
+            }
+            return "partial";
+        };
+        return {
+            selectType: "multi",
+            existingSelection: getMultiExistingSelection(selectionExists, rows),
+        };
+    }, [selectModel, selectionExists, rows]);
+    var getRowClickHandler = function (index) { return function () {
         if (!rowsAreSelectable) {
             return;
         }
@@ -112,18 +139,18 @@ var Grid = function (_a) {
         }
         getSelectHandler(index)();
     }; };
-    var getAriaSelectedValue = function (index) {
+    var getAriaSelectedValue = function (id) {
         if (!selectModel) {
             return undefined;
         }
-        return String(selectedSet.has(index));
+        return String(selectedSet.has(id));
     };
     var getInputStrSubmitCallback = editModel &&
-        (function (origIndex) {
-            var indexSpecificCallback = editModel.getUpdateCallback(origIndex);
+        (function (id) {
+            var idSpecificCallback = editModel.getUpdateCallback(id);
             return function (inputStrs) {
-                var rowDef = inputStrsToRowDef(cols, inputStrs);
-                indexSpecificCallback(rowDef);
+                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]);
@@ -132,7 +159,7 @@ var Grid = function (_a) {
     }, [styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel]);
     return (_jsxs("div", { "data-testid": "rbdg-top-level-div", className: classNames(unwrappedAdditionalStyleModel.topLevelDiv), children: [filterState && filterModel && (_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: filterModel.setTableFilterState, styleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.filterInputTableStyleModel }))] })), _jsxs("div", { "data-testid": "rbdg-table-and-pagination-div", className: classNames(unwrappedAdditionalStyleModel.tableAndPaginationDiv), children: [_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, { selectType: selectModel.type, onClick: selectAllOnClick, selectionExists: selectionExists, additionalClasses: unwrappedTableModel.rowSelectColTh })), cols.map(function (_a, index) {
+                        }, 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 _b;
                                             var name = _a.name, label = _a.label, sortable = _a.sortable;
                                             var colSortModel = sortModel && sortable
@@ -147,15 +174,15 @@ var Grid = function (_a) {
                                                 : 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.origIndex), className: classNames({
-                                            "table-active": selectedSet.has(row.origIndex),
-                                        }, unwrappedTableModel.tbodyTr(row.origIndex, index)), "aria-rowindex": index + 2, dataRowIndex: row.origIndex, "aria-selected": getAriaSelectedValue(row.origIndex), ariaColIndexOffset: ariaColIndexOffset, cellData: row.contents, updateCallback: getInputStrSubmitCallback &&
-                                            getInputStrSubmitCallback(row.origIndex), deleteCallback: (editModel === null || editModel === void 0 ? void 0 : editModel.getDeleteCallback) &&
-                                            editModel.getDeleteCallback(row.origIndex), dataCellClasses: function (colIndex) {
-                                            return unwrappedTableModel.tbodyTd(row.origIndex, index, colIndex);
+                                    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.origIndex, index, colIndex);
-                                        }, editCellClasses: unwrappedTableModel.editColTd(row.origIndex, index), saveButtonClasses: unwrappedTableModel.editSaveButton(row.origIndex, index), deleteButtonClasses: unwrappedTableModel.editDeleteButton(row.origIndex, index), startButtonClasses: unwrappedTableModel.editStartButton(row.origIndex, index), cancelButtonClasses: unwrappedTableModel.editCancelButton(row.origIndex, index), children: showSelectCol && (_jsx("td", { className: classNames(unwrappedTableModel.rowSelectColTd(row.origIndex, index)), "aria-colindex": 1, children: _jsx(SelectionInput, { selected: selectedSet.has(row.origIndex), selectionInputModel: getSelectInputModel(row.origIndex, selectModel), selectCallback: getSelectHandler(row.origIndex), additionalClasses: unwrappedTableModel.rowSelectInput(row.origIndex, index) }) })) }, row.origIndex));
+                                            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));
                                 }) })] }), pagination && (_jsx(Pagination, { componentSize: pagination.componentSize || "medium", pageSizeOptions: pagination.pageSizeOptions, pageSizeIndex: pagination.pageSizeIndex, handleSetPageSizeIndex: pagination.setPageSizeIndex, handleSetPageNum: pagination.setCurrentPage, prePagingNumRows: sortedRows.length, maxPageButtons: pagination.maxPageButtons, currentPage: pagination.currentPage, pageSelectorJustifyContent: pagination.pageSelectorJustifyContent, pageSelectorAriaLabel: pagination.pageSelectorAriaLabel }))] })] }));
 };
 export default Grid;

package/README.md

@@ -2,4 +2,4 @@
 
 See the documentation site at https://react-bootstrap-data-grid.vercel.app/ for instructions on usage.
 
-See the source repository at https://github.com/absreim/react-bootstrap-data-grid to view the source code.
+See the source repository at https://github.com/absreim/react-bootstrap-data-grid to view the source code.

package/editing/EditControlsCell.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import classNames from "classnames";
 var stopPropagationWrapper = function (fn) { return function (event) {
     event.stopPropagation();
@@ -6,14 +6,14 @@ var stopPropagationWrapper = function (fn) { return function (event) {
 }; };
 var EditControlsCell = function (_a) {
     var ariaColIndex = _a.ariaColIndex, beginEditingCallback = _a.beginEditingCallback, cancelEditingCallback = _a.cancelEditingCallback, isEditing = _a.isEditing, saveCallback = _a.saveCallback, deleteCallback = _a.deleteCallback, editControlsCellClasses = _a.editControlsCellClasses, saveButtonClasses = _a.saveButtonClasses, deleteButtonClasses = _a.deleteButtonClasses, startButtonClasses = _a.startButtonClasses, cancelButtonClasses = _a.cancelButtonClasses;
-    return (_jsx("td", { "aria-colindex": ariaColIndex, className: classNames(editControlsCellClasses), children: _jsx("div", { className: "hstack gap-2", children: isEditing ? (_jsxs(_Fragment, { children: [_jsx("button", { className: classNames("btn", cancelButtonClasses.length === 0
+    return (_jsx("td", { "aria-colindex": ariaColIndex, className: classNames(editControlsCellClasses), children: _jsx("div", { className: "hstack gap-2", children: isEditing ? (_jsxs(_Fragment, { children: [_jsx("button", { "aria-label": "Cancel", className: classNames("btn", cancelButtonClasses.length === 0
                             ? ["btn-secondary"]
-                            : cancelButtonClasses), onClick: stopPropagationWrapper(cancelEditingCallback), children: "Cancel" }), _jsx("button", { className: classNames("btn", saveButtonClasses.length === 0
+                            : cancelButtonClasses), onClick: stopPropagationWrapper(cancelEditingCallback), title: "Cancel", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: _jsx("path", { d: "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293z" }) }) }), _jsx("button", { "aria-label": "Save", className: classNames("btn", saveButtonClasses.length === 0
                             ? ["btn-primary"]
-                            : saveButtonClasses), onClick: stopPropagationWrapper(saveCallback), children: "Save" })] })) : (_jsxs(_Fragment, { children: [deleteCallback && (_jsx("button", { className: classNames("btn", deleteButtonClasses.length === 0
-                            ? ["btn-primary"]
-                            : deleteButtonClasses), onClick: stopPropagationWrapper(deleteCallback), children: "Delete" })), _jsx("button", { className: classNames("btn", startButtonClasses.length === 0
+                            : saveButtonClasses), onClick: stopPropagationWrapper(saveCallback), title: "Save", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: [_jsx("path", { d: "M12 2h-2v3h2z" }), _jsx("path", { d: "M1.5 0A1.5 1.5 0 0 0 0 1.5v13A1.5 1.5 0 0 0 1.5 16h13a1.5 1.5 0 0 0 1.5-1.5V2.914a1.5 1.5 0 0 0-.44-1.06L14.147.439A1.5 1.5 0 0 0 13.086 0zM4 6a1 1 0 0 1-1-1V1h10v4a1 1 0 0 1-1 1zM3 9h10a1 1 0 0 1 1 1v5H2v-5a1 1 0 0 1 1-1" })] }) })] })) : (_jsxs(_Fragment, { children: [deleteCallback && (_jsx("button", { "aria-label": "Delete", className: classNames("btn", deleteButtonClasses.length === 0
+                            ? ["btn-secondary"]
+                            : deleteButtonClasses), onClick: stopPropagationWrapper(deleteCallback), title: "Delete", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: _jsx("path", { d: "M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5M8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5m3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0" }) }) })), _jsx("button", { "aria-label": "Edit", className: classNames("btn", startButtonClasses.length === 0
                             ? ["btn-primary"]
-                            : startButtonClasses), onClick: stopPropagationWrapper(beginEditingCallback), children: "Edit" })] })) }) }));
+                            : startButtonClasses), onClick: stopPropagationWrapper(beginEditingCallback), title: "Edit", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: [_jsx("path", { d: "M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z" }), _jsx("path", { fillRule: "evenodd", d: "M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z" })] }) })] })) }) }));
 };
 export default EditControlsCell;

package/editing/EditableRow.d.ts

@@ -1,9 +1,10 @@
 import { FC, ReactNode } from "react";
+import { RowId } from "../types";
 import React from "react";
 import { CellData } from "./types";
 export type EditableRowProps = Pick<React.ComponentProps<"tr">, "onClick" | "className" | "aria-rowindex" | "aria-selected"> & {
     ariaColIndexOffset: number;
-    dataRowIndex: number;
+    dataRowId: RowId;
     children: ReactNode;
     cellData: CellData[];
     updateCallback?: (values: string[]) => void;

package/editing/EditableRow.js

@@ -29,7 +29,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"], dataRowIndex = _a.dataRowIndex, 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;
     var trRef = useRef(null);
     var _b = useState(false), isEditing = _b[0], setIsEditing = _b[1];
     var handleSave = function () {
@@ -59,9 +59,9 @@ var EditableRow = function (_a) {
             setIsEditing(false);
         }
     };
-    return (_jsxs("tr", { ref: trRef, onClick: onClick, className: className, "aria-rowindex": ariaRowIndex, "aria-selected": ariaSelected, "data-rowindex": dataRowIndex, children: [children, cellData.map(function (_a, index) {
+    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(dataRowIndex, "-").concat(index), className: classNames("form-control", dataCellInputClasses(index)), type: colDataTypeToInputType(type), defaultValue: initValueToFormValue(value, type), required: type !== "string" })) : (formattedValue) }, index));
+                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 }))] }));
 };
 export default EditableRow;

package/editing/inputStrsToRowData.d.ts

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

package/editing/{inputStrsToRowDef.js → inputStrsToRowData.js}

@@ -1,4 +1,4 @@
-var inputStrsToRowDef = function (cols, inputStrs) {
+var inputStrsToRowData = function (cols, inputStrs) {
     var newRow = {};
     inputStrs.forEach(function (value, index) {
         var col = cols[index];
@@ -15,4 +15,4 @@ var inputStrsToRowDef = function (cols, inputStrs) {
     });
     return newRow;
 };
-export default inputStrsToRowDef;
+export default inputStrsToRowData;

package/editing/types.d.ts

@@ -1,4 +1,4 @@
-import { ColDataType, ColDataTypeStrings, RowDef } from "../types";
+import { ColDataType, ColDataTypeStrings, RowData, RowId } from "../types";
 export interface CellData {
     fieldName: string;
     value: ColDataType;
@@ -7,8 +7,8 @@ export interface CellData {
     formattedValue: string;
     label: string;
 }
-export type UpdateCallbackGenerator = (origIndex: number) => (rowDef: RowDef) => void;
+export type UpdateCallbackGenerator = (id: RowId) => (rowData: RowData) => void;
 export interface EditModel {
     getUpdateCallback: UpdateCallbackGenerator;
-    getDeleteCallback?: (origIndex: number) => () => void;
+    getDeleteCallback?: (id: RowId) => () => void;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@absreim/react-bootstrap-data-grid",
   "description": "Data grid UI component for use with web apps using React and Bootstrap",
-  "version": "1.4.1",
+  "version": "2.0.0",
   "license": "MIT",
   "author": "Brook Li",
   "homepage": "https://react-bootstrap-data-grid.vercel.app/",

package/pipeline/useCurrentPageRows.d.ts

@@ -1,4 +1,4 @@
-import { AugRowDef } from "../types";
+import { RowDef } from "../types";
 import { GridPaginationState } from "../pagination/types";
-declare const useCurrentPageRows: (sortedRows: AugRowDef[], pagination: GridPaginationState | undefined) => AugRowDef[];
+declare const useCurrentPageRows: (sortedRows: RowDef[], pagination: GridPaginationState | undefined) => RowDef[];
 export default useCurrentPageRows;

package/pipeline/useDisplayRows.d.ts

@@ -1,3 +1,3 @@
-import { AugRowDef, FormattedRow, ColDef } from "../types";
-declare const useDisplayRows: (currentPageRows: AugRowDef[], cols: ColDef[], ariaColIndexOffset: number) => FormattedRow[];
+import { RowDef, FormattedRow, ColDef } from "../types";
+declare const useDisplayRows: (currentPageRows: RowDef[], cols: ColDef[], ariaColIndexOffset: number) => FormattedRow[];
 export default useDisplayRows;

package/pipeline/useDisplayRows.js

@@ -1,16 +1,17 @@
 import { useMemo } from "react";
+import { dateToDatetimeInputStr, dateToInputStr } from "../util/datetime";
 var getFormattedValue = function (value, formatter, typeString) {
     if (formatter) {
         return formatter(value);
     }
     if (typeString === "date") {
-        return value.toDateString();
+        return dateToInputStr(value);
     }
     if (typeString === "datetime") {
-        return value.toLocaleString();
+        return dateToDatetimeInputStr(value);
     }
     if (typeString === "number") {
-        return value.toLocaleString();
+        return value.toString();
     }
     return value;
 };
@@ -52,7 +53,7 @@ var useDisplayRows = function (currentPageRows, cols, ariaColIndexOffset) {
                     label: cols[index].label,
                 };
             });
-            return { contents: displayRow, origIndex: row.meta.origIndex };
+            return { contents: displayRow, id: row.id };
         });
     }, [currentPageRows, cols, ariaColIndexOffset]);
 };

package/pipeline/useFilter.d.ts

@@ -1,4 +1,4 @@
-import { AugRowDef } from "../types";
+import { RowDef } from "../types";
 import { EditableTableFilterState } from "../filtering/types";
-declare const useFilter: (rows: AugRowDef[], filterState: EditableTableFilterState | null) => AugRowDef[];
+declare const useFilter: (rows: RowDef[], filterState: EditableTableFilterState | null) => RowDef[];
 export default useFilter;

package/pipeline/useSortedRows.d.ts

@@ -1,4 +1,4 @@
-import { AugRowDef, ColDef } from "../types";
+import { ColDef, RowDef } from "../types";
 import { TableSortModel } from "../sorting/types";
-declare const useSortedRows: (rows: AugRowDef[], cols: ColDef[], sortModel: TableSortModel | undefined) => AugRowDef[];
+declare const useSortedRows: (rows: RowDef[], cols: ColDef[], sortModel: TableSortModel | undefined) => RowDef[];
 export default useSortedRows;

package/selection/SelectAllHeaderCell.d.ts

@@ -1,9 +1,9 @@
 import { FC } from "react";
-import { SelectType } from "./types";
+import { SelectionInfo } from "./types";
 interface SelectAllHeaderCellProps {
     onClick: () => void;
-    selectType: SelectType;
-    selectionExists: boolean;
+    selectionInfo: SelectionInfo;
+    totalRows: number;
     additionalClasses?: string[];
 }
 declare const SelectAllHeaderCell: FC<SelectAllHeaderCellProps>;

package/selection/SelectAllHeaderCell.js

@@ -1,42 +1,55 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import deselectAll from "./deselectAll";
-import selectAll from "./selectAll";
-import arrowPlaceholder from "../sorting/arrowPlaceholder";
+import { useEffect, useRef } from "react";
 import classNames from "classnames";
-// It seems like React does not support setting indeterminate states on
-// checkboxes in a controlled manner, which caused me to not want to refactor
-// this feature to use a checkbox input instead of SVG icons. I am not sure how
-// much of an issue using an uncontrolled input would be, but because at time of
-// this writing I had already implemented a solution with SVG, on balance I felt
-// like it was not worth going out of my way to change things up to use an
-// uncontrolled checkbox input.
-var getSelectIcon = function (selectMode, existingSelection) {
-    if (existingSelection) {
-        return deselectAll;
+var getCheckboxState = function (selectionInfo, noRows) {
+    var disabledState = {
+        indeterminate: false,
+        checked: false,
+        disabled: true,
+        description: "Select all (disabled)",
+    };
+    if (noRows) {
+        return disabledState;
     }
-    if (selectMode === "multi" && !existingSelection) {
-        return selectAll;
+    var existingSelection = selectionInfo.existingSelection;
+    if (existingSelection === "full") {
+        return {
+            indeterminate: false,
+            checked: true,
+            disabled: false,
+            description: "Deselect all rows",
+        };
     }
-    // Single select mode and none selected means that the button is disabled
-    return arrowPlaceholder;
-};
-var getCellAriaDescription = function (selectMode, existingSelection) {
-    if (existingSelection) {
-        return "Deselect all rows";
+    if (existingSelection === true || existingSelection === "partial") {
+        return {
+            indeterminate: true,
+            checked: true,
+            disabled: false,
+            description: "Deselect all rows",
+        };
     }
-    if (selectMode === "multi" && !existingSelection) {
-        return "Select all rows";
+    if (existingSelection === "none") {
+        return {
+            indeterminate: false,
+            checked: false,
+            disabled: false,
+            description: "Select all rows",
+        };
     }
-    // Single select mode and none selected means that the button is disabled
-    return "Selection input header cell";
+    // single select mode and none selected
+    return disabledState;
 };
 var SelectAllHeaderCell = function (_a) {
-    var onClick = _a.onClick, selectType = _a.selectType, selectionExists = _a.selectionExists, additionalClasses = _a.additionalClasses;
-    var disabled = selectType === "single" && !selectionExists;
-    var description = getCellAriaDescription(selectType, selectionExists);
-    return (_jsx("th", { "aria-colindex": 1, title: description, "aria-description": description, className: classNames("rbdg-select-header-cell", {
+    var onClick = _a.onClick, selectionInfo = _a.selectionInfo, totalRows = _a.totalRows, additionalClasses = _a.additionalClasses;
+    var noRows = totalRows === 0;
+    var _b = getCheckboxState(selectionInfo, noRows), indeterminate = _b.indeterminate, checked = _b.checked, disabled = _b.disabled, description = _b.description;
+    var ref = useRef(null);
+    useEffect(function () {
+        ref.current.indeterminate = indeterminate;
+    }, [indeterminate]);
+    return (_jsx("th", { "aria-colindex": 1, title: description, "aria-description": description, className: classNames({
             "btn-primary": !additionalClasses || additionalClasses.length === 0,
-            "rbdg-clickable-grid-header-cell": !disabled,
-        }, additionalClasses || []), onClick: onClick, children: getSelectIcon(selectType, selectionExists) }));
+        }, additionalClasses || []), children: _jsx("input", { type: "checkbox", checked: checked, ref: ref, disabled: disabled, "aria-label": description, onChange: onClick }) }));
 };
 export default SelectAllHeaderCell;

package/selection/types.d.ts

@@ -1,16 +1,27 @@
+import { RowId } from "../types";
 export type SelectMode = "column" | "row" | "both";
 export type SelectType = "single" | "multi";
 export interface MultiSelectModel {
     mode: SelectMode;
     type: "multi";
-    selected: number[];
-    setSelected: (selected: number[]) => void;
+    selected: RowId[];
+    setSelected: (selected: RowId[]) => void;
 }
 export interface SingleSelectModel {
     mode: SelectMode;
     type: "single";
-    selected: number | null;
-    setSelected: (selected: number | null) => void;
+    selected: RowId | null;
+    setSelected: (selected: RowId | null) => void;
     groupName: string;
 }
 export type SelectModel = SingleSelectModel | MultiSelectModel;
+export type MultiExistingSelection = "full" | "partial" | "none";
+export interface SingleSelectionInfo {
+    selectType: "single";
+    existingSelection: boolean;
+}
+export interface MultiSelectionInfo {
+    selectType: "multi";
+    existingSelection: "full" | "partial" | "none";
+}
+export type SelectionInfo = SingleSelectionInfo | MultiSelectionInfo;

package/selection/types.js

@@ -1,4 +1,4 @@
-// Selected indices are based on the original index of the input rows. If
+// Selected indices are based on the id of the input rows. If
 // filtered-out items are included in the 'selected' property, there will be a
 // visual indication to the user of that fact.
 export {};

package/style.css

@@ -1 +1 @@
-.rbdg-clickable-grid-header-cell{cursor:pointer}.rbdg-select-header-cell .rdbg-svg-icon{background-color:var(--bs-btn-bg)}.rbdg-select-header-cell .rdbg-svg-icon-foreground{color:var(--bs-btn-color)}.rbdg-select-header-cell:hover .rdbg-svg-icon{background-color:var(--bs-btn-hover-bg)}.rbdg-select-header-cell:hover .rdbg-svg-icon-foreground{color:var(--bs-btn-hover-color)}.rbdg-grid{display:table}.rbdg-grid-head{display:table-header-group}.rbdg-grid-body{display:table-row-group}.rbdg-grid-row{display:table-row}.rbdg-grid-cell{display:table-cell}
+.rbdg-clickable-grid-header-cell{cursor:pointer}

package/style.scss

@@ -1,41 +1,3 @@
 .rbdg-clickable-grid-header-cell {
   cursor: pointer;
 }
-
-.rbdg-select-header-cell {
-  .rdbg-svg-icon {
-    background-color: var(--bs-btn-bg);
-  }
-  .rdbg-svg-icon-foreground {
-    color: var(--bs-btn-color);
-  }
-
-  &:hover {
-    .rdbg-svg-icon {
-      background-color: var(--bs-btn-hover-bg);
-    }
-    .rdbg-svg-icon-foreground {
-      color: var(--bs-btn-hover-color);
-    }
-  }
-}
-
-.rbdg-grid {
-  display: table;
-}
-
-.rbdg-grid-head {
-  display: table-header-group;
-}
-
-.rbdg-grid-body {
-  display: table-row-group;
-}
-
-.rbdg-grid-row {
-  display: table-row;
-}
-
-.rbdg-grid-cell {
-  display: table-cell;
-}

package/styling/types.d.ts

@@ -1,3 +1,4 @@
+import { RowId } from "../types";
 export interface SharedTableStyleModel {
     table?: string[];
     tbody?: string[];
@@ -7,18 +8,18 @@ export interface SharedTableStyleModel {
     caption?: string[];
 }
 export type TableStyleModel = SharedTableStyleModel & {
-    tbodyTr?: (origIndex: number, displayIndex: number) => string[];
-    tbodyTd?: (origRowIndex: number, displayRowIndex: number, colIndex: number) => string[];
-    tbodyTdInput?: (origRowIndex: number, displayRowIndex: number, colIndex: number) => string[];
+    tbodyTr?: (rowId: RowId, displayIndex: number) => string[];
+    tbodyTd?: (rowId: RowId, displayRowIndex: number, colIndex: number) => string[];
+    tbodyTdInput?: (rowId: RowId, displayRowIndex: number, colIndex: number) => string[];
     editColTh?: string[];
-    editColTd?: (origIndex: number, displayIndex: number) => string[];
-    editStartButton?: (origIndex: number, displayIndex: number) => string[];
-    editDeleteButton?: (origIndex: number, displayIndex: number) => string[];
-    editSaveButton?: (origIndex: number, displayIndex: number) => string[];
-    editCancelButton?: (origIndex: number, displayIndex: number) => string[];
+    editColTd?: (rowId: RowId, displayIndex: number) => string[];
+    editStartButton?: (rowId: RowId, displayIndex: number) => string[];
+    editDeleteButton?: (rowId: RowId, displayIndex: number) => string[];
+    editSaveButton?: (rowId: RowId, displayIndex: number) => string[];
+    editCancelButton?: (rowId: RowId, displayIndex: number) => string[];
     rowSelectColTh?: string[];
-    rowSelectColTd?: (origIndex: number, displayIndex: number) => string[];
-    rowSelectInput?: (origIndex: number, displayIndex: number) => string[];
+    rowSelectColTd?: (rowId: RowId, displayIndex: number) => string[];
+    rowSelectInput?: (rowId: RowId, displayIndex: number) => string[];
 };
 export type FilterInputTableStyleModel = SharedTableStyleModel & {
     tbodyTr?: (rowIndex: number) => string[];

package/types.d.ts

@@ -1,24 +1,24 @@
 import { CellData } from "./editing/types";
 export type ColDataType = string | number | Date;
 export type ColDataTypeStrings = "string" | "number" | "date" | "datetime";
-export interface ColDef {
+export interface ColDef<ValueType = any> {
     type: ColDataTypeStrings;
     name: string;
     label: string;
-    formatter?: (value: any) => string;
+    formatter?: (value: ValueType) => string;
     sortable?: boolean;
 }
-export type RowDef = Record<string, ColDataType>;
-export interface RowMetadata {
-    origIndex: number;
-}
-export interface AugRowDef {
-    data: RowDef;
-    meta: RowMetadata;
+type ValidRowData = Record<string, any>;
+export type RowData<Data extends ValidRowData = ValidRowData> = Data;
+export type RowId = string | number;
+export interface RowDef<Data extends ValidRowData = ValidRowData> {
+    id: RowId;
+    data: RowData<Data>;
 }
 export interface FormattedRow {
     contents: CellData[];
-    origIndex: number;
+    id: RowId;
 }
 export type JustifyContentSetting = "start" | "end" | "center" | "between" | "around" | "evenly";
 export type Size = "small" | "medium" | "large";
+export {};

package/util/isSubset.d.ts

@@ -0,0 +1,2 @@
+declare const isSubset: <T>(subset: T[], superSet: T[]) => boolean;
+export default isSubset;

package/util/isSubset.js

@@ -0,0 +1,11 @@
+var isSubset = function (subset, superSet) {
+    var supersetSet = new Set(superSet);
+    for (var _i = 0, subset_1 = subset; _i < subset_1.length; _i++) {
+        var member = subset_1[_i];
+        if (!supersetSet.has(member)) {
+            return false;
+        }
+    }
+    return true;
+};
+export default isSubset;

package/editing/inputStrsToRowDef.d.ts

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

package/pipeline/useAugmentedRows.d.ts

@@ -1,3 +0,0 @@
-import { AugRowDef, RowDef } from "../types";
-declare const useAugmentedRows: (rows: RowDef[]) => AugRowDef[];
-export default useAugmentedRows;

package/pipeline/useAugmentedRows.js

@@ -1,12 +0,0 @@
-import { useMemo } from "react";
-var useAugmentedRows = function (rows) {
-    return useMemo(function () {
-        return rows.map(function (row, index) { return ({
-            data: row,
-            meta: {
-                origIndex: index,
-            },
-        }); });
-    }, [rows]);
-};
-export default useAugmentedRows;

package/selection/deselectAll.d.ts

@@ -1,2 +0,0 @@
-declare const deselectAll: import("react/jsx-runtime").JSX.Element;
-export default deselectAll;

package/selection/deselectAll.js

@@ -1,3 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var deselectAll = (_jsxs("svg", { className: "rdbg-svg-icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", width: "16", height: "16", fill: "currentColor", children: [_jsx("desc", { children: "Minus sign inside a square" }), _jsx("rect", { className: "rdbg-svg-icon-foreground", x: "3.5", y: "7.5", width: "9", height: "1" })] }));
-export default deselectAll;

package/selection/selectAll.d.ts

@@ -1,2 +0,0 @@
-declare const selectAll: import("react/jsx-runtime").JSX.Element;
-export default selectAll;

package/selection/selectAll.js

@@ -1,3 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var selectAll = (_jsxs("svg", { className: "rdbg-svg-icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", width: "16", height: "16", fill: "currentColor", children: [_jsx("desc", { children: "Plus sign inside a square" }), _jsx("rect", { className: "rdbg-svg-icon-foreground", x: "3.5", y: "7.5", width: "9", height: "1" }), _jsx("rect", { className: "rdbg-svg-icon-foreground", x: "3.5", y: "7.5", width: "9", height: "1", transform: "translate(0 16) rotate(-90)" })] }));
-export default selectAll;