@timadey/generic-table 1.0.0

package/README.md

@@ -0,0 +1,116 @@
+# GenericTable
+
+A highly flexible and reusable React table component built with [HeroUI](https://heroui.com/) (formerly NextUI) and [React Stately](https://react-spectrum.adobe.com/react-stately/).
+
+## Features
+
+- **Client-side Searching:** Instant filtering across all columns.
+- **Client-side Sorting:** Sort data by any column (supports numbers, dates, and strings).
+- **Pagination:** Built-in pagination with configurable rows per page.
+- **Async Data Loading:** Fetch data from a URL or provide it via props.
+- **Customizable:** Override cell rendering and table styling.
+- **Date Awareness:** Smart sorting and searching for date-based columns.
+
+## Installation
+
+```bash
+npm install @timadey/generic-table
+# or
+yarn add @timadey/generic-table
+```
+
+Make sure you have the peer dependencies installed:
+
+```bash
+npm install @heroui/react @react-stately/data lucide-react react react-dom use-debounce
+```
+
+## Usage
+
+### Basic Example
+
+```jsx
+import { GenericTable } from "@timadey/generic-table";
+
+const columns = [
+  { name: "Name", uid: "name", sortable: true },
+  { name: "Role", uid: "role", sortable: true },
+  { name: "Status", uid: "status", sortable: true },
+];
+
+const data = [
+  { id: 1, name: "Tony Reichert", role: "CEO", status: "Active" },
+  { id: 2, name: "Zoey Lang", role: "Technical Lead", status: "Paused" },
+  // ...
+];
+
+export default function App() {
+  return (
+    <GenericTable
+      title="Users"
+      columns={columns}
+      data={data}
+    />
+  );
+}
+```
+
+### With Async Fetching and Custom Cells
+
+```jsx
+import { GenericTable } from "@timadey/generic-table";
+import { Chip } from "@heroui/react";
+
+const columns = [
+  { name: "Amount", uid: "amount", sortable: true },
+  { name: "Status", uid: "status", sortable: true },
+  { name: "Date", uid: "created_at", sortable: true },
+];
+
+function renderCell(item, columnKey) {
+  const value = item[columnKey];
+  
+  switch (columnKey) {
+    case "amount":
+      return `₦${Number(value).toLocaleString()}`;
+    case "status":
+      return (
+        <Chip color={value === "success" ? "success" : "warning"} variant="flat">
+          {value.toUpperCase()}
+        </Chip>
+      );
+    default:
+      return value;
+  }
+}
+
+export default function TransactionsTable() {
+  return (
+    <GenericTable
+      title="Transactions"
+      columns={columns}
+      fetchUrl="/api/transactions"
+      renderCell={renderCell}
+      rowsPerPageOptions={[10, 25, 50]}
+      topContentPlacement="outside"
+    />
+  );
+}
+```
+
+## Props
+
+| Prop                  | Type            | Default        | Description                                                                          |
+|:----------------------|:----------------|:---------------|:-------------------------------------------------------------------------------------|
+| `columns`             | `Array`         | `[]`           | Array of column objects `{ name, uid, sortable, getValue }`                          |
+| `fetchUrl`            | `string`        | `null`         | URL to fetch JSON data from                                                          |
+| `data`                | `Array`         | `[]`           | Static data to display if `fetchUrl` is not provided                                 |
+| `title`               | `string`        | `"Data Table"` | Title displayed above the table                                                      |
+| `rowsPerPageOptions`  | `Array<number>` | `[5, 10, 15]`  | Options for the rows per page dropdown                                               |
+| `renderCell`          | `Function`      | `null`         | Custom cell renderer: `(item, columnKey, index) => ReactNode`                        |
+| `topContentPlacement` | `string`        | `outside`      | Where to place the contents at the top of the table: `inside` or `outside` the table |
+| `...props`            | `any`           |                | Any other props are passed directly to the HeroUI `Table` component                  |
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@timadey/generic-table",
+  "version": "1.0.0",
+  "description": "A highly flexible and reusable React table component built with HeroUI (formerly NextUI) and React Stately.",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "@heroui/react": "^2.4.0",
+    "@react-stately/data": "^3.11.0",
+    "lucide-react": "^0.300.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "use-debounce": "^10.0.0"
+  },
+  "devDependencies": {
+    "@heroui/react": "^2.4.33",
+    "@react-stately/data": "^3.12.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "lucide-react": "^0.477.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "use-debounce": "^10.0.4",
+    "vite": "^5.0.0"
+  },
+  "keywords": [
+    "react",
+    "table",
+    "generic",
+    "heroui",
+    "nextui",
+    "reusable"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Timadey/generic-table.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Timadey/generic-table/issues"
+  },
+  "homepage": "https://github.com/Timadey/generic-table#readme",
+  "author": "Timothy Adeleke",
+  "license": "MIT"
+}