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

package/FilterOptionsTable/DateFilterRow.jsx

@@ -35,14 +35,18 @@ var DateFilterRow = function (_a) {
     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 type="checkbox" checked={enabled} name="enabled" onChange={handleEnabledChange}/>
+        <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 disabled={!enabled} className="form-select" value={scheme} onChange={handleOpChange}>
+        <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>); })}
@@ -51,11 +55,11 @@ var DateFilterRow = function (_a) {
       <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"/>
+            <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 className="form-control" type={inputType} required={enabled} disabled={!enabled} value={endDate} onChange={handleEndValueChange} aria-label="End Date"/>
+            <input id={endDateInputId} className="form-control" type={inputType} required={enabled} disabled={!enabled} value={endDate} onChange={handleEndValueChange} aria-label={endDateInputLabel}/>
           </>)}
       </td>
     </tr>);

package/FilterOptionsTable/NumberFilterRow.jsx

@@ -25,22 +25,24 @@ var NumberFilterRow = function (_a) {
         setFilterState(__assign(__assign({}, filterState), { inputValue: target.value }));
     };
     var enabled = filterState.enabled, scheme = filterState.scheme, inputValue = filterState.inputValue;
-    // TODO: Input labelling for accessibility
+    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 type="checkbox" checked={enabled} name="enabled" onChange={handleEnabledChange}/>
+        <input name={checkboxLabel} aria-label={checkboxLabel} type="checkbox" checked={enabled} onChange={handleEnabledChange}/>
       </td>
       <td>{columnLabel}</td>
       <td>Number</td>
       <td>
-        <select disabled={!enabled} className="form-select" value={scheme} onChange={handleOpChange}>
+        <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 className="form-control" type="number" required={enabled} disabled={!enabled} value={inputValue} onChange={handleNumInputValueChange}/>
+        <input name={valueInputLabel} aria-label={valueInputLabel} className="form-control" type="number" required={enabled} disabled={!enabled} value={inputValue} onChange={handleNumInputValueChange}/>
       </td>
     </tr>);
 };

package/FilterOptionsTable/StringFilterRow.jsx

@@ -25,22 +25,24 @@ var StringFilterRow = function (_a) {
         setFilterState(__assign(__assign({}, filterState), { searchString: target.value }));
     };
     var enabled = filterState.enabled, scheme = filterState.scheme, searchString = filterState.searchString;
-    // TODO: Input labelling for accessibility
+    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 type="checkbox" checked={enabled} name="enabled" onChange={handleEnabledChange}/>
+        <input name={checkboxLabel} aria-label={checkboxLabel} type="checkbox" checked={enabled} onChange={handleEnabledChange}/>
       </td>
       <td>{columnLabel}</td>
       <td>String</td>
       <td>
-        <select disabled={!enabled} className="form-select" value={scheme} onChange={handleOpChange}>
+        <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 className="form-control" required={enabled} disabled={!enabled} value={searchString} onChange={handleSearchStringChange}/>
+        <input name={valueInputLabel} aria-label={valueInputLabel} className="form-control" required={enabled} disabled={!enabled} value={searchString} onChange={handleSearchStringChange}/>
       </td>
     </tr>);
 };

package/Grid.jsx

@@ -7,55 +7,16 @@ 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(); };
-    }
-    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 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, 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 filteredRows;
-        }
-        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 filteredRows.slice().sort(rowComparator);
-    }, [filteredRows, cols, sortModel]);
+    var augmentedRows = useAugmentedRows(rows);
+    var filteredRows = useFilter(augmentedRows, editableFilterState);
+    var sortedRows = useSortedRows(filteredRows, cols, sortModel);
     var currentPageRows = useMemo(function () {
         if (pagination === undefined) {
             return sortedRows;
@@ -66,54 +27,7 @@ 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) {
@@ -132,16 +46,13 @@ var Grid = function (_a) {
     };
     // 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
+    // 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="table">
+      <table className="table" aria-rowcount={filteredRows.length + 1}>
         <thead>
           <tr aria-rowindex={1}>
             {cols.map(function (_a, index) {
@@ -162,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/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/useFilter.d.ts

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

package/hooks/useFilter.js

@@ -19,7 +19,9 @@ var useFilter = function (rows, filterState) {
                 }
             }
             function checkIfPassesNumberFilter(value, state) {
-                var numValue = Number(state.numValue); // Note that a blank string becomes 0
+                // 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;
@@ -45,7 +47,7 @@ var useFilter = function (rows, filterState) {
                             (value >= state.startDate && value <= state.endDate));
                 }
             }
-            var columnNames = Object.keys(row);
+            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)) {
@@ -57,19 +59,19 @@ var useFilter = function (rows, filterState) {
                 var columnFilterState = filterState[columnName];
                 switch (columnFilterState.type) {
                     case "string": {
-                        if (!checkIfPassesStringFilter(row[columnName], columnFilterState)) {
+                        if (!checkIfPassesStringFilter(row.data[columnName], columnFilterState)) {
                             return false;
                         }
                         break;
                     }
                     case "number": {
-                        if (!checkIfPassesNumberFilter(row[columnName], columnFilterState)) {
+                        if (!checkIfPassesNumberFilter(row.data[columnName], columnFilterState)) {
                             return false;
                         }
                         break;
                     }
                     default: {
-                        if (!checkIfPassesDateFilter(row[columnName], columnFilterState)) {
+                        if (!checkIfPassesDateFilter(row.data[columnName], columnFilterState)) {
                             return false;
                         }
                     }

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@absreim/react-bootstrap-data-grid",
   "description": "Data grid UI component for use with web apps using React and Bootstrap",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "license": "MIT",
   "author": "Brook Li",
   "homepage": "https://react-bootstrap-data-grid.vercel.app/",

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";

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;