@absreim/react-bootstrap-data-grid 0.1.4 → 1.1.0

package/ColHeaderCell.d.ts

@@ -3,6 +3,7 @@ import { ColSortModel } from "./types";
 interface ColHeaderCellProps {
     label: string;
     sortModel?: ColSortModel;
+    ariaColIndex: number;
 }
 declare const ColHeaderCell: FC<ColHeaderCellProps>;
 export default ColHeaderCell;

package/ColHeaderCell.jsx

@@ -10,10 +10,25 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import { useState } from "react";
 import classNames from "classnames";
-var getUpArrow = function (addlClasses) { return (<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className={classNames(__spreadArray(["bi", "bi-arrow-up"], (addlClasses || []), true))} viewBox="0 0 16 16">
+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
@@ -22,7 +37,7 @@ var downArrow = (<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
 // 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>);
 var ColHeaderCell = function (_a) {
-    var label = _a.label, sortModel = _a.sortModel;
+    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);
@@ -55,19 +70,21 @@ var ColHeaderCell = function (_a) {
         switch (sortModel.sortOrder) {
             case null: {
                 if (isHovering) {
-                    return getUpArrow(["text-body-secondary"]);
+                    return getUpArrow(true);
                 }
                 return placeholder;
             }
             case "asc": {
-                return getUpArrow();
+                return getUpArrow(false);
             }
             case "desc": {
                 return downArrow;
             }
         }
     };
-    return (<th onClick={sortModel && handleClick} onMouseOver={handleMouseOver} onMouseOut={handleMouseOut} aria-description="Column header that can be clicked to change the sorting mode" style={{ cursor: "pointer " }}>
+    return (<th 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}>
       {label}
       {getSortSymbol()}
     </th>);

package/FilterOptionsTable/DateFilterRow.d.ts

@@ -0,0 +1,10 @@
+import { FC } from "react";
+import { DateFormFilterState } from "./types";
+interface DateFilterRowProps {
+    includeTime: boolean;
+    columnLabel: string;
+    filterState: DateFormFilterState;
+    setFilterState: (filterState: DateFormFilterState) => void;
+}
+declare const DateFilterRow: FC<DateFilterRowProps>;
+export default DateFilterRow;

package/FilterOptionsTable/DateFilterRow.jsx

@@ -0,0 +1,63 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { useMemo } from "react";
+import { dateFilterSchemeNames, dateFilterSchemes, } from "../types";
+import { nanoid } from "nanoid/non-secure";
+var DateFilterRow = function (_a) {
+    var includeTime = _a.includeTime, columnLabel = _a.columnLabel, filterState = _a.filterState, setFilterState = _a.setFilterState;
+    var handleOpChange = function (_a) {
+        var target = _a.target;
+        setFilterState(__assign(__assign({}, filterState), { scheme: target.value }));
+    };
+    var handleEnabledChange = function (_a) {
+        var target = _a.target;
+        setFilterState(__assign(__assign({}, filterState), { enabled: target.checked }));
+    };
+    var handleStartValueChange = function (_a) {
+        var target = _a.target;
+        setFilterState(__assign(__assign({}, filterState), { startDate: target.value }));
+    };
+    var handleEndValueChange = function (_a) {
+        var target = _a.target;
+        setFilterState(__assign(__assign({}, filterState), { endDate: target.value }));
+    };
+    var enabled = filterState.enabled, scheme = filterState.scheme, startDate = filterState.startDate, endDate = filterState.endDate;
+    var inputType = includeTime ? "datetime-local" : "date";
+    var inputId = useMemo(function () { return nanoid(); }, []);
+    var startDateInputId = "$startDate-".concat(inputId);
+    var endDateInputId = "$endDate-".concat(inputId);
+    return (<tr>
+      <td>
+        <input type="checkbox" checked={enabled} name="enabled" onChange={handleEnabledChange}/>
+      </td>
+      <td>{columnLabel}</td>
+      <td>{filterState.type === "date" ? "Date" : "Datetime"}</td>
+      <td>
+        <select 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="Start Date"/>
+          </>)}
+        {scheme !== "startFrom" && (<>
+            {scheme === "between" && (<label htmlFor={endDateInputId}>End Date</label>)}
+            <input className="form-control" type={inputType} required={enabled} disabled={!enabled} value={endDate} onChange={handleEndValueChange} aria-label="End Date"/>
+          </>)}
+      </td>
+    </tr>);
+};
+export default DateFilterRow;

package/FilterOptionsTable/FilterOptionsTable.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { EditableTableFilterState, TableFilterState } from "../types";
+interface FilterOptionsTableProps {
+    filterState: TableFilterState;
+    setFilterState: (filterState: EditableTableFilterState) => void;
+}
+declare const FilterOptionsTable: FC<FilterOptionsTableProps>;
+export default FilterOptionsTable;

package/FilterOptionsTable/FilterOptionsTable.jsx

@@ -0,0 +1,118 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { useState } from "react";
+import StringFilterRow from "./StringFilterRow";
+import { datetimeInputStrToUtc } from "../util/datetime";
+import NumberFilterRow from "./NumberFilterRow";
+import useFormStateFromTableFilterState from "./useFormStateFromTableFilterState";
+import DateFilterRow from "./DateFilterRow";
+var convertFilterFormStateToEditableState = function (filterFormState) {
+    return Object.keys(filterFormState).reduce(function (editableState, colName) {
+        var rowFilterFormState = filterFormState[colName];
+        switch (rowFilterFormState.type) {
+            case "string": {
+                editableState[colName] = __assign({}, rowFilterFormState);
+                break;
+            }
+            case "number": {
+                editableState[colName] = {
+                    type: rowFilterFormState.type,
+                    enabled: rowFilterFormState.enabled,
+                    scheme: rowFilterFormState.scheme,
+                    numValue: rowFilterFormState.inputValue === ""
+                        ? null
+                        : Number(rowFilterFormState.inputValue),
+                };
+                break;
+            }
+            default: {
+                // date or datetime
+                var partialFilterState = {
+                    type: rowFilterFormState.type,
+                    enabled: rowFilterFormState.enabled,
+                };
+                var strModifierFn_1 = rowFilterFormState.type === "date"
+                    ? function (str) { return str; }
+                    : datetimeInputStrToUtc;
+                var inputStrToDate = function (str) {
+                    return str === "" ? null : new Date(strModifierFn_1(str));
+                };
+                switch (rowFilterFormState.scheme) {
+                    case "startFrom": {
+                        editableState[colName] = __assign(__assign({}, partialFilterState), { scheme: rowFilterFormState.scheme, startDate: inputStrToDate(rowFilterFormState.startDate) });
+                        break;
+                    }
+                    case "endAt": {
+                        editableState[colName] = __assign(__assign({}, partialFilterState), { scheme: rowFilterFormState.scheme, endDate: inputStrToDate(rowFilterFormState.endDate) });
+                        break;
+                    }
+                    default: {
+                        editableState[colName] = __assign(__assign({}, partialFilterState), { scheme: rowFilterFormState.scheme, startDate: inputStrToDate(rowFilterFormState.startDate), endDate: inputStrToDate(rowFilterFormState.endDate) });
+                    }
+                }
+            }
+        }
+        return editableState;
+    }, {});
+};
+var FilterOptionsTable = function (_a) {
+    var filterState = _a.filterState, setFilterState = _a.setFilterState;
+    var formFilterState = useFormStateFromTableFilterState(filterState);
+    var _b = useState(formFilterState), formState = _b[0], setFormState = _b[1];
+    var getRows = function () {
+        return Object.keys(formState).map(function (colName) {
+            function getColStateSetter(colName) {
+                return function (rowState) {
+                    var _a;
+                    return setFormState(__assign(__assign({}, formState), (_a = {}, _a[colName] = rowState, _a)));
+                };
+            }
+            var colLabel = filterState[colName].label;
+            var colFilterState = formState[colName];
+            switch (colFilterState.type) {
+                case "string": {
+                    return (<StringFilterRow key={colName} columnLabel={colLabel} filterState={colFilterState} setFilterState={getColStateSetter(colName)}/>);
+                }
+                case "number": {
+                    return (<NumberFilterRow key={colName} columnLabel={colLabel} filterState={colFilterState} setFilterState={getColStateSetter(colName)}/>);
+                }
+                default: {
+                    // date or datetime
+                    return (<DateFilterRow key={colName} includeTime={colFilterState.type === "datetime"} columnLabel={colLabel} filterState={colFilterState} setFilterState={getColStateSetter(colName)}/>);
+                }
+            }
+        });
+    };
+    var onSubmit = function (event) {
+        event.preventDefault();
+        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>);
+};
+export default FilterOptionsTable;

package/FilterOptionsTable/NumberFilterRow.d.ts

@@ -0,0 +1,9 @@
+import { FC } from "react";
+import { NumberFormFilterState } from "./types";
+interface NumberFilterRowProps {
+    columnLabel: string;
+    filterState: NumberFormFilterState;
+    setFilterState: (filterState: NumberFormFilterState) => void;
+}
+declare const NumberFilterRow: FC<NumberFilterRowProps>;
+export default NumberFilterRow;

package/FilterOptionsTable/NumberFilterRow.jsx

@@ -0,0 +1,47 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { numberFilterSchemeNames, numberFilterSchemes, } from "../types";
+var NumberFilterRow = function (_a) {
+    var columnLabel = _a.columnLabel, filterState = _a.filterState, setFilterState = _a.setFilterState;
+    var handleOpChange = function (_a) {
+        var target = _a.target;
+        setFilterState(__assign(__assign({}, filterState), { scheme: target.value }));
+    };
+    var handleEnabledChange = function (_a) {
+        var target = _a.target;
+        setFilterState(__assign(__assign({}, filterState), { enabled: target.checked }));
+    };
+    var handleNumInputValueChange = function (_a) {
+        var target = _a.target;
+        setFilterState(__assign(__assign({}, filterState), { inputValue: target.value }));
+    };
+    var enabled = filterState.enabled, scheme = filterState.scheme, inputValue = filterState.inputValue;
+    // TODO: Input labelling for accessibility
+    return (<tr>
+      <td>
+        <input type="checkbox" checked={enabled} name="enabled" onChange={handleEnabledChange}/>
+      </td>
+      <td>{columnLabel}</td>
+      <td>Number</td>
+      <td>
+        <select 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 className="form-control" type="number" required={enabled} disabled={!enabled} value={inputValue} onChange={handleNumInputValueChange}/>
+      </td>
+    </tr>);
+};
+export default NumberFilterRow;

package/FilterOptionsTable/StringFilterRow.d.ts

@@ -0,0 +1,9 @@
+import { FC } from "react";
+import { StringFilterState } from "../types";
+interface StringFilterRowProps {
+    columnLabel: string;
+    filterState: StringFilterState;
+    setFilterState: (filterState: StringFilterState) => void;
+}
+declare const StringFilterRow: FC<StringFilterRowProps>;
+export default StringFilterRow;

package/FilterOptionsTable/StringFilterRow.jsx

@@ -0,0 +1,47 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { stringFilterSchemeNames, stringFilterSchemes, } from "../types";
+var StringFilterRow = function (_a) {
+    var columnLabel = _a.columnLabel, filterState = _a.filterState, setFilterState = _a.setFilterState;
+    var handleOpChange = function (_a) {
+        var target = _a.target;
+        setFilterState(__assign(__assign({}, filterState), { scheme: target.value }));
+    };
+    var handleEnabledChange = function (_a) {
+        var target = _a.target;
+        setFilterState(__assign(__assign({}, filterState), { enabled: target.checked }));
+    };
+    var handleSearchStringChange = function (_a) {
+        var target = _a.target;
+        setFilterState(__assign(__assign({}, filterState), { searchString: target.value }));
+    };
+    var enabled = filterState.enabled, scheme = filterState.scheme, searchString = filterState.searchString;
+    // TODO: Input labelling for accessibility
+    return (<tr>
+      <td>
+        <input type="checkbox" checked={enabled} name="enabled" onChange={handleEnabledChange}/>
+      </td>
+      <td>{columnLabel}</td>
+      <td>String</td>
+      <td>
+        <select 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 className="form-control" required={enabled} disabled={!enabled} value={searchString} onChange={handleSearchStringChange}/>
+      </td>
+    </tr>);
+};
+export default StringFilterRow;

package/FilterOptionsTable/types.d.ts

@@ -0,0 +1,13 @@
+import { AbstractDateFilterState, AbstractFilterState, DateFilterScheme, NumberFilterScheme, StringFilterState } from "../types";
+export interface NumberFormFilterState extends AbstractFilterState {
+    type: "number";
+    scheme: NumberFilterScheme;
+    inputValue: string;
+}
+export interface DateFormFilterState extends AbstractDateFilterState {
+    scheme: DateFilterScheme;
+    startDate: string;
+    endDate: string;
+}
+export type FilterFormRowState = StringFilterState | NumberFormFilterState | DateFormFilterState;
+export type FilterFormState = Record<string, FilterFormRowState>;

package/FilterOptionsTable/types.js

@@ -0,0 +1 @@
+export {};

package/FilterOptionsTable/useFormStateFromTableFilterState.d.ts

@@ -0,0 +1,4 @@
+import { TableFilterState } from "../types";
+import { FilterFormState } from "./types";
+declare const useFormStateFromTableFilterState: (tableFilterState: TableFilterState) => FilterFormState;
+export default useFormStateFromTableFilterState;

package/FilterOptionsTable/useFormStateFromTableFilterState.js

@@ -0,0 +1,72 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { useMemo } from "react";
+import { dateToDatetimeInputStr, dateToInputStr } from "../util/datetime";
+var useFormStateFromTableFilterState = function (tableFilterState) {
+    return useMemo(function () {
+        return Object.keys(tableFilterState).reduce(function (filterFormState, colName) {
+            var editableState = tableFilterState[colName].editableState;
+            switch (editableState.type) {
+                case "string": {
+                    filterFormState[colName] = __assign({}, editableState);
+                    break;
+                }
+                case "number": {
+                    filterFormState[colName] = {
+                        type: "number",
+                        scheme: editableState.scheme,
+                        enabled: editableState.enabled,
+                        inputValue: editableState.numValue === null
+                            ? ""
+                            : String(editableState.numValue),
+                    };
+                    break;
+                }
+                default: {
+                    // date or datetime
+                    var partialFormState = {
+                        type: editableState.type,
+                        enabled: editableState.enabled,
+                    };
+                    var dateToStrConverter = editableState.type === "date"
+                        ? dateToInputStr
+                        : dateToDatetimeInputStr;
+                    switch (editableState.scheme) {
+                        case "startFrom": {
+                            filterFormState[colName] = __assign(__assign({}, partialFormState), { scheme: "startFrom", startDate: editableState.startDate === null
+                                    ? ""
+                                    : dateToStrConverter(editableState.startDate), endDate: "" });
+                            break;
+                        }
+                        case "endAt": {
+                            filterFormState[colName] = __assign(__assign({}, partialFormState), { scheme: "endAt", startDate: "", endDate: editableState.endDate === null
+                                    ? ""
+                                    : dateToStrConverter(editableState.endDate) });
+                            break;
+                        }
+                        default: {
+                            // between
+                            filterFormState[colName] = __assign(__assign({}, partialFormState), { scheme: "between", startDate: editableState.startDate === null
+                                    ? ""
+                                    : dateToStrConverter(editableState.startDate), endDate: editableState.endDate === null
+                                    ? ""
+                                    : dateToStrConverter(editableState.endDate) });
+                            break;
+                        }
+                    }
+                }
+            }
+            return filterFormState;
+        }, {});
+    }, [tableFilterState]);
+};
+export default useFormStateFromTableFilterState;

package/Grid.d.ts

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

package/Grid.jsx

@@ -1,8 +1,12 @@
 "use client";
-import { useMemo } from "react";
+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";
+import FilterOptionsTable from "./FilterOptionsTable/FilterOptionsTable";
+import useFilterStateFromEditable from "./hooks/useFilterStateFromEditable";
 var getTypeComparator = function (typeStr) {
     if (typeStr === "date" || typeStr === "datetime") {
         return function (a, b) { return a.valueOf() - b.valueOf(); };
@@ -24,10 +28,13 @@ var getRowComparator = function (comparator, fieldName) {
     return function (rowA, rowB) { return comparator(rowA[fieldName], rowB[fieldName]); };
 };
 var Grid = function (_a) {
-    var rows = _a.rows, cols = _a.cols, pagination = _a.pagination, sortModel = _a.sortModel;
+    var rows = _a.rows, cols = _a.cols, pagination = _a.pagination, sortModel = _a.sortModel, filterModel = _a.filterModel;
+    var editableFilterState = (filterModel === null || filterModel === void 0 ? void 0 : filterModel.tableFilterState) || null;
+    var filterState = useFilterStateFromEditable(cols, editableFilterState);
+    var filteredRows = useFilter(rows, editableFilterState);
     var sortedRows = useMemo(function () {
         if (!sortModel || !sortModel.sortColDef) {
-            return rows;
+            return filteredRows;
         }
         var sortFieldName = sortModel.sortColDef.name;
         var sortOrder = sortModel.sortColDef.order;
@@ -47,8 +54,8 @@ var Grid = function (_a) {
             };
             rowComparator = getRowComparator(descComparator, sortFieldName);
         }
-        return rows.slice().sort(rowComparator);
-    }, [rows, cols, sortModel]);
+        return filteredRows.slice().sort(rowComparator);
+    }, [filteredRows, cols, sortModel]);
     var currentPageRows = useMemo(function () {
         if (pagination === undefined) {
             return sortedRows;
@@ -79,7 +86,8 @@ var Grid = function (_a) {
             var displayRow = [];
             Object.keys(row).forEach(function (name) {
                 if (!nameToIndex.has(name)) {
-                    throw new Error("Row data contains a property named \"".concat(name, "\", but it was not found among the column definitions."));
+                    console.error("Warning: row data contains a property named \"".concat(name, "\", but it was not found among the column definitions."));
+                    return;
                 }
                 var index = nameToIndex.get(name);
                 var formatter = cols[index].formatter;
@@ -106,6 +114,7 @@ var Grid = function (_a) {
             return displayRow;
         });
     }, [currentPageRows, cols]);
+    var _b = useState(false), filterOptionsVisible = _b[0], setFilterOptionsVisible = _b[1];
     var handleSetPageNum = function (pageNum) {
         if (pagination === undefined) {
             return;
@@ -118,15 +127,24 @@ var Grid = function (_a) {
         }
         pagination.setPageSizeIndex(Number(event.target.value));
     };
+    var handleToggleFilterOptions = function () {
+        setFilterOptionsVisible(!filterOptionsVisible);
+    };
     // Once this component implements selection state, and if such interactivity is enabled, (conditionally) change the
     // aria role to "grid".
     // Array index is okay for the key for rows until some type of feature involving changing the index of rows, such as
     // sorting or pagination, is implemented.
+    // TODO: implement the above described features: conditionally changing aria role to grid and a key field other than
+    // index
     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="table">
         <thead>
-          <tr>
-            {cols.map(function (_a) {
+          <tr aria-rowindex={1}>
+            {cols.map(function (_a, index) {
             var _b;
             var name = _a.name, label = _a.label, sortable = _a.sortable;
             var colSortModel = sortModel && sortable
@@ -139,13 +157,15 @@ var Grid = function (_a) {
                     },
                 }
                 : undefined;
-            return (<ColHeaderCell key={name} label={label} sortModel={colSortModel}/>);
+            return (<ColHeaderCell key={name} label={label} sortModel={colSortModel} ariaColIndex={index + 1}/>);
         })}
           </tr>
         </thead>
         <tbody>
-          {displayRows.map(function (row, index) { return (<tr key={index}>
-              {row.map(function (value, index) { return (<td key={index}>{value}</td>); })}
+          {displayRows.map(function (row, index) { return (<tr key={index} aria-rowindex={index + 2}>
+              {row.map(function (value, index) { return (<td key={index} aria-colindex={index + 1}>
+                  {value}
+                </td>); })}
             </tr>); })}
         </tbody>
       </table>

package/ToggleButton.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+export interface ToggleButtonProps {
+    isActive: boolean;
+    label: string;
+    onClick: () => void;
+}
+declare const ToggleButton: FC<ToggleButtonProps>;
+export default ToggleButton;

package/ToggleButton.jsx

@@ -0,0 +1,13 @@
+"use client";
+import classNames from "classnames";
+var ToggleButton = function (_a) {
+    var isActive = _a.isActive, label = _a.label, onClick = _a.onClick;
+    var baseClasses = ["btn", "btn-primary"];
+    var variableClasses = {
+        active: isActive,
+    };
+    return (<button type="button" className={classNames(baseClasses, variableClasses)} aria-pressed={isActive} onClick={onClick}>
+      {label}
+    </button>);
+};
+export default ToggleButton;

package/hooks/useEditableFromFilterState.d.ts

@@ -0,0 +1,3 @@
+import { EditableTableFilterState, TableFilterState } from "../types";
+declare const useEditableFromFilterState: (filterState: TableFilterState | null) => EditableTableFilterState | null;
+export default useEditableFromFilterState;

package/hooks/useEditableFromFilterState.js

@@ -0,0 +1,14 @@
+import { useMemo } from "react";
+var useEditableFromFilterState = function (filterState) {
+    return useMemo(function () {
+        if (filterState === null) {
+            return null;
+        }
+        var editableState = {};
+        Object.keys(filterState).forEach(function (columnName) {
+            editableState[columnName] = filterState[columnName].editableState;
+        });
+        return editableState;
+    }, [filterState]);
+};
+export default useEditableFromFilterState;

package/hooks/useFilter.d.ts

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

package/hooks/useFilter.js

@@ -0,0 +1,82 @@
+import { useMemo } from "react";
+var useFilter = function (rows, filterState) {
+    return useMemo(function () {
+        if (filterState === null) {
+            return rows;
+        }
+        return rows.filter(function (row) {
+            function checkIfPassesStringFilter(value, state) {
+                switch (state.scheme) {
+                    case "contains": {
+                        return value.includes(state.searchString);
+                    }
+                    case "startsWith": {
+                        return value.startsWith(state.searchString);
+                    }
+                    default: {
+                        return value.endsWith(state.searchString);
+                    }
+                }
+            }
+            function checkIfPassesNumberFilter(value, state) {
+                var numValue = Number(state.numValue); // Note that a blank string becomes 0
+                switch (state.scheme) {
+                    case "equals":
+                        return value === numValue;
+                    case "greaterThan":
+                        return value > numValue;
+                    case "lessThan":
+                        return value < numValue;
+                    case "greaterOrEqual":
+                        return value >= numValue;
+                    default:
+                        return value <= numValue;
+                }
+            }
+            function checkIfPassesDateFilter(value, state) {
+                switch (state.scheme) {
+                    case "startFrom":
+                        return state.startDate === null || value >= state.startDate;
+                    case "endAt":
+                        return state.endDate === null || value <= state.endDate;
+                    case "between":
+                        return (state.startDate === null ||
+                            state.endDate === null ||
+                            (value >= state.startDate && value <= state.endDate));
+                }
+            }
+            var columnNames = Object.keys(row);
+            for (var _i = 0, columnNames_1 = columnNames; _i < columnNames_1.length; _i++) {
+                var columnName = columnNames_1[_i];
+                if (!(columnName in filterState)) {
+                    continue;
+                }
+                if (!filterState[columnName].enabled) {
+                    continue;
+                }
+                var columnFilterState = filterState[columnName];
+                switch (columnFilterState.type) {
+                    case "string": {
+                        if (!checkIfPassesStringFilter(row[columnName], columnFilterState)) {
+                            return false;
+                        }
+                        break;
+                    }
+                    case "number": {
+                        if (!checkIfPassesNumberFilter(row[columnName], columnFilterState)) {
+                            return false;
+                        }
+                        break;
+                    }
+                    default: {
+                        if (!checkIfPassesDateFilter(row[columnName], columnFilterState)) {
+                            return false;
+                        }
+                    }
+                }
+            }
+            return true;
+        });
+    }, [rows, filterState]);
+};
+export default useFilter;

package/hooks/useFilterStateFromEditable.d.ts

@@ -0,0 +1,3 @@
+import { ColDef, EditableTableFilterState, TableFilterState } from "../types";
+declare const useFilterStateFromEditable: (colDefs: ColDef[], editableFilterState: EditableTableFilterState | null) => TableFilterState | null;
+export default useFilterStateFromEditable;

package/hooks/useFilterStateFromEditable.js

@@ -0,0 +1,18 @@
+import { useMemo } from "react";
+var useFilterStateFromEditable = function (colDefs, editableFilterState) {
+    return useMemo(function () {
+        if (editableFilterState === null) {
+            return null;
+        }
+        var filterState = {};
+        colDefs.forEach(function (_a) {
+            var name = _a.name, label = _a.label;
+            filterState[name] = {
+                editableState: editableFilterState[name],
+                label: label,
+            };
+        });
+        return filterState;
+    }, [colDefs, editableFilterState]);
+};
+export default useFilterStateFromEditable;

package/models/descriptions.d.ts

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

package/models/descriptions.js

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

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": "0.1.4",
+  "version": "1.1.0",
   "license": "MIT",
   "author": "Brook Li",
   "homepage": "https://react-bootstrap-data-grid.vercel.app/",
@@ -14,11 +14,12 @@
     "grid"
   ],
   "dependencies": {
-    "classnames": "^2.5.1"
+    "classnames": "^2.5.1",
+    "dayjs": "^1.11.13"
   },
   "peerDependencies": {
-    "react": "^18",
-    "react-dom": "^18"
+    "react": "^19",
+    "react-dom": "^19"
   },
   "main": "./index.js",
   "module": "./index.js",

package/types.d.ts

@@ -23,3 +23,54 @@ export interface TableSortModel {
     sortColDef: SortColDef | null;
     setSortColDef: (sortColDef: SortColDef | null) => void;
 }
+export type TableFilterState = Record<string, ColFilterState>;
+export type EditableTableFilterState = Record<string, FilterState>;
+export interface ColFilterState {
+    editableState: FilterState;
+    label: string;
+}
+export interface AbstractFilterState {
+    enabled: boolean;
+}
+export declare const stringFilterSchemes: readonly ["contains", "startsWith", "endsWith"];
+export type StringFilterScheme = (typeof stringFilterSchemes)[number];
+export declare const stringFilterSchemeNames: Record<StringFilterScheme, string>;
+export interface StringFilterState extends AbstractFilterState {
+    type: "string";
+    scheme: StringFilterScheme;
+    searchString: string;
+}
+export declare const numberFilterSchemes: readonly ["equals", "greaterThan", "lessThan", "greaterOrEqual", "lessOrEqual"];
+export type NumberFilterScheme = (typeof numberFilterSchemes)[number];
+export declare const numberFilterSchemeNames: Record<NumberFilterScheme, string>;
+export interface NumberFilterState extends AbstractFilterState {
+    type: "number";
+    scheme: NumberFilterScheme;
+    numValue: number | null;
+}
+export declare const dateFilterSchemes: readonly ["startFrom", "endAt", "between"];
+export type DateFilterScheme = (typeof dateFilterSchemes)[number];
+export declare const dateFilterSchemeNames: Record<DateFilterScheme, string>;
+export interface AbstractDateFilterState extends AbstractFilterState {
+    type: "date" | "datetime";
+    scheme: DateFilterScheme;
+}
+export interface StartDateFilterState extends AbstractDateFilterState {
+    scheme: "startFrom";
+    startDate: Date | null;
+}
+export interface EndDateFilterState extends AbstractDateFilterState {
+    scheme: "endAt";
+    endDate: Date | null;
+}
+export interface BetweenDatesFilterState extends AbstractDateFilterState {
+    scheme: "between";
+    startDate: Date | null;
+    endDate: Date | null;
+}
+export type DateFilterState = StartDateFilterState | EndDateFilterState | BetweenDatesFilterState;
+export type FilterState = StringFilterState | NumberFilterState | DateFilterState;
+export interface FilterModel {
+    tableFilterState: EditableTableFilterState;
+    setTableFilterState: (state: EditableTableFilterState) => void;
+}

package/types.js

@@ -1 +1,30 @@
-export {};
+export var stringFilterSchemes = [
+    "contains",
+    "startsWith",
+    "endsWith",
+];
+export var stringFilterSchemeNames = {
+    contains: "Contains",
+    startsWith: "Starts With",
+    endsWith: "Ends With",
+};
+export var numberFilterSchemes = [
+    "equals",
+    "greaterThan",
+    "lessThan",
+    "greaterOrEqual",
+    "lessOrEqual",
+];
+export var numberFilterSchemeNames = {
+    equals: "=",
+    greaterThan: ">",
+    lessThan: "<",
+    greaterOrEqual: ">=",
+    lessOrEqual: "<=",
+};
+export var dateFilterSchemes = ["startFrom", "endAt", "between"];
+export var dateFilterSchemeNames = {
+    startFrom: "Start Form",
+    endAt: "End At",
+    between: "Between",
+};

package/util/datetime.d.ts

@@ -0,0 +1,3 @@
+export declare const dateToInputStr: (date: Date) => string;
+export declare const dateToDatetimeInputStr: (date: Date) => string;
+export declare const datetimeInputStrToUtc: (datetimeStr: string) => string;

package/util/datetime.js

@@ -0,0 +1,9 @@
+import dayjs from "dayjs";
+export var dateToInputStr = function (date) { return dayjs(date).format("YYYY-MM-DD"); };
+export var dateToDatetimeInputStr = function (date) {
+    return dayjs(date).format("YYYY-MM-DDTHH:mm");
+};
+// All dates and datetimes that the grid displays are in UTC. The datetime
+// string in the value attribute of an input element of type datetime-local
+// is based on the local timezone of the client.
+export var datetimeInputStrToUtc = function (datetimeStr) { return datetimeStr + "Z"; };