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

package/Grid.d.ts

@@ -0,0 +1,18 @@
+import { FC } from "react";
+import { ColDef, RowDef, Size } 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;
+}
+declare const Grid: FC<GridProps>;
+export default Grid;

package/Grid.jsx

@@ -0,0 +1,113 @@
+"use client";
+import { useMemo } from "react";
+import Pagination from "./Pagination";
+import classNames from "classnames";
+var Grid = function (_a) {
+    var rows = _a.rows, cols = _a.cols, pagination = _a.pagination;
+    var currentPageRows = useMemo(function () {
+        if (pagination === undefined) {
+            return rows;
+        }
+        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]);
+    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, "\",\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;
+        });
+    }, [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 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>
+      {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.3",
   "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"

package/types.d.ts

@@ -1,5 +1,5 @@
-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;
@@ -7,4 +7,5 @@ export interface ColDef {
     formatter?: (value: any) => string;
 }
 export type RowDef = Record<string, ColDataType>;
-export {};
+export type JustifyContentSetting = "start" | "end" | "center" | "between" | "around" | "evenly";
+export type Size = "small" | "medium" | "large";