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

package/Grid.js

@@ -17,18 +17,20 @@ 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 filterState = useFilterStateFromEditable(cols, editableFilterState);
+    var normalizedTableFilterModel = useFilterStateStore(filterModel, cols);
+    var editableFilterState = (normalizedTableFilterModel === null || normalizedTableFilterModel === void 0 ? void 0 : normalizedTableFilterModel.tableFilterState) || null;
     var filteredRows = useFilter(rows, editableFilterState);
-    var sortedRows = useSortedRows(filteredRows, cols, sortModel);
-    var currentPageRows = useCurrentPageRows(sortedRows, pagination);
+    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(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);
     };
@@ -113,9 +115,9 @@ var Grid = function (_a) {
         }
         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";
             }
@@ -157,18 +159,16 @@ var Grid = function (_a) {
     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;
@@ -183,6 +183,6 @@ var Grid = function (_a) {
                                         }, 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));
-                                }) })] }), 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 }))] })] }));
+                                }) })] }), normalizedModel && (_jsx(Pagination, { normalizedModel: normalizedModel, prePagingNumRows: sortedRows.length }))] })] }));
 };
 export default Grid;

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": "2.0.0",
+  "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 { RowDef } from "../types";
-import { GridPaginationState } from "../pagination/types";
-declare const useCurrentPageRows: (sortedRows: RowDef[], pagination: GridPaginationState | undefined) => RowDef[];
+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/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 { ColDef, RowDef } from "../types";
-import { TableSortModel } from "../sorting/types";
-declare const useSortedRows: (rows: RowDef[], cols: ColDef[], sortModel: TableSortModel | undefined) => RowDef[];
+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/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;