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

package/ColHeaderCell.d.ts

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

package/ColHeaderCell.jsx

@@ -0,0 +1,75 @@
+"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 (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">
+    <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">
+    <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;
+    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(["text-body-secondary"]);
+                }
+                return placeholder;
+            }
+            case "asc": {
+                return getUpArrow();
+            }
+            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 " }}>
+      {label}
+      {getSortSymbol()}
+    </th>);
+};
+export default ColHeaderCell;

package/Grid.d.ts

@@ -0,0 +1,19 @@
+import { FC } from "react";
+import { ColDef, RowDef, Size, TableSortModel } from "./types";
+export interface GridPaginationState {
+    pageSizeOptions: number[];
+    pageSizeIndex: number;
+    setPageSizeIndex: (pageSizeIndex: number) => void;
+    currentPage: number;
+    setCurrentPage: (pageNum: number) => void;
+    maxPageButtons: number;
+    componentSize?: Size;
+}
+export interface GridProps {
+    rows: RowDef[];
+    cols: ColDef[];
+    pagination?: GridPaginationState;
+    sortModel?: TableSortModel;
+}
+declare const Grid: FC<GridProps>;
+export default Grid;

package/Grid.jsx

@@ -0,0 +1,169 @@
+"use client";
+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, 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 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 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)) {
+                    throw new Error("Row data contains a property named \"".concat(name, "\", 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;
+        });
+    }, [currentPageRows, cols]);
+    var handleSetPageNum = function (pageNum) {
+        if (pagination === undefined) {
+            return;
+        }
+        pagination.setCurrentPage(pageNum);
+    };
+    var handleSetPageSize = function (event) {
+        if (pagination === undefined) {
+            return;
+        }
+        pagination.setPageSizeIndex(Number(event.target.value));
+    };
+    // 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 (<div>
+      <table className="table">
+        <thead>
+          <tr>
+            {cols.map(function (_a) {
+            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}/>);
+        })}
+          </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>
+      {pagination && (<div className="d-flex justify-content-end gap-2">
+          <div>
+            <select className={classNames({
+                "form-select": true,
+                "form-select-lg": pagination.componentSize === "large",
+                "form-select-sm": pagination.componentSize === "small",
+            })} value={pagination.pageSizeIndex} aria-label="Number of Rows per Page" onChange={handleSetPageSize}>
+              {pagination.pageSizeOptions.map(function (numRows, index) { return (<option key={index} value={index}>
+                  {numRows}
+                </option>); })}
+            </select>
+          </div>
+          <Pagination numPages={Math.ceil(rows.length /
+                pagination.pageSizeOptions[pagination.pageSizeIndex])} pageNum={pagination.currentPage} numButtons={pagination.maxPageButtons} setPageNum={handleSetPageNum} size={pagination.componentSize || "medium"}/>
+        </div>)}
+    </div>);
+};
+export default Grid;

package/Pagination.d.ts

@@ -0,0 +1,24 @@
+import { JustifyContentSetting, Size } from "./types";
+import { FC } from "react";
+export interface PaginationProps {
+    numPages: number;
+    pageNum: number;
+    numButtons: number;
+    setPageNum: (pageNum: number) => void;
+    ariaLabel?: string;
+    alignment?: JustifyContentSetting;
+    size?: Size;
+}
+/**
+ * An interactive pagination component that parameterizes Bootstrap styling
+ * options as props.
+ * @param numPages - Total number of pages
+ * @param numButtons - Number of buttons of numerical indices to show at once
+ * @param pageNum - The currently selected page
+ * @param setPageNum - Callback function to set the selected page
+ * @param ariaLabel - Aria label of the <nav> element
+ * @param alignment - Flexbox justify-content setting on the <ul> element
+ * @param size - Size variant of the <ul> element
+ */
+declare const Pagination: FC<PaginationProps>;
+export default Pagination;

package/Pagination.jsx

@@ -0,0 +1,119 @@
+"use client";
+import { useMemo } from "react";
+import classNames from "classnames";
+/**
+ * An interactive pagination component that parameterizes Bootstrap styling
+ * options as props.
+ * @param numPages - Total number of pages
+ * @param numButtons - Number of buttons of numerical indices to show at once
+ * @param pageNum - The currently selected page
+ * @param setPageNum - Callback function to set the selected page
+ * @param ariaLabel - Aria label of the <nav> element
+ * @param alignment - Flexbox justify-content setting on the <ul> element
+ * @param size - Size variant of the <ul> element
+ */
+var Pagination = function (_a) {
+    var numPages = _a.numPages, numButtons = _a.numButtons, pageNum = _a.pageNum, setPageNum = _a.setPageNum, ariaLabel = _a.ariaLabel, alignment = _a.alignment, size = _a.size;
+    var ulClasses = ["pagination"];
+    if (size === "small") {
+        ulClasses.push("pagination-sm");
+    }
+    else if (size === "large") {
+        ulClasses.push("pagination-lg");
+    }
+    if (alignment) {
+        ulClasses.push("justify-content-".concat(alignment));
+    }
+    var lowerBound = pageNum - Math.floor((numButtons - 1) / 2);
+    var upperBound = pageNum + Math.ceil((numButtons - 1) / 2);
+    if (upperBound > numPages) {
+        var diff = upperBound - numPages;
+        lowerBound = Math.max(lowerBound - diff, 1);
+        upperBound -= diff;
+    }
+    else if (lowerBound < 1) {
+        var diff = 1 - lowerBound;
+        lowerBound = 1;
+        upperBound = Math.min(numPages, upperBound + diff);
+    }
+    var buttonIndices = useMemo(function () {
+        var indices = [];
+        for (var i = lowerBound; i <= upperBound; i++) {
+            indices.push(i);
+        }
+        return indices;
+    }, [lowerBound, upperBound]);
+    function getFirstArrowButton() {
+        if (lowerBound === 1) {
+            return null;
+        }
+        return (<li className="page-item">
+        <a className="page-link" href="#" aria-label="First" onClick={function (event) {
+                event.preventDefault();
+                setPageNum(1);
+            }}>
+          <span aria-hidden="true">&lt;&lt;</span>
+        </a>
+      </li>);
+    }
+    function getPrevArrowButton() {
+        if (pageNum === 1) {
+            return null;
+        }
+        return (<li className="page-item">
+        <a className="page-link" href="#" aria-label="Previous" onClick={function (event) {
+                event.preventDefault();
+                setPageNum(pageNum - 1);
+            }}>
+          <span aria-hidden="true">&lt;</span>
+        </a>
+      </li>);
+    }
+    function getNextArrowButton() {
+        if (pageNum === numPages) {
+            return null;
+        }
+        return (<li className="page-item">
+        <a className="page-link" href="#" aria-label="Next" onClick={function (event) {
+                event.preventDefault();
+                setPageNum(pageNum + 1);
+            }}>
+          <span aria-hidden="true">&gt;</span>
+        </a>
+      </li>);
+    }
+    function getLastArrowButton() {
+        if (upperBound === numPages) {
+            return null;
+        }
+        return (<li className="page-item">
+        <a className="page-link" href="#" aria-label="Last" onClick={function (event) {
+                event.preventDefault();
+                setPageNum(numPages);
+            }}>
+          <span aria-hidden="true">&gt;&gt;</span>
+        </a>
+      </li>);
+    }
+    var indexButtons = buttonIndices.map(function (buttonIndex) { return (<li key={buttonIndex} className={classNames({
+            "page-item": true,
+            active: pageNum === buttonIndex,
+        })} aria-current={pageNum === buttonIndex ? "page" : undefined}>
+      <a className="page-link" href="#" onClick={function (event) {
+            event.preventDefault();
+            setPageNum(buttonIndex);
+        }}>
+        {buttonIndex}
+      </a>
+    </li>); });
+    return (<nav aria-label={ariaLabel}>
+      <ul className={classNames(ulClasses)}>
+        {getFirstArrowButton()}
+        {getPrevArrowButton()}
+        {indexButtons}
+        {getNextArrowButton()}
+        {getLastArrowButton()}
+      </ul>
+    </nav>);
+};
+export default Pagination;

package/index.d.ts

@@ -1,2 +1,4 @@
 export * from "./types";
-export { default } from "./component";
+export * from "./Grid";
+export * from "./Pagination";
+export { default } from "./Grid";

package/index.js

@@ -1,2 +1,4 @@
 export * from "./types";
-export { default } from "./component";
+export * from "./Grid";
+export * from "./Pagination";
+export { default } from "./Grid";

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.2",
+  "version": "0.1.4",
   "license": "MIT",
   "author": "Brook Li",
   "homepage": "https://react-bootstrap-data-grid.vercel.app/",
@@ -13,6 +13,9 @@
     "table",
     "grid"
   ],
+  "dependencies": {
+    "classnames": "^2.5.1"
+  },
   "peerDependencies": {
     "react": "^18",
     "react-dom": "^18"
@@ -22,7 +25,7 @@
   "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

@@ -1,10 +1,25 @@
-type ColDataType = string | number | Date;
-type ColDataTypeStrings = "string" | "number" | "date" | "datetime";
+export type ColDataType = string | number | Date;
+export type ColDataTypeStrings = "string" | "number" | "date" | "datetime";
 export interface ColDef {
     type: ColDataTypeStrings;
     name: string;
     label: string;
     formatter?: (value: any) => string;
+    sortable?: boolean;
 }
 export type RowDef = Record<string, ColDataType>;
-export {};
+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;
+}