@absreim/react-bootstrap-data-grid 1.4.2 → 2.1.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,23 +13,24 @@ 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";
+import useFilterStateStore from "./pipeline/useFilterStateStore";
 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 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 augmentedRows = useAugmentedRows(rows);
-    var filteredRows = useFilter(augmentedRows, editableFilterState);
-    var sortedRows = useSortedRows(filteredRows, cols, sortModel);
-    var currentPageRows = useCurrentPageRows(sortedRows, pagination);
+    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(currentPageRows, cols, ariaColIndexOffset);
-    var _c = useState(false), filterOptionsVisible = _c[0], setFilterOptionsVisible = _c[1];
+    var displayRows = useDisplayRows(paginatedRows, cols, ariaColIndexOffset);
+    var _e = useState(false), filterOptionsVisible = _e[0], setFilterOptionsVisible = _e[1];
     var handleToggleFilterOptions = function () {
         setFilterOptionsVisible(!filterOptionsVisible);
     };
@@ -81,7 +81,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",
@@ -90,7 +90,7 @@ var Grid = function (_a) {
         }
         return {
             type: "checkbox",
-            deselectCallback: getDeselectHandler(index),
+            deselectCallback: getDeselectHandler(id),
         };
     };
     var selectedSet = new Set();
@@ -110,14 +110,14 @@ var Grid = function (_a) {
         if (selectModel.type === "single") {
             return {
                 selectType: "single",
-                existingSelection: selectionExists
+                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
+            // 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";
             }
@@ -128,7 +128,7 @@ var Grid = function (_a) {
         };
         return {
             selectType: "multi",
-            existingSelection: getMultiExistingSelection(selectionExists, rows)
+            existingSelection: getMultiExistingSelection(selectionExists, rows),
         };
     }, [selectModel, selectionExists, rows]);
     var getRowClickHandler = function (index) { return function () {
@@ -141,50 +141,48 @@ 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]);
     var unwrappedAdditionalStyleModel = useMemo(function () {
         return unwrapAdditionalComponentsStyleModel(styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel);
     }, [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", {
+    return (_jsxs("div", { "data-testid": "rbdg-top-level-div", className: classNames(unwrappedAdditionalStyleModel.topLevelDiv), children: [normalizedTableFilterModel && (_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 }))] })), _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, { 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
+                                            var colSortModel = sortingEnabled && sortable
                                                 ? {
-                                                    sortOrder: ((_b = sortModel.sortColDef) === null || _b === void 0 ? void 0 : _b.name) === name
-                                                        ? sortModel.sortColDef.order
-                                                        : null,
+                                                    sortOrder: (sortColDef === null || sortColDef === void 0 ? void 0 : sortColDef.name) === name ? sortColDef.order : null,
                                                     setSortOrder: function (order) {
-                                                        sortModel.setSortColDef(order && { name: name, order: 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.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));
-                                }) })] }), 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 }))] })] }));
+                                            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));
+                                }) })] }), normalizedModel && (_jsx(Pagination, { normalizedModel: normalizedModel, prePagingNumRows: sortedRows.length }))] })] }));
 };
 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/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/filtering/types.d.ts

@@ -45,16 +45,22 @@ export interface BetweenDatesFilterState extends AbstractDateFilterState {
 }
 export type DateFilterState = StartDateFilterState | EndDateFilterState | BetweenDatesFilterState;
 export type FilterState = StringFilterState | NumberFilterState | DateFilterState;
-export interface FilterModel {
+export interface ControlledFilterModel {
+    type?: "controlled";
     tableFilterState: EditableTableFilterState;
     setTableFilterState: (state: EditableTableFilterState) => void;
     filterTableCaption?: string;
 }
+export type UncontrolledFilterModel = Partial<Pick<ControlledFilterModel, "tableFilterState" | "filterTableCaption">> & {
+    type: "uncontrolled";
+};
+export type NormalizedTableFilterModel = Pick<ControlledFilterModel, "tableFilterState" | "setTableFilterState">;
 export interface NumberFormFilterState extends AbstractFilterState {
     type: "number";
     scheme: NumberFilterScheme;
     inputValue: string;
 }
+export type FilterModel = ControlledFilterModel | UncontrolledFilterModel;
 export interface DateFormFilterState extends AbstractDateFilterState {
     scheme: DateFilterScheme;
     startDate: string;

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.2",
+  "version": "2.1.0",
   "license": "MIT",
   "author": "Brook Li",
   "homepage": "https://react-bootstrap-data-grid.vercel.app/",

package/pagination/Pagination.d.ts

@@ -1,14 +1,9 @@
 import { FC } from "react";
-import { JustifyContentSetting, Size } from "../types";
+import { JustifyContentSetting } from "../types";
+import { NormalizedPaginationModel } from "./types";
 export interface PaginationProps {
-    componentSize: Size;
-    pageSizeOptions: number[];
-    pageSizeIndex: number;
-    handleSetPageSizeIndex: (index: number) => void;
-    handleSetPageNum: (index: number) => void;
+    normalizedModel: NormalizedPaginationModel;
     prePagingNumRows: number;
-    maxPageButtons: number;
-    currentPage: number;
     pageSelectorAriaLabel?: string;
     pageSelectorJustifyContent?: JustifyContentSetting;
 }

package/pagination/Pagination.js

@@ -2,19 +2,20 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import PageSizeSelector from "./PageSizeSelector";
 import PageSelector from "./PageSelector";
 var Pagination = function (_a) {
-    var componentSize = _a.componentSize, pageSizeOptions = _a.pageSizeOptions, pageSizeIndex = _a.pageSizeIndex, handleSetPageSizeIndex = _a.handleSetPageSizeIndex, handleSetPageNum = _a.handleSetPageNum, prePagingNumRows = _a.prePagingNumRows, maxPageButtons = _a.maxPageButtons, currentPage = _a.currentPage, pageSelectorAriaLabel = _a.pageSelectorAriaLabel, pageSelectorJustifyContent = _a.pageSelectorJustifyContent;
+    var normalizedModel = _a.normalizedModel, prePagingNumRows = _a.prePagingNumRows;
+    var pageSizeOptions = normalizedModel.pageSizeOptions, pageSizeIndex = normalizedModel.pageSizeIndex, currentPage = normalizedModel.currentPage, setCurrentPage = normalizedModel.setCurrentPage, setPageSizeIndex = normalizedModel.setPageSizeIndex, componentSize = normalizedModel.componentSize, maxPageButtons = normalizedModel.maxPageButtons, pageSelectorAriaLabel = normalizedModel.pageSelectorAriaLabel, pageSelectorJustifyContent = normalizedModel.pageSelectorJustifyContent;
     var numPages = Math.ceil(prePagingNumRows / pageSizeOptions[pageSizeIndex]);
     var pageIndexAwarePageSizeSetter = function (newPageSizeIndex) {
         var newPageSize = pageSizeOptions[newPageSizeIndex];
         var maxPages = Math.ceil(prePagingNumRows / newPageSize);
-        handleSetPageSizeIndex(newPageSizeIndex);
+        setPageSizeIndex(newPageSizeIndex);
         // The new page size can cause the current page number to be out of bounds.
         // In that case, set the page num to the maximum possible with new page
         // size.
         if (currentPage > maxPages) {
-            handleSetPageNum(maxPages);
+            setCurrentPage(maxPages);
         }
     };
-    return (_jsxs("div", { className: "d-flex justify-content-end gap-2", children: [_jsx(PageSizeSelector, { componentSize: componentSize, pageSizeOptions: pageSizeOptions, pageSizeIndex: pageSizeIndex, handleSetPageSize: pageIndexAwarePageSizeSetter }), _jsx(PageSelector, { numPages: numPages, pageNum: currentPage, numButtons: maxPageButtons, setPageNum: handleSetPageNum, size: componentSize, ariaLabel: pageSelectorAriaLabel, alignment: pageSelectorJustifyContent })] }));
+    return (_jsxs("div", { className: "d-flex justify-content-end gap-2", children: [_jsx(PageSizeSelector, { componentSize: componentSize, pageSizeOptions: pageSizeOptions, pageSizeIndex: pageSizeIndex, handleSetPageSize: pageIndexAwarePageSizeSetter }), _jsx(PageSelector, { numPages: numPages, pageNum: currentPage, numButtons: maxPageButtons, setPageNum: setCurrentPage, size: componentSize, ariaLabel: pageSelectorAriaLabel, alignment: pageSelectorJustifyContent })] }));
 };
 export default Pagination;

package/pagination/types.d.ts

@@ -1,12 +1,22 @@
 import { JustifyContentSetting, Size } from "../types";
-export interface GridPaginationState {
-    pageSizeOptions: number[];
-    pageSizeIndex: number;
-    setPageSizeIndex: (pageSizeIndex: number) => void;
-    currentPage: number;
-    setCurrentPage: (pageNum: number) => void;
-    maxPageButtons: number;
+export interface PaginationOptions {
+    pageSizeOptions?: number[];
+    maxPageButtons?: number;
     componentSize?: Size;
     pageSelectorAriaLabel?: string;
     pageSelectorJustifyContent?: JustifyContentSetting;
 }
+export type ControlledPaginationModel = PaginationOptions & {
+    type?: "controlled";
+    pageSizeIndex: number;
+    setPageSizeIndex: (pageSizeIndex: number) => void;
+    currentPage: number;
+    setCurrentPage: (pageNum: number) => void;
+};
+export type UncontrolledPaginationModel = PaginationOptions & {
+    type: "uncontrolled";
+    startingPageSizeIndex?: number;
+    startingCurrentPage?: number;
+};
+export type GridPaginationState = ControlledPaginationModel | UncontrolledPaginationModel;
+export type NormalizedPaginationModel = Required<Omit<ControlledPaginationModel, "type" | "pageSelectorAriaLabel" | "pageSelectorJustifyContent">> & Pick<ControlledPaginationModel, "pageSelectorAriaLabel" | "pageSelectorJustifyContent">;

package/pipeline/useCurrentPageRows.d.ts

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

package/pipeline/useCurrentPageRows.js

@@ -1,14 +1,52 @@
-import { useMemo } from "react";
-var useCurrentPageRows = function (sortedRows, pagination) {
+import { useMemo, useState } from "react";
+var useCurrentPageRows = function (sortedRows, paginationModel) {
+    var componentSize = (paginationModel === null || paginationModel === void 0 ? void 0 : paginationModel.componentSize) || "medium";
+    var isControlled = (paginationModel === null || paginationModel === void 0 ? void 0 : paginationModel.type) !== "uncontrolled";
+    var _a = useState(isControlled ? 0 : paginationModel.startingPageSizeIndex || 0), internalPageSizeIndex = _a[0], setInternalPageSizeIndex = _a[1];
+    var pageSizeIndex = isControlled
+        ? (paginationModel === null || paginationModel === void 0 ? void 0 : paginationModel.pageSizeIndex) || 0
+        : internalPageSizeIndex;
+    var setPageSizeIndex = isControlled
+        ? paginationModel === null || paginationModel === void 0 ? void 0 : paginationModel.setPageSizeIndex
+        : setInternalPageSizeIndex;
+    var _b = useState(isControlled ? 1 : paginationModel.startingCurrentPage || 1), internalPageNum = _b[0], setInternalPageNum = _b[1];
+    var currentPage = isControlled
+        ? (paginationModel === null || paginationModel === void 0 ? void 0 : paginationModel.currentPage) || 1
+        : internalPageNum;
+    var setCurrentPage = isControlled
+        ? paginationModel === null || paginationModel === void 0 ? void 0 : paginationModel.setCurrentPage
+        : setInternalPageNum;
+    var maxPageButtons = (paginationModel === null || paginationModel === void 0 ? void 0 : paginationModel.maxPageButtons) || 5;
     return useMemo(function () {
-        if (pagination === undefined) {
-            return sortedRows;
+        if (paginationModel === undefined) {
+            return { paginatedRows: sortedRows, normalizedModel: null };
         }
-        var pageSizeOptions = pagination.pageSizeOptions, pageSizeIndex = pagination.pageSizeIndex, currentPage = pagination.currentPage;
+        var pageSizeOptions = (paginationModel === null || paginationModel === void 0 ? void 0 : paginationModel.pageSizeOptions) || [10, 25, 100];
+        var normalizedModel = {
+            pageSizeIndex: pageSizeIndex,
+            setPageSizeIndex: setPageSizeIndex,
+            currentPage: currentPage,
+            setCurrentPage: setCurrentPage,
+            pageSizeOptions: pageSizeOptions,
+            maxPageButtons: maxPageButtons,
+            componentSize: componentSize,
+            pageSelectorAriaLabel: paginationModel === null || paginationModel === void 0 ? void 0 : paginationModel.pageSelectorAriaLabel,
+            pageSelectorJustifyContent: paginationModel === null || paginationModel === void 0 ? void 0 : paginationModel.pageSelectorJustifyContent,
+        };
         var pageSize = pageSizeOptions[pageSizeIndex];
         var lowerIndex = pageSize * (currentPage - 1);
         var upperIndex = lowerIndex + pageSize;
-        return sortedRows.slice(lowerIndex, upperIndex);
-    }, [sortedRows, pagination]);
+        var paginatedRows = sortedRows.slice(lowerIndex, upperIndex);
+        return { paginatedRows: paginatedRows, normalizedModel: normalizedModel };
+    }, [
+        paginationModel,
+        pageSizeIndex,
+        setPageSizeIndex,
+        currentPage,
+        setCurrentPage,
+        maxPageButtons,
+        componentSize,
+        sortedRows,
+    ]);
 };
 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/useFilterStateStore.d.ts

@@ -0,0 +1,4 @@
+import { FilterModel, NormalizedTableFilterModel } from "../filtering/types";
+import { ColDef } from "../types";
+declare const useFilterStateStore: (filterModel: FilterModel | undefined, cols: ColDef[]) => NormalizedTableFilterModel | null;
+export default useFilterStateStore;

package/pipeline/useFilterStateStore.js

@@ -0,0 +1,57 @@
+import { useState } from "react";
+var generateEmptyFilterState = function (cols) {
+    var filterState = {};
+    cols.forEach(function (_a) {
+        var type = _a.type, name = _a.name;
+        switch (type) {
+            case "string": {
+                filterState[name] = {
+                    type: "string",
+                    enabled: false,
+                    scheme: "contains",
+                    searchString: "",
+                };
+                break;
+            }
+            case "number": {
+                filterState[name] = {
+                    type: "number",
+                    enabled: false,
+                    scheme: "greaterOrEqual",
+                    numValue: null,
+                };
+                break;
+            }
+            default: {
+                filterState[name] = {
+                    type: type,
+                    enabled: false,
+                    scheme: "startFrom",
+                    startDate: null,
+                };
+            }
+        }
+    });
+    return filterState;
+};
+var useFilterStateStore = function (filterModel, cols) {
+    // Initial states being from prop values means that should uncontrolled
+    // FilterModel starting values change, the changes will not take effect
+    // unless the Grid is remounted. The documentation for this and other
+    // uncontrolled features should indicate this fact and recommend using
+    // controlled modes if this behavior is unacceptable.
+    var _a = useState((filterModel === null || filterModel === void 0 ? void 0 : filterModel.tableFilterState) || generateEmptyFilterState(cols)), internalFilterState = _a[0], setInternalFilterState = _a[1];
+    if (!filterModel) {
+        return null;
+    }
+    return filterModel.type === "uncontrolled"
+        ? {
+            tableFilterState: internalFilterState,
+            setTableFilterState: setInternalFilterState,
+        }
+        : {
+            tableFilterState: filterModel.tableFilterState,
+            setTableFilterState: filterModel.setTableFilterState,
+        };
+};
+export default useFilterStateStore;

package/pipeline/useSortedRows.d.ts

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

package/pipeline/useSortedRows.js

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 var getTypeComparator = function (typeStr) {
     if (typeStr === "date" || typeStr === "datetime") {
         return function (a, b) { return a.valueOf() - b.valueOf(); };
@@ -20,12 +20,21 @@ var getRowComparator = function (comparator, fieldName) {
     return function (rowA, rowB) { return comparator(rowA.data[fieldName], rowB.data[fieldName]); };
 };
 var useSortedRows = function (rows, cols, sortModel) {
-    return useMemo(function () {
-        if (!sortModel || !sortModel.sortColDef) {
+    var _a = useState(((sortModel === null || sortModel === void 0 ? void 0 : sortModel.type) === "uncontrolled" && sortModel.initialSortColDef) ||
+        null), internalSortColDef = _a[0], setInternalSortColDef = _a[1];
+    var sortColDef = (sortModel === null || sortModel === void 0 ? void 0 : sortModel.type) === "uncontrolled"
+        ? internalSortColDef
+        : (sortModel === null || sortModel === void 0 ? void 0 : sortModel.sortColDef) || undefined;
+    var setSortColDef = (sortModel === null || sortModel === void 0 ? void 0 : sortModel.type) === "uncontrolled"
+        ? setInternalSortColDef
+        : (sortModel === null || sortModel === void 0 ? void 0 : sortModel.setSortColDef) || undefined;
+    var sortingEnabled = !!sortModel;
+    var sortedRows = useMemo(function () {
+        if (!sortColDef) {
             return rows;
         }
-        var sortFieldName = sortModel.sortColDef.name;
-        var sortOrder = sortModel.sortColDef.order;
+        var sortFieldName = sortColDef.name;
+        var sortOrder = sortColDef.order;
         var sortColIndex = cols.findIndex(function (_a) {
             var name = _a.name;
             return name === sortFieldName;
@@ -43,6 +52,7 @@ var useSortedRows = function (rows, cols, sortModel) {
             rowComparator = getRowComparator(descComparator, sortFieldName);
         }
         return rows.slice().sort(rowComparator);
-    }, [rows, cols, sortModel]);
+    }, [sortColDef, cols, rows]);
+    return { sortedRows: sortedRows, sortingEnabled: sortingEnabled, sortColDef: sortColDef, setSortColDef: setSortColDef };
 };
 export default useSortedRows;

package/selection/types.d.ts

@@ -1,16 +1,17 @@
+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;
@@ -21,6 +22,6 @@ export interface SingleSelectionInfo {
 }
 export interface MultiSelectionInfo {
     selectType: "multi";
-    existingSelection: 'full' | 'partial' | 'none';
+    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/sorting/types.d.ts

@@ -7,7 +7,13 @@ export interface ColSortModel {
     sortOrder: SortOrder | null;
     setSortOrder: (order: SortOrder | null) => void;
 }
-export interface TableSortModel {
+export interface ControlledTableSortModel {
+    type?: "controlled";
     sortColDef: SortColDef | null;
     setSortColDef: (sortColDef: SortColDef | null) => void;
 }
+export interface UncontrolledTableSortModel {
+    type: "uncontrolled";
+    initialSortColDef: SortColDef | null;
+}
+export type TableSortModel = ControlledTableSortModel | UncontrolledTableSortModel;

package/style.scss

@@ -1,3 +1,3 @@
 .rbdg-clickable-grid-header-cell {
   cursor: pointer;
-}
+}

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

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

package/util/isSubset.js

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

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;