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

package/{ColHeaderCell.jsx → ColHeaderCell.js}

@@ -1,4 +1,5 @@
 "use client";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 import downArrow from "./icons/downArrow";
 import upArrow from "./icons/upArrow";
 import arrowPlaceholder from "./icons/arrowPlaceholder";
@@ -44,14 +45,11 @@ var ColHeaderCell = function (_a) {
             }
         }
     };
-    return (<th className={classNames({
-            "cursor-pointer": sortModel,
+    return (_jsxs("th", { className: classNames({
+            "rbdg-clickable-grid-header-cell": sortModel,
             "table-active": sortModel === null || sortModel === void 0 ? void 0 : sortModel.sortOrder,
-        })} onClick={sortModel && handleClick} onMouseOver={handleMouseOver} onMouseOut={handleMouseOut} aria-description={sortModel
+        }), onClick: sortModel && handleClick, onMouseOver: handleMouseOver, onMouseOut: handleMouseOut, "aria-description": sortModel
             ? "Column header"
-            : "Column header that can be clicked to change the sorting mode"} aria-colindex={ariaColIndex}>
-      {label}
-      {getSortSymbol()}
-    </th>);
+            : "Column header that can be clicked to change the sorting mode", "aria-colindex": ariaColIndex, children: [label, getSortSymbol()] }));
 };
 export default ColHeaderCell;

package/Grid.d.ts

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

package/{Grid.jsx → Grid.js}

@@ -1,9 +1,10 @@
 "use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
 import ColHeaderCell from "./ColHeaderCell";
 import useFilter from "./hooks/useFilter";
 import ToggleButton from "./ToggleButton";
-import FilterOptionsTable from "./FilterOptionsTable/FilterOptionsTable";
+import FilterOptionsTable from "./filtering/FilterOptionsTable";
 import useFilterStateFromEditable from "./hooks/useFilterStateFromEditable";
 import useAugmentedRows from "./hooks/useAugmentedRows";
 import useSortedRows from "./hooks/useSortedRows";
@@ -12,8 +13,10 @@ import SelectAllHeaderCell from "./selection/SelectAllHeaderCell";
 import SelectionInput from "./selection/SelectionInput";
 import Pagination from "./pagination/Pagination";
 import classNames from "classnames";
+import EditableRow from "./editing/EditableRow";
+import inputStrsToRowDef from "./editing/inputStrsToRowDef";
 var Grid = function (_a) {
-    var rows = _a.rows, cols = _a.cols, pagination = _a.pagination, sortModel = _a.sortModel, filterModel = _a.filterModel, selectModel = _a.selectModel;
+    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;
     var editableFilterState = (filterModel === null || filterModel === void 0 ? void 0 : filterModel.tableFilterState) || null;
     var filterState = useFilterStateFromEditable(cols, editableFilterState);
     var augmentedRows = useAugmentedRows(rows);
@@ -29,7 +32,9 @@ var Grid = function (_a) {
         var upperIndex = lowerIndex + pageSize;
         return sortedRows.slice(lowerIndex, upperIndex);
     }, [sortedRows, pagination]);
-    var displayRows = useDisplayRows(currentPageRows, cols);
+    var showSelectCol = selectModel && selectModel.mode !== "row";
+    var ariaColIndexOffset = showSelectCol ? 1 : 0;
+    var displayRows = useDisplayRows(currentPageRows, cols, ariaColIndexOffset);
     var _b = useState(false), filterOptionsVisible = _b[0], setFilterOptionsVisible = _b[1];
     var handleToggleFilterOptions = function () {
         setFilterOptionsVisible(!filterOptionsVisible);
@@ -93,7 +98,6 @@ var Grid = function (_a) {
             deselectCallback: getDeselectHandler(index),
         };
     };
-    var showSelectCol = selectModel && selectModel.mode !== "row";
     var selectedSet = new Set();
     if (selectModel && selectModel.type === "multi") {
         selectModel.selected.forEach(function (value) { return selectedSet.add(value); });
@@ -105,7 +109,6 @@ var Grid = function (_a) {
     }
     var rowsAreSelectable = !!(selectModel && selectModel.mode !== "column");
     var getRowClickHandler = function (index) { return function (event) {
-        event.preventDefault();
         if (!rowsAreSelectable) {
             return;
         }
@@ -121,51 +124,36 @@ var Grid = function (_a) {
         }
         return String(selectedSet.has(index));
     };
-    // Once this component implements selection state, and if such interactivity is enabled, (conditionally) change the
-    // aria role to "grid".
-    // TODO: implement the above described features: conditionally changing aria role to grid
-    return (<div>
-      {filterState && filterModel && (<div>
-          <ToggleButton isActive={filterOptionsVisible} label={"".concat(filterOptionsVisible ? "Hide" : "Show ", " Filter Options")} onClick={handleToggleFilterOptions}/>
-          {filterOptionsVisible && (<FilterOptionsTable filterState={filterState} setFilterState={filterModel.setTableFilterState}/>)}
-        </div>)}
-      <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;
-            var colSortModel = sortModel && sortable
-                ? {
-                    sortOrder: ((_b = sortModel.sortColDef) === null || _b === void 0 ? void 0 : _b.name) === name
-                        ? sortModel.sortColDef.order
-                        : null,
-                    setSortOrder: function (order) {
-                        sortModel.setSortColDef(order && { name: name, order: order });
-                    },
-                }
-                : undefined;
-            return (<ColHeaderCell key={name} label={label} sortModel={colSortModel} ariaColIndex={index + 1 + (showSelectCol ? 1 : 0)}/>);
-        })}
-          </tr>
-        </thead>
-        <tbody>
-          {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 && (<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>);
+    var getInputStrSubmitCallback = editModel &&
+        (function (origIndex) {
+            var indexSpecificCallback = editModel.getUpdateCallback(origIndex);
+            return function (inputStrs) {
+                var rowDef = inputStrsToRowDef(cols, inputStrs);
+                indexSpecificCallback(rowDef);
+            };
+        });
+    return (_jsxs("div", { children: [filterState && filterModel && (_jsxs("div", { children: [_jsx(ToggleButton, { isActive: filterOptionsVisible, label: "".concat(filterOptionsVisible ? "Hide" : "Show ", " Filter Options"), onClick: handleToggleFilterOptions }), filterOptionsVisible && (_jsx(FilterOptionsTable, { filterState: filterState, setFilterState: filterModel.setTableFilterState }))] })), _jsxs("table", { className: classNames("table", {
+                    "table-hover": rowsAreSelectable,
+                }), "aria-rowcount": filteredRows.length + 1, children: [caption !== undefined && _jsx("caption", { children: caption }), _jsx("thead", { children: _jsxs("tr", { "aria-rowindex": 1, children: [showSelectCol && (_jsx(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;
+                                    var colSortModel = sortModel && sortable
+                                        ? {
+                                            sortOrder: ((_b = sortModel.sortColDef) === null || _b === void 0 ? void 0 : _b.name) === name
+                                                ? sortModel.sortColDef.order
+                                                : null,
+                                            setSortOrder: function (order) {
+                                                sortModel.setSortColDef(order && { name: name, order: order });
+                                            },
+                                        }
+                                        : undefined;
+                                    return (_jsx(ColHeaderCell, { label: label, sortModel: colSortModel, ariaColIndex: index + 1 + (showSelectCol ? 1 : 0) }, name));
+                                }), editModel && (_jsx("th", { "aria-colindex": cols.length + 1 + (showSelectCol ? 1 : 0), children: "Edit Controls" }))] }) }), _jsx("tbody", { children: displayRows.map(function (row, index) {
+                            return (_jsx(EditableRow, { onClick: getRowClickHandler(row.origIndex), className: classNames({
+                                    "table-active": selectedSet.has(row.origIndex),
+                                }), "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), children: showSelectCol && (_jsx("td", { children: _jsx(SelectionInput, { selected: selectedSet.has(row.origIndex), selectionInputModel: getSelectInputModel(row.origIndex, selectModel), selectCallback: getSelectHandler(row.origIndex) }) })) }, 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 }))] }));
 };
 export default Grid;

package/{ToggleButton.jsx → ToggleButton.js}

@@ -1,4 +1,5 @@
 "use client";
+import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from "classnames";
 var ToggleButton = function (_a) {
     var isActive = _a.isActive, label = _a.label, onClick = _a.onClick;
@@ -6,8 +7,6 @@ var ToggleButton = function (_a) {
     var variableClasses = {
         active: isActive,
     };
-    return (<button type="button" className={classNames(baseClasses, variableClasses)} aria-pressed={isActive} onClick={onClick}>
-      {label}
-    </button>);
+    return (_jsx("button", { type: "button", className: classNames(baseClasses, variableClasses), "aria-pressed": isActive, onClick: onClick, children: label }));
 };
 export default ToggleButton;

package/editing/EditControlsCell.d.ts

@@ -0,0 +1,11 @@
+import { FC } from "react";
+export interface EditControlsCellProps {
+    ariaColIndex: number;
+    beginEditingCallback: () => void;
+    cancelEditingCallback: () => void;
+    isEditing: boolean;
+    saveCallback: () => void;
+    deleteCallback?: () => void;
+}
+declare const EditControlsCell: FC<EditControlsCellProps>;
+export default EditControlsCell;

package/editing/EditControlsCell.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+var EditControlsCell = function (_a) {
+    var ariaColIndex = _a.ariaColIndex, beginEditingCallback = _a.beginEditingCallback, cancelEditingCallback = _a.cancelEditingCallback, isEditing = _a.isEditing, saveCallback = _a.saveCallback, deleteCallback = _a.deleteCallback;
+    return (_jsx("td", { "aria-colindex": ariaColIndex, children: _jsx("div", { className: "hstack gap-2", children: isEditing ? (_jsxs(_Fragment, { children: [_jsx("button", { className: "btn btn-secondary", onClick: cancelEditingCallback, children: "Cancel" }), _jsx("button", { className: "btn btn-primary", onClick: saveCallback, children: "Save" })] })) : (_jsxs(_Fragment, { children: [deleteCallback && (_jsx("button", { className: "btn btn-secondary", onClick: deleteCallback, children: "Delete" })), _jsx("button", { className: "btn btn-primary", onClick: beginEditingCallback, children: "Edit" })] })) }) }));
+};
+export default EditControlsCell;

package/editing/EditableRow.d.ts

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

package/editing/EditableRow.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { dateToDatetimeInputStr, dateToInputStr } from "../util/datetime";
+import EditControlsCell from "./EditControlsCell";
+var initValueToFormValue = function (value, type) {
+    switch (type) {
+        case "date":
+            return dateToInputStr(value);
+        case "datetime":
+            return dateToDatetimeInputStr(value);
+        case "number":
+            return String(value);
+        default:
+            return value;
+    }
+};
+var colDataTypeToInputType = function (colDataType) {
+    switch (colDataType) {
+        case "date":
+            return "date";
+        case "datetime":
+            return "datetime-local";
+        case "number":
+            return "number";
+        default:
+            return "text";
+    }
+};
+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;
+    var trRef = useRef(null);
+    var _b = useState(false), isEditing = _b[0], setIsEditing = _b[1];
+    var handleSave = function () {
+        var failedValidationFound = false;
+        var formValues = [];
+        for (var _i = 0, _a = Array.from(trRef.current.children); _i < _a.length; _i++) {
+            var rowChild = _a[_i];
+            if (!(rowChild instanceof HTMLTableCellElement)) {
+                console.warn("Found non-td element inside EditableRow");
+                continue;
+            }
+            for (var _b = 0, _c = Array.from(rowChild.children); _b < _c.length; _b++) {
+                var cellChild = _c[_b];
+                if (!(cellChild instanceof HTMLInputElement) ||
+                    cellChild.type === "checkbox" ||
+                    cellChild.type === "radio") {
+                    continue;
+                }
+                formValues.push(cellChild.value);
+                failedValidationFound =
+                    !cellChild.reportValidity() || failedValidationFound;
+                break; // Each cell should only have one input element
+            }
+        }
+        if (!failedValidationFound) {
+            updateCallback(formValues);
+            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) {
+                var type = _a.type, value = _a.value, formattedValue = _a.formattedValue, label = _a.label;
+                return (_jsx("td", { "aria-colindex": index + ariaColIndexOffset + 1, children: isEditing && !!updateCallback ? (_jsx("input", { "aria-label": label, name: "editable-cell-input-".concat(dataRowIndex, "-").concat(index), className: "form-control", 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 }))] }));
+};
+export default EditableRow;

package/editing/inputStrsToRowDef.d.ts

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

package/editing/inputStrsToRowDef.js

@@ -0,0 +1,18 @@
+var inputStrsToRowDef = function (cols, inputStrs) {
+    var newRow = {};
+    inputStrs.forEach(function (value, index) {
+        var col = cols[index];
+        switch (col.type) {
+            case "string":
+                newRow[col.name] = value;
+                return;
+            case "number":
+                newRow[col.name] = Number(value);
+                return;
+            default:
+                newRow[col.name] = new Date(value);
+        }
+    });
+    return newRow;
+};
+export default inputStrsToRowDef;

package/{FilterOptionsTable/DateFilterRow.jsx → filtering/DateFilterRow.js}

@@ -9,6 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { dateFilterSchemeNames, dateFilterSchemes, } from "../types";
 import { nanoid } from "nanoid/non-secure";
@@ -39,29 +40,6 @@ var DateFilterRow = function (_a) {
     var opSelectLabel = "".concat(columnLabel, " Column Filter Operator Selection");
     var startDateInputLabel = "".concat(columnLabel, " Column Filter Start Date");
     var endDateInputLabel = "".concat(columnLabel, " Column Filter End Date");
-    return (<tr>
-      <td>
-        <input name={checkboxLabel} aria-label={checkboxLabel} type="checkbox" checked={enabled} onChange={handleEnabledChange}/>
-      </td>
-      <td>{columnLabel}</td>
-      <td>{filterState.type === "date" ? "Date" : "Datetime"}</td>
-      <td>
-        <select name={opSelectLabel} aria-label={opSelectLabel} disabled={!enabled} className="form-select" value={scheme} onChange={handleOpChange}>
-          {dateFilterSchemes.map(function (scheme) { return (<option key={scheme} value={scheme}>
-              {dateFilterSchemeNames[scheme]}
-            </option>); })}
-        </select>
-      </td>
-      <td>
-        {scheme !== "endAt" && (<>
-            {scheme === "between" && (<label htmlFor={startDateInputId}>Start Date</label>)}
-            <input id={startDateInputId} className="form-control" type={inputType} required={enabled} disabled={!enabled} value={startDate} onChange={handleStartValueChange} aria-label={startDateInputLabel}/>
-          </>)}
-        {scheme !== "startFrom" && (<>
-            {scheme === "between" && (<label htmlFor={endDateInputId}>End Date</label>)}
-            <input id={endDateInputId} className="form-control" type={inputType} required={enabled} disabled={!enabled} value={endDate} onChange={handleEndValueChange} aria-label={endDateInputLabel}/>
-          </>)}
-      </td>
-    </tr>);
+    return (_jsxs("tr", { children: [_jsx("td", { children: _jsx("input", { name: checkboxLabel, "aria-label": checkboxLabel, type: "checkbox", checked: enabled, onChange: handleEnabledChange }) }), _jsx("td", { children: columnLabel }), _jsx("td", { children: filterState.type === "date" ? "Date" : "Datetime" }), _jsx("td", { children: _jsx("select", { name: opSelectLabel, "aria-label": opSelectLabel, disabled: !enabled, className: "form-select", value: scheme, onChange: handleOpChange, children: dateFilterSchemes.map(function (scheme) { return (_jsx("option", { value: scheme, children: dateFilterSchemeNames[scheme] }, scheme)); }) }) }), _jsxs("td", { children: [scheme !== "endAt" && (_jsxs(_Fragment, { children: [scheme === "between" && (_jsx("label", { htmlFor: startDateInputId, children: "Start Date" })), _jsx("input", { id: startDateInputId, className: "form-control", type: inputType, required: enabled, disabled: !enabled, value: startDate, onChange: handleStartValueChange, "aria-label": startDateInputLabel })] })), scheme !== "startFrom" && (_jsxs(_Fragment, { children: [scheme === "between" && (_jsx("label", { htmlFor: endDateInputId, children: "End Date" })), _jsx("input", { id: endDateInputId, className: "form-control", type: inputType, required: enabled, disabled: !enabled, value: endDate, onChange: handleEndValueChange, "aria-label": endDateInputLabel })] }))] })] }));
 };
 export default DateFilterRow;

package/{FilterOptionsTable/FilterOptionsTable.jsx → filtering/FilterOptionsTable.js}

@@ -9,6 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import StringFilterRow from "./StringFilterRow";
 import NumberFilterRow from "./NumberFilterRow";
@@ -76,14 +77,14 @@ var FilterOptionsTable = function (_a) {
             var colFilterState = formState[colName];
             switch (colFilterState.type) {
                 case "string": {
-                    return (<StringFilterRow key={colName} columnLabel={colLabel} filterState={colFilterState} setFilterState={getColStateSetter(colName)}/>);
+                    return (_jsx(StringFilterRow, { columnLabel: colLabel, filterState: colFilterState, setFilterState: getColStateSetter(colName) }, colName));
                 }
                 case "number": {
-                    return (<NumberFilterRow key={colName} columnLabel={colLabel} filterState={colFilterState} setFilterState={getColStateSetter(colName)}/>);
+                    return (_jsx(NumberFilterRow, { columnLabel: colLabel, filterState: colFilterState, setFilterState: getColStateSetter(colName) }, colName));
                 }
                 default: {
                     // date or datetime
-                    return (<DateFilterRow key={colName} includeTime={colFilterState.type === "datetime"} columnLabel={colLabel} filterState={colFilterState} setFilterState={getColStateSetter(colName)}/>);
+                    return (_jsx(DateFilterRow, { includeTime: colFilterState.type === "datetime", columnLabel: colLabel, filterState: colFilterState, setFilterState: getColStateSetter(colName) }, colName));
                 }
             }
         });
@@ -93,22 +94,6 @@ var FilterOptionsTable = function (_a) {
         var editableTableFilterState = convertFilterFormStateToEditableState(formState);
         setFilterState(editableTableFilterState);
     };
-    return (<form onSubmit={onSubmit}>
-      <table className="table">
-        <thead>
-          <tr>
-            <th>Enabled</th>
-            <th>Column</th>
-            <th>Type</th>
-            <th>Operator</th>
-            <th>Value</th>
-          </tr>
-        </thead>
-        <tbody>{getRows()}</tbody>
-      </table>
-      <button className="btn btn-secondary" type="submit">
-        Submit
-      </button>
-    </form>);
+    return (_jsxs("form", { onSubmit: onSubmit, children: [_jsxs("table", { className: "table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Enabled" }), _jsx("th", { children: "Column" }), _jsx("th", { children: "Type" }), _jsx("th", { children: "Operator" }), _jsx("th", { children: "Value" })] }) }), _jsx("tbody", { children: getRows() })] }), _jsx("button", { className: "btn btn-secondary", type: "submit", children: "Submit" })] }));
 };
 export default FilterOptionsTable;

package/{FilterOptionsTable/NumberFilterRow.jsx → filtering/NumberFilterRow.js}

@@ -9,6 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { numberFilterSchemeNames, numberFilterSchemes, } from "../types";
 var NumberFilterRow = function (_a) {
     var columnLabel = _a.columnLabel, filterState = _a.filterState, setFilterState = _a.setFilterState;
@@ -28,22 +29,6 @@ var NumberFilterRow = function (_a) {
     var checkboxLabel = "".concat(columnLabel, " Column Filter Toggle");
     var opSelectLabel = "".concat(columnLabel, " Column Filter Operator Selection");
     var valueInputLabel = "".concat(columnLabel, " Column Filter Value");
-    return (<tr>
-      <td>
-        <input name={checkboxLabel} aria-label={checkboxLabel} type="checkbox" checked={enabled} onChange={handleEnabledChange}/>
-      </td>
-      <td>{columnLabel}</td>
-      <td>Number</td>
-      <td>
-        <select name={opSelectLabel} aria-label={opSelectLabel} disabled={!enabled} className="form-select" value={scheme} onChange={handleOpChange}>
-          {numberFilterSchemes.map(function (scheme) { return (<option key={scheme} value={scheme}>
-              {numberFilterSchemeNames[scheme]}
-            </option>); })}
-        </select>
-      </td>
-      <td>
-        <input name={valueInputLabel} aria-label={valueInputLabel} className="form-control" type="number" required={enabled} disabled={!enabled} value={inputValue} onChange={handleNumInputValueChange}/>
-      </td>
-    </tr>);
+    return (_jsxs("tr", { children: [_jsx("td", { children: _jsx("input", { name: checkboxLabel, "aria-label": checkboxLabel, type: "checkbox", checked: enabled, onChange: handleEnabledChange }) }), _jsx("td", { children: columnLabel }), _jsx("td", { children: "Number" }), _jsx("td", { children: _jsx("select", { name: opSelectLabel, "aria-label": opSelectLabel, disabled: !enabled, className: "form-select", value: scheme, onChange: handleOpChange, children: numberFilterSchemes.map(function (scheme) { return (_jsx("option", { value: scheme, children: numberFilterSchemeNames[scheme] }, scheme)); }) }) }), _jsx("td", { children: _jsx("input", { name: valueInputLabel, "aria-label": valueInputLabel, className: "form-control", type: "number", required: enabled, disabled: !enabled, value: inputValue, onChange: handleNumInputValueChange }) })] }));
 };
 export default NumberFilterRow;

package/{FilterOptionsTable/StringFilterRow.jsx → filtering/StringFilterRow.js}

@@ -9,6 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { stringFilterSchemeNames, stringFilterSchemes, } from "../types";
 var StringFilterRow = function (_a) {
     var columnLabel = _a.columnLabel, filterState = _a.filterState, setFilterState = _a.setFilterState;
@@ -28,22 +29,6 @@ var StringFilterRow = function (_a) {
     var checkboxLabel = "".concat(columnLabel, " Column Filter Toggle");
     var opSelectLabel = "".concat(columnLabel, " Column Filter Operator Selection");
     var valueInputLabel = "".concat(columnLabel, " Column Filter Value");
-    return (<tr>
-      <td>
-        <input name={checkboxLabel} aria-label={checkboxLabel} type="checkbox" checked={enabled} onChange={handleEnabledChange}/>
-      </td>
-      <td>{columnLabel}</td>
-      <td>String</td>
-      <td>
-        <select name={opSelectLabel} aria-label={opSelectLabel} disabled={!enabled} className="form-select" value={scheme} onChange={handleOpChange}>
-          {stringFilterSchemes.map(function (scheme) { return (<option key={scheme} value={scheme}>
-              {stringFilterSchemeNames[scheme]}
-            </option>); })}
-        </select>
-      </td>
-      <td>
-        <input name={valueInputLabel} aria-label={valueInputLabel} className="form-control" required={enabled} disabled={!enabled} value={searchString} onChange={handleSearchStringChange}/>
-      </td>
-    </tr>);
+    return (_jsxs("tr", { children: [_jsx("td", { children: _jsx("input", { name: checkboxLabel, "aria-label": checkboxLabel, type: "checkbox", checked: enabled, onChange: handleEnabledChange }) }), _jsx("td", { children: columnLabel }), _jsx("td", { children: "String" }), _jsx("td", { children: _jsx("select", { name: opSelectLabel, "aria-label": opSelectLabel, disabled: !enabled, className: "form-select", value: scheme, onChange: handleOpChange, children: stringFilterSchemes.map(function (scheme) { return (_jsx("option", { value: scheme, children: stringFilterSchemeNames[scheme] }, scheme)); }) }) }), _jsx("td", { children: _jsx("input", { name: valueInputLabel, "aria-label": valueInputLabel, className: "form-control", required: enabled, disabled: !enabled, value: searchString, onChange: handleSearchStringChange }) })] }));
 };
 export default StringFilterRow;

package/hooks/{useControlledHover.jsx → useControlledHover.js}

@@ -1,17 +1,13 @@
 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);
-    };
+    var handleMouseOver = function () { return setIsHovering(true); };
+    var handleMouseOut = function () { return setIsHovering(false); };
     return {
         isHovering: isHovering,
         setIsHovering: setIsHovering,
         handleMouseOver: handleMouseOver,
-        handleMouseOut: handleMouseOut
+        handleMouseOut: handleMouseOut,
     };
 };
 export default useControlledHover;

package/hooks/useDisplayRows.d.ts

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

package/hooks/useDisplayRows.js

@@ -1,5 +1,20 @@
 import { useMemo } from "react";
-var useDisplayRows = function (currentPageRows, cols) {
+var getFormattedValue = function (value, formatter, typeString) {
+    if (formatter) {
+        return formatter(value);
+    }
+    if (typeString === "date") {
+        return value.toDateString();
+    }
+    if (typeString === "datetime") {
+        return value.toLocaleString();
+    }
+    if (typeString === "number") {
+        return value.toLocaleString();
+    }
+    return value;
+};
+var useDisplayRows = function (currentPageRows, cols, ariaColIndexOffset) {
     return useMemo(function () {
         var nameToIndex = new Map();
         cols.forEach(function (_a, index) {
@@ -24,29 +39,21 @@ var useDisplayRows = function (currentPageRows, cols) {
                     return;
                 }
                 var index = nameToIndex.get(name);
-                var formatter = cols[index].formatter;
-                var typeString = cols[index].type;
+                var col = cols[index];
+                var formatter = col.formatter;
+                var typeString = col.type;
                 var value = row.data[name];
-                if (formatter) {
-                    displayRow[index] = formatter(value);
-                    return;
-                }
-                if (typeString === "date") {
-                    displayRow[index] = value.toDateString();
-                    return;
-                }
-                if (typeString === "datetime") {
-                    displayRow[index] = value.toLocaleString();
-                    return;
-                }
-                if (typeString === "number") {
-                    displayRow[index] = value.toLocaleString();
-                    return;
-                }
-                displayRow[index] = value;
+                displayRow[index] = {
+                    fieldName: cols[index].name,
+                    value: value,
+                    type: typeString,
+                    ariaColIndex: index + 1 + ariaColIndexOffset,
+                    formattedValue: getFormattedValue(value, formatter, typeString),
+                    label: cols[index].label,
+                };
             });
             return { contents: displayRow, origIndex: row.meta.origIndex };
         });
-    }, [currentPageRows, cols]);
+    }, [currentPageRows, cols, ariaColIndexOffset]);
 };
 export default useDisplayRows;

package/icons/arrowPlaceholder.d.ts

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

package/icons/arrowPlaceholder.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// 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 = (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: _jsx("desc", { children: "Empty transparent square for styling purposes" }) }));
+export default arrowPlaceholder;

package/icons/deselectAll.d.ts

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

package/icons/deselectAll.js

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

package/icons/downArrow.d.ts

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

package/icons/downArrow.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var downArrow = (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: [_jsx("title", { children: "(sorted descending)" }), _jsx("desc", { children: "Down arrow indicating that the column is being sorted in an descending manner" }), _jsx("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" })] }));
+export default downArrow;

package/icons/selectAll.d.ts

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

package/icons/selectAll.js

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

package/icons/upArrow.d.ts

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

package/icons/upArrow.js

@@ -0,0 +1,13 @@
+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 { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+var upArrow = function (grayed) { return (_jsxs("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", children: [!grayed && (_jsxs(_Fragment, { children: [_jsx("title", { children: "(sorted ascending)" }), _jsx("desc", { children: "Up arrow indicating that the column is being sorted in an ascending manner" })] })), _jsx("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" })] })); };
+export default upArrow;

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

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

@@ -1,4 +1,5 @@
 "use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import classNames from "classnames";
 /**
@@ -47,73 +48,45 @@ var PageSelector = function (_a) {
         if (lowerBound === 1) {
             return null;
         }
-        return (<li className="page-item">
-        <a className="page-link" href="#" aria-label="First" onClick={function (event) {
-                event.preventDefault();
-                setPageNum(1);
-            }}>
-          <span aria-hidden="true">&lt;&lt;</span>
-        </a>
-      </li>);
+        return (_jsx("li", { className: "page-item", children: _jsx("a", { className: "page-link", href: "#", "aria-label": "First", onClick: function (event) {
+                    event.preventDefault();
+                    setPageNum(1);
+                }, children: _jsx("span", { "aria-hidden": "true", children: "<<" }) }) }));
     }
     function getPrevArrowButton() {
         if (pageNum === 1) {
             return null;
         }
-        return (<li className="page-item">
-        <a className="page-link" href="#" aria-label="Previous" onClick={function (event) {
-                event.preventDefault();
-                setPageNum(pageNum - 1);
-            }}>
-          <span aria-hidden="true">&lt;</span>
-        </a>
-      </li>);
+        return (_jsx("li", { className: "page-item", children: _jsx("a", { className: "page-link", href: "#", "aria-label": "Previous", onClick: function (event) {
+                    event.preventDefault();
+                    setPageNum(pageNum - 1);
+                }, children: _jsx("span", { "aria-hidden": "true", children: "<" }) }) }));
     }
     function getNextArrowButton() {
         if (pageNum === numPages) {
             return null;
         }
-        return (<li className="page-item">
-        <a className="page-link" href="#" aria-label="Next" onClick={function (event) {
-                event.preventDefault();
-                setPageNum(pageNum + 1);
-            }}>
-          <span aria-hidden="true">&gt;</span>
-        </a>
-      </li>);
+        return (_jsx("li", { className: "page-item", children: _jsx("a", { className: "page-link", href: "#", "aria-label": "Next", onClick: function (event) {
+                    event.preventDefault();
+                    setPageNum(pageNum + 1);
+                }, children: _jsx("span", { "aria-hidden": "true", children: ">" }) }) }));
     }
     function getLastArrowButton() {
         if (upperBound === numPages) {
             return null;
         }
-        return (<li className="page-item">
-        <a className="page-link" href="#" aria-label="Last" onClick={function (event) {
-                event.preventDefault();
-                setPageNum(numPages);
-            }}>
-          <span aria-hidden="true">&gt;&gt;</span>
-        </a>
-      </li>);
+        return (_jsx("li", { className: "page-item", children: _jsx("a", { className: "page-link", href: "#", "aria-label": "Last", onClick: function (event) {
+                    event.preventDefault();
+                    setPageNum(numPages);
+                }, children: _jsx("span", { "aria-hidden": "true", children: ">>" }) }) }));
     }
-    var indexButtons = buttonIndices.map(function (buttonIndex) { return (<li key={buttonIndex} className={classNames({
+    var indexButtons = buttonIndices.map(function (buttonIndex) { return (_jsx("li", { className: classNames({
             "page-item": true,
             active: pageNum === buttonIndex,
-        })} aria-current={pageNum === buttonIndex ? "page" : undefined}>
-      <a className="page-link" href="#" onClick={function (event) {
-            event.preventDefault();
-            setPageNum(buttonIndex);
-        }}>
-        {buttonIndex}
-      </a>
-    </li>); });
-    return (<nav aria-label={ariaLabel}>
-      <ul className={classNames(ulClasses)}>
-        {getFirstArrowButton()}
-        {getPrevArrowButton()}
-        {indexButtons}
-        {getNextArrowButton()}
-        {getLastArrowButton()}
-      </ul>
-    </nav>);
+        }), "aria-current": pageNum === buttonIndex ? "page" : undefined, children: _jsx("a", { className: "page-link", href: "#", onClick: function (event) {
+                event.preventDefault();
+                setPageNum(buttonIndex);
+            }, children: buttonIndex }) }, buttonIndex)); });
+    return (_jsx("nav", { "aria-label": ariaLabel, children: _jsxs("ul", { className: classNames(ulClasses), children: [getFirstArrowButton(), getPrevArrowButton(), indexButtons, getNextArrowButton(), getLastArrowButton()] }) }));
 };
 export default PageSelector;

package/pagination/PageSizeSelector.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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 (_jsx("div", { children: _jsx("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, children: pageSizeOptions.map(function (numRows, index) { return (_jsx("option", { value: index, children: numRows }, index)); }) }) }));
+};
+export default PageSizeSelector;

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import PageSizeSelector from "./PageSizeSelector";
 import PageSelector from "./PageSelector";
 var Pagination = function (_a) {
@@ -14,9 +15,6 @@ var Pagination = function (_a) {
             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>);
+    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 })] }));
 };
 export default Pagination;

package/selection/{SelectAllHeaderCell.jsx → SelectAllHeaderCell.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import deselectAll from "../icons/deselectAll";
 import selectAll from "../icons/selectAll";
 import arrowPlaceholder from "../icons/arrowPlaceholder";
@@ -33,10 +34,8 @@ 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>);
+    return (_jsx("th", { "aria-colindex": 1, title: description, "aria-description": description, className: classNames("rbdg-select-header-cell", "btn-primary", {
+            "rbdg-clickable-grid-header-cell": !disabled,
+        }), onClick: onClick, children: getSelectIcon(selectType, selectionExists) }));
 };
 export default SelectAllHeaderCell;

package/selection/{SelectionInput.jsx → SelectionInput.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 var SelectionInput = function (_a) {
     var selectionInputModel = _a.selectionInputModel, selected = _a.selected, selectCallback = _a.selectCallback;
     var type = selectionInputModel.type;
@@ -14,8 +15,8 @@ var SelectionInput = function (_a) {
             selectCallback();
         }
     };
-    return (<input aria-description="input to select the current row" onClick={function (event) {
+    return (_jsx("input", { "aria-label": "input to select the current row", onClick: function (event) {
             event.stopPropagation();
-        }} type={type} checked={selected} onChange={onChange} name={selectionInputModel.name}/>);
+        }, type: type, checked: selected, onChange: onChange, name: selectionInputModel.name }));
 };
 export default SelectionInput;

package/style.css

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

package/style.scss

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

package/types.d.ts

@@ -16,7 +16,7 @@ export interface AugRowDef {
     meta: RowMetadata;
 }
 export interface FormattedRow {
-    contents: string[];
+    contents: CellData[];
     origIndex: number;
 }
 export type JustifyContentSetting = "start" | "end" | "center" | "between" | "around" | "evenly";
@@ -103,3 +103,16 @@ export interface SingleSelectModel {
 export type SelectModel = SingleSelectModel | MultiSelectModel;
 export type MultiSelectModelInitialState = Omit<MultiSelectModel, "setSelected">;
 export type SingleSelectModelInitialState = Omit<SingleSelectModel, "setSelected">;
+export interface CellData {
+    fieldName: string;
+    value: ColDataType;
+    type: ColDataTypeStrings;
+    ariaColIndex: number;
+    formattedValue: string;
+    label: string;
+}
+export type UpdateCallbackGenerator = (origIndex: number) => (rowDef: RowDef) => void;
+export interface EditModel {
+    getUpdateCallback: UpdateCallbackGenerator;
+    getDeleteCallback?: (origIndex: number) => () => void;
+}

package/icons/arrowPlaceholder.jsx

@@ -1,10 +0,0 @@
-// 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.jsx

@@ -1,5 +0,0 @@
-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.jsx

@@ -1,9 +0,0 @@
-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.jsx

@@ -1,6 +0,0 @@
-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.jsx

@@ -1,21 +0,0 @@
-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/pagination/PageSizeSelector.jsx

@@ -1,20 +0,0 @@
-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;