@absreim/react-bootstrap-data-grid 0.1.2

package/README.md

@@ -0,0 +1,5 @@
+**@absreim/react-bootstrap-data-grid** is a data grid UI component meant for web apps using both React and Bootstrap.
+
+See the documentation site at https://react-bootstrap-data-grid.vercel.app/ for instructions on usage.
+
+See the source repository at https://github.com/absreim/react-bootstrap-data-grid to view the source code.

package/component.d.ts

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,72 @@
+"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;

package/index.d.ts

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

package/index.js

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

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@absreim/react-bootstrap-data-grid",
+  "description": "Data grid UI component for use with web apps using React and Bootstrap",
+  "version": "0.1.2",
+  "license": "MIT",
+  "author": "Brook Li",
+  "homepage": "https://react-bootstrap-data-grid.vercel.app/",
+  "private": false,
+  "keywords": [
+    "react",
+    "bootstrap",
+    "data",
+    "table",
+    "grid"
+  ],
+  "peerDependencies": {
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "main": "./index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/absreim/react-bootstrap-data-grid.git",
+    "directory": "src/grid"
+  }
+}

package/types.d.ts

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

package/types.js

@@ -0,0 +1 @@
+export {};