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

package/ColHeaderCell.d.ts

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

package/ColHeaderCell.jsx

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

package/Grid.d.ts

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

package/Grid.jsx

@@ -2,18 +2,63 @@
 import { useMemo } 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]); };
+};
 var Grid = function (_a) {
-    var rows = _a.rows, cols = _a.cols, pagination = _a.pagination;
+    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 currentPageRows = useMemo(function () {
         if (pagination === undefined) {
-            return rows;
+            return sortedRows;
         }
         var pageSizeOptions = pagination.pageSizeOptions, pageSizeIndex = pagination.pageSizeIndex, currentPage = pagination.currentPage;
         var pageSize = pageSizeOptions[pageSizeIndex];
         var lowerIndex = pageSize * (currentPage - 1);
         var upperIndex = lowerIndex + pageSize;
-        return rows.slice(lowerIndex, upperIndex);
-    }, [rows, pagination]);
+        return sortedRows.slice(lowerIndex, upperIndex);
+    }, [sortedRows, pagination]);
     var displayRows = useMemo(function () {
         var nameToIndex = new Map();
         cols.forEach(function (_a, index) {
@@ -28,13 +73,14 @@ var Grid = function (_a) {
             })
                 .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));
+                    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)) {
-                    throw new Error("Row data contains a property named \"".concat(name, "\",\n          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;
@@ -80,16 +126,29 @@ var Grid = function (_a) {
     return (<div>
       <table className="table">
         <thead>
-          <tr>
-            {cols.map(function (_a) {
-            var name = _a.name, label = _a.label;
-            return (<th key={name}>{label}</th>);
+          <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
+                ? {
+                    sortOrder: ((_b = sortModel.sortColDef) === null || _b === void 0 ? void 0 : _b.name) === name
+                        ? sortModel.sortColDef.order
+                        : null,
+                    setSortOrder: function (order) {
+                        sortModel.setSortColDef(order && { name: name, order: order });
+                    },
+                }
+                : undefined;
+            return (<ColHeaderCell key={name} label={label} sortModel={colSortModel} ariaColIndex={index + 1}/>);
         })}
           </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/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.3",
+  "version": "1.0.0",
   "license": "MIT",
   "author": "Brook Li",
   "homepage": "https://react-bootstrap-data-grid.vercel.app/",
@@ -17,15 +17,15 @@
     "classnames": "^2.5.1"
   },
   "peerDependencies": {
-    "react": "^18",
-    "react-dom": "^18"
+    "react": "^19",
+    "react-dom": "^19"
   },
   "main": "./index.js",
   "module": "./index.js",
   "types": "./index.d.ts",
   "repository": {
     "type": "git",
-    "url": "https://github.com/absreim/react-bootstrap-data-grid.git",
+    "url": "git+https://github.com/absreim/react-bootstrap-data-grid.git",
     "directory": "src/grid"
   }
-}
+}

package/types.d.ts

@@ -5,7 +5,21 @@ export interface ColDef {
     name: string;
     label: string;
     formatter?: (value: any) => string;
+    sortable?: boolean;
 }
 export type RowDef = Record<string, ColDataType>;
 export type JustifyContentSetting = "start" | "end" | "center" | "between" | "around" | "evenly";
 export type Size = "small" | "medium" | "large";
+export type SortOrder = "asc" | "desc";
+export interface SortColDef {
+    name: string;
+    order: SortOrder;
+}
+export interface ColSortModel {
+    sortOrder: SortOrder | null;
+    setSortOrder: (order: SortOrder | null) => void;
+}
+export interface TableSortModel {
+    sortColDef: SortColDef | null;
+    setSortColDef: (sortColDef: SortColDef | null) => void;
+}