@absreim/react-bootstrap-data-grid 1.1.4 → 1.2.1

package/ColHeaderCell.jsx

@@ -1,50 +1,12 @@
 "use client";
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import { useState } from "react";
+import downArrow from "./icons/downArrow";
+import upArrow from "./icons/upArrow";
+import arrowPlaceholder from "./icons/arrowPlaceholder";
 import classNames from "classnames";
-var getUpArrow = function (grayed) { return (<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className={classNames(__spreadArray([
-        "bi",
-        "bi-arrow-up"
-    ], (grayed ? ["text-body-secondary"] : []), true))} viewBox="0 0 16 16">
-    {!grayed && (<>
-        <title>(sorted ascending)</title>
-        <desc>
-          Up arrow indicating that the column is being sorted in an ascending
-          manner
-        </desc>
-      </>)}
-    <path fillRule="evenodd" d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5"/>
-  </svg>); };
-var downArrow = (<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-arrow-down" viewBox="0 0 16 16">
-    <title>(sorted descending)</title>
-    <desc>
-      Down arrow indicating that the column is being sorted in an descending
-      manner
-    </desc>
-    <path fillRule="evenodd" d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1"/>
-  </svg>);
-// Temporary solution to prevent column widths from changing when hovering over
-// columns with a mouse.
-// More ideal permanent solution would be to fix column widths based on preset
-// values.
-var placeholder = (<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-arrow-down" viewBox="0 0 16 16"></svg>);
+import useControlledHover from "./hooks/useControlledHover";
 var ColHeaderCell = function (_a) {
     var label = _a.label, sortModel = _a.sortModel, ariaColIndex = _a.ariaColIndex;
-    var _b = useState(false), isHovering = _b[0], setIsHovering = _b[1];
-    var handleMouseOver = function () {
-        return setIsHovering(true);
-    };
-    var handleMouseOut = function () {
-        return setIsHovering(false);
-    };
+    var _b = useControlledHover(), isHovering = _b.isHovering, handleMouseOver = _b.handleMouseOver, handleMouseOut = _b.handleMouseOut;
     var handleClick = function () {
         if (!sortModel) {
             return;
@@ -70,21 +32,24 @@ var ColHeaderCell = function (_a) {
         switch (sortModel.sortOrder) {
             case null: {
                 if (isHovering) {
-                    return getUpArrow(true);
+                    return upArrow(true);
                 }
-                return placeholder;
+                return arrowPlaceholder;
             }
             case "asc": {
-                return getUpArrow(false);
+                return upArrow(false);
             }
             case "desc": {
                 return downArrow;
             }
         }
     };
-    return (<th onClick={sortModel && handleClick} onMouseOver={handleMouseOver} onMouseOut={handleMouseOut} aria-description={sortModel
+    return (<th className={classNames({
+            "cursor-pointer": sortModel,
+            "table-active": sortModel === null || sortModel === void 0 ? void 0 : sortModel.sortOrder,
+        })} onClick={sortModel && handleClick} onMouseOver={handleMouseOver} onMouseOut={handleMouseOut} aria-description={sortModel
             ? "Column header"
-            : "Column header that can be clicked to change the sorting mode"} style={{ cursor: sortModel ? "pointer" : "default" }} aria-colindex={ariaColIndex}>
+            : "Column header that can be clicked to change the sorting mode"} aria-colindex={ariaColIndex}>
       {label}
       {getSortSymbol()}
     </th>);

package/Grid.d.ts

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { ColDef, FilterModel, RowDef, Size, TableSortModel } from "./types";
+import { ColDef, FilterModel, RowDef, SelectModel, Size, TableSortModel } from "./types";
 export interface GridPaginationState {
     pageSizeOptions: number[];
     pageSizeIndex: number;
@@ -15,6 +15,7 @@ export interface GridProps {
     pagination?: GridPaginationState;
     sortModel?: TableSortModel;
     filterModel?: FilterModel;
+    selectModel?: SelectModel;
 }
 declare const Grid: FC<GridProps>;
 export default Grid;

package/Grid.jsx

@@ -1,7 +1,5 @@
 "use client";
 import { useMemo, useState } from "react";
-import Pagination from "./Pagination";
-import classNames from "classnames";
 import ColHeaderCell from "./ColHeaderCell";
 import useFilter from "./hooks/useFilter";
 import ToggleButton from "./ToggleButton";
@@ -10,8 +8,12 @@ import useFilterStateFromEditable from "./hooks/useFilterStateFromEditable";
 import useAugmentedRows from "./hooks/useAugmentedRows";
 import useSortedRows from "./hooks/useSortedRows";
 import useDisplayRows from "./hooks/useDisplayRows";
+import SelectAllHeaderCell from "./selection/SelectAllHeaderCell";
+import SelectionInput from "./selection/SelectionInput";
+import Pagination from "./pagination/Pagination";
+import classNames from "classnames";
 var Grid = function (_a) {
-    var rows = _a.rows, cols = _a.cols, pagination = _a.pagination, sortModel = _a.sortModel, filterModel = _a.filterModel;
+    var rows = _a.rows, cols = _a.cols, pagination = _a.pagination, sortModel = _a.sortModel, filterModel = _a.filterModel, selectModel = _a.selectModel;
     var editableFilterState = (filterModel === null || filterModel === void 0 ? void 0 : filterModel.tableFilterState) || null;
     var filterState = useFilterStateFromEditable(cols, editableFilterState);
     var augmentedRows = useAugmentedRows(rows);
@@ -29,26 +31,95 @@ var Grid = function (_a) {
     }, [sortedRows, pagination]);
     var displayRows = useDisplayRows(currentPageRows, cols);
     var _b = useState(false), filterOptionsVisible = _b[0], setFilterOptionsVisible = _b[1];
-    var handleSetPageNum = function (pageNum) {
-        if (pagination === undefined) {
+    var handleToggleFilterOptions = function () {
+        setFilterOptionsVisible(!filterOptionsVisible);
+    };
+    var getSelectionExists = function () {
+        if (!selectModel) {
+            return false;
+        }
+        if (selectModel.type === "single") {
+            return selectModel.selected !== null;
+        }
+        return selectModel.selected.length > 0;
+    };
+    var selectionExists = getSelectionExists();
+    var selectAllOnClick = function () {
+        if (!selectModel) {
+            return;
+        }
+        if (selectionExists && selectModel.type === "single") {
+            selectModel.setSelected(null);
             return;
         }
-        pagination.setCurrentPage(pageNum);
+        if (selectionExists && selectModel.type === "multi") {
+            selectModel.setSelected([]);
+            return;
+        }
+        if (!selectionExists && selectModel.type === "multi") {
+            var allFilteredRowIndices = filteredRows.map(function (def) { return def.meta.origIndex; });
+            selectModel.setSelected(allFilteredRowIndices);
+        }
+        // Button should be disabled in the case of selectionExists &&
+        // selectModel.type === "single", so function execution should never get
+        // to this point.
     };
-    var handleSetPageSize = function (event) {
-        if (pagination === undefined) {
+    var getSelectHandler = function (index) { return function () {
+        if (!selectModel) {
+            return;
+        }
+        if (selectModel.type === "single") {
+            selectModel.setSelected(index);
             return;
         }
-        var newPageSizeIndex = Number(event.target.value);
-        var newPageSize = pagination.pageSizeOptions[newPageSizeIndex];
-        var maxPages = Math.ceil(filteredRows.length / newPageSize);
-        pagination.setPageSizeIndex(newPageSizeIndex);
-        if (pagination.currentPage > maxPages) {
-            pagination.setCurrentPage(maxPages);
+        selectModel.setSelected(selectModel.selected.concat(index));
+    }; };
+    var getDeselectHandler = function (index) { return function () {
+        if (!selectModel || selectModel.type === "single") {
+            return;
         }
+        selectModel.setSelected(selectModel.selected.filter(function (num) { return num !== index; }));
+    }; };
+    // used to group radio buttons for selection
+    var getSelectInputModel = function (index, selectModel) {
+        if (selectModel.type === "single") {
+            return {
+                type: "radio",
+                name: selectModel.groupName,
+            };
+        }
+        return {
+            type: "checkbox",
+            deselectCallback: getDeselectHandler(index),
+        };
     };
-    var handleToggleFilterOptions = function () {
-        setFilterOptionsVisible(!filterOptionsVisible);
+    var showSelectCol = selectModel && selectModel.mode !== "row";
+    var selectedSet = new Set();
+    if (selectModel && selectModel.type === "multi") {
+        selectModel.selected.forEach(function (value) { return selectedSet.add(value); });
+    }
+    if (selectModel &&
+        selectModel.type === "single" &&
+        selectModel.selected !== null) {
+        selectedSet.add(selectModel.selected);
+    }
+    var rowsAreSelectable = !!(selectModel && selectModel.mode !== "column");
+    var getRowClickHandler = function (index) { return function (event) {
+        event.preventDefault();
+        if (!rowsAreSelectable) {
+            return;
+        }
+        if (selectedSet.has(index)) {
+            getDeselectHandler(index)();
+            return;
+        }
+        getSelectHandler(index)();
+    }; };
+    var getAriaSelectedValue = function (index) {
+        if (!selectModel) {
+            return undefined;
+        }
+        return String(selectedSet.has(index));
     };
     // Once this component implements selection state, and if such interactivity is enabled, (conditionally) change the
     // aria role to "grid".
@@ -58,9 +129,12 @@ var Grid = function (_a) {
           <ToggleButton isActive={filterOptionsVisible} label={"".concat(filterOptionsVisible ? "Hide" : "Show ", " Filter Options")} onClick={handleToggleFilterOptions}/>
           {filterOptionsVisible && (<FilterOptionsTable filterState={filterState} setFilterState={filterModel.setTableFilterState}/>)}
         </div>)}
-      <table className="table" aria-rowcount={filteredRows.length + 1}>
+      <table className={classNames("table", {
+            "table-hover": rowsAreSelectable,
+        })} aria-rowcount={filteredRows.length + 1}>
         <thead>
           <tr aria-rowindex={1}>
+            {showSelectCol && (<SelectAllHeaderCell selectType={selectModel.type} onClick={selectAllOnClick} selectionExists={selectionExists}/>)}
             {cols.map(function (_a, index) {
             var _b;
             var name = _a.name, label = _a.label, sortable = _a.sortable;
@@ -74,33 +148,24 @@ var Grid = function (_a) {
                     },
                 }
                 : undefined;
-            return (<ColHeaderCell key={name} label={label} sortModel={colSortModel} ariaColIndex={index + 1}/>);
+            return (<ColHeaderCell key={name} label={label} sortModel={colSortModel} ariaColIndex={index + 1 + (showSelectCol ? 1 : 0)}/>);
         })}
           </tr>
         </thead>
         <tbody>
-          {displayRows.map(function (row, index) { return (<tr key={row.origIndex} aria-rowindex={index + 2} data-rowindex={row.origIndex}>
-              {row.contents.map(function (value, index) { return (<td key={index} aria-colindex={index + 1}>
+          {displayRows.map(function (row, index) { return (<tr onClick={getRowClickHandler(row.origIndex)} className={classNames({
+                "table-active": selectedSet.has(row.origIndex),
+            })} key={row.origIndex} aria-rowindex={index + 2} data-rowindex={row.origIndex} aria-selected={getAriaSelectedValue(row.origIndex)}>
+              {showSelectCol && (<td>
+                  <SelectionInput selected={selectedSet.has(row.origIndex)} selectionInputModel={getSelectInputModel(row.origIndex, selectModel)} selectCallback={getSelectHandler(row.origIndex)}/>
+                </td>)}
+              {row.contents.map(function (value, index) { return (<td key={index} aria-colindex={index + 1 + (showSelectCol ? 1 : 0)}>
                   {value}
                 </td>); })}
             </tr>); })}
         </tbody>
       </table>
-      {pagination && (<div className="d-flex justify-content-end gap-2">
-          <div>
-            <select className={classNames({
-                "form-select": true,
-                "form-select-lg": pagination.componentSize === "large",
-                "form-select-sm": pagination.componentSize === "small",
-            })} value={pagination.pageSizeIndex} aria-label="Number of Rows per Page" onChange={handleSetPageSize}>
-              {pagination.pageSizeOptions.map(function (numRows, index) { return (<option key={index} value={index}>
-                  {numRows}
-                </option>); })}
-            </select>
-          </div>
-          <Pagination numPages={Math.ceil(rows.length /
-                pagination.pageSizeOptions[pagination.pageSizeIndex])} pageNum={pagination.currentPage} numButtons={pagination.maxPageButtons} setPageNum={handleSetPageNum} size={pagination.componentSize || "medium"}/>
-        </div>)}
+      {pagination && (<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}/>)}
     </div>);
 };
 export default Grid;

package/hooks/useControlledHover.d.ts

@@ -0,0 +1,9 @@
+import { MouseEventHandler } from "react";
+export interface UseControlledHoverHook<T> {
+    isHovering: boolean;
+    setIsHovering: (isHovering: boolean) => void;
+    handleMouseOver: MouseEventHandler<T>;
+    handleMouseOut: MouseEventHandler<T>;
+}
+declare const useControlledHover: <T>() => UseControlledHoverHook<T>;
+export default useControlledHover;

package/hooks/useControlledHover.jsx

@@ -0,0 +1,17 @@
+import { useState } from "react";
+var useControlledHover = function () {
+    var _a = useState(false), isHovering = _a[0], setIsHovering = _a[1];
+    var handleMouseOver = function () {
+        return setIsHovering(true);
+    };
+    var handleMouseOut = function () {
+        return setIsHovering(false);
+    };
+    return {
+        isHovering: isHovering,
+        setIsHovering: setIsHovering,
+        handleMouseOver: handleMouseOver,
+        handleMouseOut: handleMouseOut
+    };
+};
+export default useControlledHover;

package/icons/arrowPlaceholder.d.ts

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

package/icons/arrowPlaceholder.jsx

@@ -0,0 +1,10 @@
+// Temporary solution to prevent column widths from changing when hovering over
+// columns with a mouse.
+// More ideal permanent solution would be to fix column widths based on preset
+// values.
+var arrowPlaceholder = (<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+    <desc>
+      Empty transparent square for styling purposes
+    </desc>
+  </svg>);
+export default arrowPlaceholder;

package/icons/deselectAll.d.ts

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

package/icons/deselectAll.jsx

@@ -0,0 +1,5 @@
+var deselectAll = (<svg className="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
+    <desc>Minus sign inside a square</desc>
+    <rect className="svg-icon-foreground" x="3.5" y="7.5" width="9" height="1"/>
+  </svg>);
+export default deselectAll;

package/icons/downArrow.d.ts

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

package/icons/downArrow.jsx

@@ -0,0 +1,9 @@
+var downArrow = (<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+    <title>(sorted descending)</title>
+    <desc>
+      Down arrow indicating that the column is being sorted in an descending
+      manner
+    </desc>
+    <path fillRule="evenodd" d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1"/>
+  </svg>);
+export default downArrow;

package/icons/selectAll.d.ts

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

package/icons/selectAll.jsx

@@ -0,0 +1,6 @@
+var selectAll = (<svg className="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
+    <desc>Plus sign inside a square</desc>
+    <rect className="svg-icon-foreground" x="3.5" y="7.5" width="9" height="1"/>
+    <rect className="svg-icon-foreground" x="3.5" y="7.5" width="9" height="1" transform="translate(0 16) rotate(-90)"/>
+  </svg>);
+export default selectAll;

package/icons/upArrow.d.ts

@@ -0,0 +1,2 @@
+declare const upArrow: (grayed: boolean) => import("react").JSX.Element;
+export default upArrow;

package/icons/upArrow.jsx

@@ -0,0 +1,21 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import classNames from "classnames";
+var upArrow = function (grayed) { return (<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className={classNames(__spreadArray([], (grayed ? ["text-body-secondary"] : []), true))} viewBox="0 0 16 16">
+    {!grayed && (<>
+        <title>(sorted ascending)</title>
+        <desc>
+          Up arrow indicating that the column is being sorted in an ascending
+          manner
+        </desc>
+      </>)}
+    <path fillRule="evenodd" d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5"/>
+  </svg>); };
+export default upArrow;

package/index.d.ts

@@ -1,4 +1,4 @@
 export * from "./types";
 export * from "./Grid";
-export * from "./Pagination";
+export * from "./pagination/PageSelector";
 export { default } from "./Grid";

package/index.js

@@ -1,4 +1,4 @@
 export * from "./types";
 export * from "./Grid";
-export * from "./Pagination";
+export * from "./pagination/PageSelector";
 export { default } from "./Grid";

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

package/{Pagination.d.ts → pagination/PageSelector.d.ts}

@@ -1,4 +1,4 @@
-import { JustifyContentSetting, Size } from "./types";
+import { JustifyContentSetting, Size } from "../types";
 import { FC } from "react";
 export interface PaginationProps {
     numPages: number;
@@ -20,5 +20,5 @@ export interface PaginationProps {
  * @param alignment - Flexbox justify-content setting on the <ul> element
  * @param size - Size variant of the <ul> element
  */
-declare const Pagination: FC<PaginationProps>;
-export default Pagination;
+declare const PageSelector: FC<PaginationProps>;
+export default PageSelector;

package/{Pagination.jsx → pagination/PageSelector.jsx}

@@ -12,7 +12,7 @@ import classNames from "classnames";
  * @param alignment - Flexbox justify-content setting on the <ul> element
  * @param size - Size variant of the <ul> element
  */
-var Pagination = function (_a) {
+var PageSelector = function (_a) {
     var numPages = _a.numPages, numButtons = _a.numButtons, pageNum = _a.pageNum, setPageNum = _a.setPageNum, ariaLabel = _a.ariaLabel, alignment = _a.alignment, size = _a.size;
     var ulClasses = ["pagination"];
     if (size === "small") {
@@ -116,4 +116,4 @@ var Pagination = function (_a) {
       </ul>
     </nav>);
 };
-export default Pagination;
+export default PageSelector;

package/pagination/PageSizeSelector.d.ts

@@ -0,0 +1,10 @@
+import { FC } from "react";
+import { Size } from "../types";
+export interface PageSizeSelectorProps {
+    componentSize: Size;
+    pageSizeOptions: number[];
+    pageSizeIndex: number;
+    handleSetPageSize: (index: number) => void;
+}
+declare const PageSizeSelector: FC<PageSizeSelectorProps>;
+export default PageSizeSelector;

package/pagination/PageSizeSelector.jsx

@@ -0,0 +1,20 @@
+import classNames from "classnames";
+var PageSizeSelector = function (_a) {
+    var componentSize = _a.componentSize, pageSizeOptions = _a.pageSizeOptions, pageSizeIndex = _a.pageSizeIndex, handleSetPageSize = _a.handleSetPageSize;
+    var onChange = function (event) {
+        var pageSizeIndex = Number(event.target.value);
+        handleSetPageSize(pageSizeIndex);
+    };
+    return (<div>
+      <select className={classNames({
+            "form-select": true,
+            "form-select-lg": componentSize === "large",
+            "form-select-sm": componentSize === "small",
+        })} value={pageSizeIndex} aria-label="Number of Rows per Page" onChange={onChange}>
+        {pageSizeOptions.map(function (numRows, index) { return (<option key={index} value={index}>
+            {numRows}
+          </option>); })}
+      </select>
+    </div>);
+};
+export default PageSizeSelector;

package/pagination/Pagination.d.ts

@@ -0,0 +1,14 @@
+import { FC } from "react";
+import { Size } from "../types";
+export interface PaginationProps {
+    componentSize: Size;
+    pageSizeOptions: number[];
+    pageSizeIndex: number;
+    handleSetPageSizeIndex: (index: number) => void;
+    handleSetPageNum: (index: number) => void;
+    prePagingNumRows: number;
+    maxPageButtons: number;
+    currentPage: number;
+}
+declare const Pagination: FC<PaginationProps>;
+export default Pagination;

package/pagination/Pagination.jsx

@@ -0,0 +1,22 @@
+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;
+    var numPages = Math.ceil(prePagingNumRows / pageSizeOptions[pageSizeIndex]);
+    var pageIndexAwarePageSizeSetter = function (newPageSizeIndex) {
+        var newPageSize = pageSizeOptions[newPageSizeIndex];
+        var maxPages = Math.ceil(prePagingNumRows / newPageSize);
+        handleSetPageSizeIndex(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);
+        }
+    };
+    return (<div className="d-flex justify-content-end gap-2">
+      <PageSizeSelector componentSize={componentSize} pageSizeOptions={pageSizeOptions} pageSizeIndex={pageSizeIndex} handleSetPageSize={pageIndexAwarePageSizeSetter}/>
+      <PageSelector numPages={numPages} pageNum={currentPage} numButtons={maxPageButtons} setPageNum={handleSetPageNum} size={componentSize}/>
+    </div>);
+};
+export default Pagination;

package/selection/SelectAllHeaderCell.d.ts

@@ -0,0 +1,9 @@
+import { SelectType } from "../types";
+import { FC } from "react";
+interface SelectAllHeaderCellProps {
+    onClick: () => void;
+    selectType: SelectType;
+    selectionExists: boolean;
+}
+declare const SelectAllHeaderCell: FC<SelectAllHeaderCellProps>;
+export default SelectAllHeaderCell;

package/selection/SelectAllHeaderCell.jsx

@@ -0,0 +1,42 @@
+import deselectAll from "../icons/deselectAll";
+import selectAll from "../icons/selectAll";
+import arrowPlaceholder from "../icons/arrowPlaceholder";
+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;
+    }
+    if (selectMode === "multi" && !existingSelection) {
+        return selectAll;
+    }
+    // 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 (selectMode === "multi" && !existingSelection) {
+        return "Select all rows";
+    }
+    // Single select mode and none selected means that the button is disabled
+    return "Selection input header cell";
+};
+var SelectAllHeaderCell = function (_a) {
+    var onClick = _a.onClick, selectType = _a.selectType, selectionExists = _a.selectionExists;
+    var disabled = selectType === "single" && !selectionExists;
+    var description = getCellAriaDescription(selectType, selectionExists);
+    return (<th aria-colindex={1} title={description} aria-description={description} className={classNames("select-header-cell", "btn-primary", {
+            "cursor-pointer": !disabled,
+        })} onClick={onClick}>
+      {getSelectIcon(selectType, selectionExists)}
+    </th>);
+};
+export default SelectAllHeaderCell;

package/selection/SelectionInput.d.ts

@@ -0,0 +1,18 @@
+import { FC } from "react";
+export interface RadioSelectionInputModel {
+    type: "radio";
+    name: string;
+}
+export interface CheckboxSelectionInputModel {
+    type: "checkbox";
+    deselectCallback: () => void;
+    name?: string;
+}
+export type SelectionInputModel = RadioSelectionInputModel | CheckboxSelectionInputModel;
+export interface SelectionInputProps {
+    selected: boolean;
+    selectionInputModel: SelectionInputModel;
+    selectCallback: () => void;
+}
+declare const SelectionInput: FC<SelectionInputProps>;
+export default SelectionInput;

package/selection/SelectionInput.jsx

@@ -0,0 +1,21 @@
+var SelectionInput = function (_a) {
+    var selectionInputModel = _a.selectionInputModel, selected = _a.selected, selectCallback = _a.selectCallback;
+    var type = selectionInputModel.type;
+    var onChange = function (_a) {
+        var checked = _a.target.checked;
+        // theoretically, a radio button shouldn't become unchecked so the below
+        // check of the "type" variable is not needed except for narrowing the
+        // type of the "selectionInputModel"
+        if (!checked && type === "checkbox") {
+            selectionInputModel.deselectCallback();
+            return;
+        }
+        if (checked) {
+            selectCallback();
+        }
+    };
+    return (<input aria-description="input to select the current row" onClick={function (event) {
+            event.stopPropagation();
+        }} type={type} checked={selected} onChange={onChange} name={selectionInputModel.name}/>);
+};
+export default SelectionInput;

package/types.d.ts

@@ -85,3 +85,21 @@ export interface FilterModel {
     tableFilterState: EditableTableFilterState;
     setTableFilterState: (state: EditableTableFilterState) => void;
 }
+export type SelectMode = "column" | "row" | "both";
+export type SelectType = "single" | "multi";
+export interface MultiSelectModel {
+    mode: SelectMode;
+    type: "multi";
+    selected: number[];
+    setSelected: (selected: number[]) => void;
+}
+export interface SingleSelectModel {
+    mode: SelectMode;
+    type: "single";
+    selected: number | null;
+    setSelected: (selected: number | null) => void;
+    groupName: string;
+}
+export type SelectModel = SingleSelectModel | MultiSelectModel;
+export type MultiSelectModelInitialState = Omit<MultiSelectModel, "setSelected">;
+export type SingleSelectModelInitialState = Omit<SingleSelectModel, "setSelected">;

package/models/descriptions.d.ts

@@ -1,2 +0,0 @@
-import { ColDataTypeStrings } from "../types";
-export declare const colTypeDescs: Record<ColDataTypeStrings, string>;

package/models/descriptions.js

@@ -1,6 +0,0 @@
-export var colTypeDescs = {
-    string: "String",
-    number: "Number",
-    date: "Date",
-    datetime: "DateTime",
-};