@absreim/react-bootstrap-data-grid 1.0.0 → 1.1.2

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,67 @@
+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);
+    var checkboxLabel = "".concat(columnLabel, " Column Filter Toggle");
+    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>);
+};
+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,49 @@
+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;
+    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>);
+};
+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,49 @@
+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;
+    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>);
+};
+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,54 +1,22 @@
 "use client";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import Pagination from "./Pagination";
 import classNames from "classnames";
 import ColHeaderCell from "./ColHeaderCell";
-var getTypeComparator = function (typeStr) {
-    if (typeStr === "date" || typeStr === "datetime") {
-        return function (a, b) { return a.valueOf() - b.valueOf(); };
-    }
-    if (typeStr === "number") {
-        return function (a, b) { return a - b; };
-    }
-    return function (a, b) {
-        if (a < b) {
-            return -1;
-        }
-        if (a > b) {
-            return 1;
-        }
-        return 0;
-    };
-};
-var getRowComparator = function (comparator, fieldName) {
-    return function (rowA, rowB) { return comparator(rowA[fieldName], rowB[fieldName]); };
-};
+import useFilter from "./hooks/useFilter";
+import ToggleButton from "./ToggleButton";
+import FilterOptionsTable from "./FilterOptionsTable/FilterOptionsTable";
+import useFilterStateFromEditable from "./hooks/useFilterStateFromEditable";
+import useAugmentedRows from "./hooks/useAugmentedRows";
+import useSortedRows from "./hooks/useSortedRows";
+import useDisplayRows from "./hooks/useDisplayRows";
 var Grid = function (_a) {
-    var rows = _a.rows, cols = _a.cols, pagination = _a.pagination, sortModel = _a.sortModel;
-    var sortedRows = useMemo(function () {
-        if (!sortModel || !sortModel.sortColDef) {
-            return rows;
-        }
-        var sortFieldName = sortModel.sortColDef.name;
-        var sortOrder = sortModel.sortColDef.order;
-        var sortColIndex = cols.findIndex(function (_a) {
-            var name = _a.name;
-            return name === sortFieldName;
-        });
-        if (sortColIndex < 0) {
-            throw new Error("The sortModel for the grid specifies that the data should be sorted based on a column named ".concat(sortFieldName, ", but it was not found among the column definitions."));
-        }
-        var typeStr = cols[sortColIndex].type;
-        var ascComparator = getTypeComparator(typeStr);
-        var rowComparator = getRowComparator(ascComparator, sortFieldName);
-        if (sortOrder === "desc") {
-            var descComparator = function (a, b) {
-                return ascComparator(a, b) * -1;
-            };
-            rowComparator = getRowComparator(descComparator, sortFieldName);
-        }
-        return rows.slice().sort(rowComparator);
-    }, [rows, cols, 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 augmentedRows = useAugmentedRows(rows);
+    var filteredRows = useFilter(augmentedRows, editableFilterState);
+    var sortedRows = useSortedRows(filteredRows, cols, sortModel);
     var currentPageRows = useMemo(function () {
         if (pagination === undefined) {
             return sortedRows;
@@ -59,54 +27,8 @@ var Grid = function (_a) {
         var upperIndex = lowerIndex + pageSize;
         return sortedRows.slice(lowerIndex, upperIndex);
     }, [sortedRows, pagination]);
-    var displayRows = useMemo(function () {
-        var nameToIndex = new Map();
-        cols.forEach(function (_a, index) {
-            var name = _a.name;
-            nameToIndex.set(name, index);
-        });
-        return currentPageRows.map(function (row, index) {
-            cols
-                .map(function (_a) {
-                var name = _a.name;
-                return name;
-            })
-                .forEach(function (name) {
-                if (!(name in row)) {
-                    throw new Error("Column definition specifies a property named \"".concat(name, "\", but it was not found in the row data object at index ").concat(index, "."));
-                }
-            });
-            var displayRow = [];
-            Object.keys(row).forEach(function (name) {
-                if (!nameToIndex.has(name)) {
-                    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;
-                var typeString = cols[index].type;
-                var value = row[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;
-            });
-            return displayRow;
-        });
-    }, [currentPageRows, cols]);
+    var displayRows = useDisplayRows(currentPageRows, cols);
+    var _b = useState(false), filterOptionsVisible = _b[0], setFilterOptionsVisible = _b[1];
     var handleSetPageNum = function (pageNum) {
         if (pagination === undefined) {
             return;
@@ -119,12 +41,18 @@ 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
     return (<div>
-      <table className="table">
+      {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" aria-rowcount={filteredRows.length + 1}>
         <thead>
           <tr aria-rowindex={1}>
             {cols.map(function (_a, index) {
@@ -145,8 +73,8 @@ var Grid = function (_a) {
           </tr>
         </thead>
         <tbody>
-          {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}>
+          {displayRows.map(function (row, index) { return (<tr key={row.origIndex} aria-rowindex={index + 2}>
+              {row.contents.map(function (value, index) { return (<td key={index} aria-colindex={index + 1}>
                   {value}
                 </td>); })}
             </tr>); })}

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/useAugmentedRows.d.ts

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

package/hooks/useAugmentedRows.js

@@ -0,0 +1,12 @@
+import { useMemo } from "react";
+var useAugmentedRows = function (rows) {
+    return useMemo(function () {
+        return rows.map(function (row, index) { return ({
+            data: row,
+            meta: {
+                origIndex: index,
+            },
+        }); });
+    }, [rows]);
+};
+export default useAugmentedRows;

package/hooks/useDisplayRows.d.ts

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

package/hooks/useDisplayRows.js

@@ -0,0 +1,52 @@
+import { useMemo } from "react";
+var useDisplayRows = function (currentPageRows, cols) {
+    return useMemo(function () {
+        var nameToIndex = new Map();
+        cols.forEach(function (_a, index) {
+            var name = _a.name;
+            nameToIndex.set(name, index);
+        });
+        return currentPageRows.map(function (row, index) {
+            cols
+                .map(function (_a) {
+                var name = _a.name;
+                return name;
+            })
+                .forEach(function (name) {
+                if (!(name in row.data)) {
+                    throw new Error("Column definition specifies a property named \"".concat(name, "\", but it was not found in the row data object at index ").concat(index, "."));
+                }
+            });
+            var displayRow = [];
+            Object.keys(row.data).forEach(function (name) {
+                if (!nameToIndex.has(name)) {
+                    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;
+                var typeString = cols[index].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;
+            });
+            return { contents: displayRow, origIndex: row.meta.origIndex };
+        });
+    }, [currentPageRows, cols]);
+};
+export default useDisplayRows;

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 { AugRowDef, EditableTableFilterState } from "../types";
+declare const useFilter: (rows: AugRowDef[], filterState: EditableTableFilterState | null) => AugRowDef[];
+export default useFilter;

package/hooks/useFilter.js

@@ -0,0 +1,84 @@
+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) {
+                // Note that a blank string becomes 0. This situation should usually be
+                // prevented by form validation.
+                var numValue = Number(state.numValue);
+                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.data);
+            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.data[columnName], columnFilterState)) {
+                            return false;
+                        }
+                        break;
+                    }
+                    case "number": {
+                        if (!checkIfPassesNumberFilter(row.data[columnName], columnFilterState)) {
+                            return false;
+                        }
+                        break;
+                    }
+                    default: {
+                        if (!checkIfPassesDateFilter(row.data[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/hooks/useSortedRows.d.ts

@@ -0,0 +1,3 @@
+import { AugRowDef, ColDef, TableSortModel } from "../types";
+declare const useSortedRows: (rows: AugRowDef[], cols: ColDef[], sortModel: TableSortModel | undefined) => AugRowDef[];
+export default useSortedRows;

package/hooks/useSortedRows.js

@@ -0,0 +1,48 @@
+import { useMemo } from "react";
+var getTypeComparator = function (typeStr) {
+    if (typeStr === "date" || typeStr === "datetime") {
+        return function (a, b) { return a.valueOf() - b.valueOf(); };
+    }
+    if (typeStr === "number") {
+        return function (a, b) { return a - b; };
+    }
+    return function (a, b) {
+        if (a < b) {
+            return -1;
+        }
+        if (a > b) {
+            return 1;
+        }
+        return 0;
+    };
+};
+var getRowComparator = function (comparator, fieldName) {
+    return function (rowA, rowB) { return comparator(rowA.data[fieldName], rowB.data[fieldName]); };
+};
+var useSortedRows = function (rows, cols, sortModel) {
+    return useMemo(function () {
+        if (!sortModel || !sortModel.sortColDef) {
+            return rows;
+        }
+        var sortFieldName = sortModel.sortColDef.name;
+        var sortOrder = sortModel.sortColDef.order;
+        var sortColIndex = cols.findIndex(function (_a) {
+            var name = _a.name;
+            return name === sortFieldName;
+        });
+        if (sortColIndex < 0) {
+            throw new Error("The sortModel for the grid specifies that the data should be sorted based on a column named ".concat(sortFieldName, ", but it was not found among the column definitions."));
+        }
+        var typeStr = cols[sortColIndex].type;
+        var ascComparator = getTypeComparator(typeStr);
+        var rowComparator = getRowComparator(ascComparator, sortFieldName);
+        if (sortOrder === "desc") {
+            var descComparator = function (a, b) {
+                return ascComparator(a, b) * -1;
+            };
+            rowComparator = getRowComparator(descComparator, sortFieldName);
+        }
+        return rows.slice().sort(rowComparator);
+    }, [rows, cols, sortModel]);
+};
+export default useSortedRows;

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": "1.0.0",
+  "version": "1.1.2",
   "license": "MIT",
   "author": "Brook Li",
   "homepage": "https://react-bootstrap-data-grid.vercel.app/",
@@ -14,7 +14,8 @@
     "grid"
   ],
   "dependencies": {
-    "classnames": "^2.5.1"
+    "classnames": "^2.5.1",
+    "dayjs": "^1.11.13"
   },
   "peerDependencies": {
     "react": "^19",

package/types.d.ts

@@ -8,6 +8,17 @@ export interface ColDef {
     sortable?: boolean;
 }
 export type RowDef = Record<string, ColDataType>;
+export interface RowMetadata {
+    origIndex: number;
+}
+export interface AugRowDef {
+    data: RowDef;
+    meta: RowMetadata;
+}
+export interface FormattedRow {
+    contents: string[];
+    origIndex: number;
+}
 export type JustifyContentSetting = "start" | "end" | "center" | "between" | "around" | "evenly";
 export type Size = "small" | "medium" | "large";
 export type SortOrder = "asc" | "desc";
@@ -23,3 +34,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"; };

package/component.d.ts

@@ -1,8 +0,0 @@
-import { FC } from "react";
-import { ColDef, RowDef } from "./types";
-interface Props {
-    rows: RowDef[];
-    cols: ColDef[];
-}
-declare const Grid: FC<Props>;
-export default Grid;

package/component.jsx

@@ -1,72 +0,0 @@
-"use client";
-import { useMemo } from "react";
-var Grid = function (_a) {
-    var rows = _a.rows, cols = _a.cols;
-    var displayRows = useMemo(function () {
-        var nameToIndex = new Map();
-        cols.forEach(function (_a, index) {
-            var name = _a.name;
-            nameToIndex.set(name, index);
-        });
-        return rows.map(function (row, index) {
-            cols
-                .map(function (_a) {
-                var name = _a.name;
-                return name;
-            })
-                .forEach(function (name) {
-                if (!(name in row)) {
-                    throw new Error("Column definition specifies a property named \"".concat(name, "\",\n              but it was no found in the row data object at index ").concat(index));
-                }
-            });
-            var displayRow = [];
-            Object.keys(row).forEach(function (name) {
-                if (!nameToIndex.has(name)) {
-                    throw new Error("Row data contains a property named \"".concat(name, "\",\n          but it was not found among the column definitions"));
-                }
-                var index = nameToIndex.get(name);
-                var formatter = cols[index].formatter;
-                var typeString = cols[index].type;
-                var value = row[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;
-            });
-            return displayRow;
-        });
-    }, [rows, cols]);
-    // 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.
-    return (<table className="table">
-      <thead>
-        <tr>
-          {cols.map(function (_a) {
-            var name = _a.name, label = _a.label;
-            return (<th key={name}>{label}</th>);
-        })}
-        </tr>
-      </thead>
-      <tbody>
-        {displayRows.map(function (row, index) { return (<tr key={index}>
-            {row.map(function (value, index) { return (<td key={index}>{value}</td>); })}
-          </tr>); })}
-      </tbody>
-    </table>);
-};
-export default Grid;