WHTable - Accessible React Table Component

WHTable is a TypeScript React component providing an accessible, feature-rich table for WealthHealth applications. Built with React Aria Components and styled with Tailwind CSS.

Features

- ✅ Fully accessible (WCAG compliant)
- 🔍 Built-in search functionality
- 📊 Sortable columns
- 📏 Resizable columns
- 🔢 Pagination
- 🌓 Light and dark mode support
- 🔄 Redux state management
- 📱 Responsive design
- 🏢 WealthHealth corporate design

Prerequisites

To use WHTable, you need:

- React 19 or higher

Installation

``bash npm install @spratch/whtable`

`Usage`

`$3`

`jsx // index.jsx

import { WHTable } from "@spratch/whtable";

function YourComponent() { const employees = [ { id: "1", firstName: "John", lastName: "Doe", startDate: "2023-01-15", department: "Engineering" } // more data... ];

const columns = [ { id: "firstName", title: "First Name" }, { id: "lastName", title: "Last Name" }, { id: "startDate", title: "Start Date" }, { id: "department", title: "Department" } ];

return ( itemsStatus="succeeded" itemsMessage="" items={employees} itemsName={{ singular: "employee", plural: "employees" }} newItemLink="/create-employee" lengthOptions={["10", "25", "50", "100"]} columnsTitles={columns} emailAddress="support@wealthhealth.com" /> ); }`

`Props`

| Prop | Type | Description | Default | | --------------- | -------------------------------------- | -------------------------------------------------------- | --------------------------------------- | |itemsStatus | string| Loading state ("idle", "loading", "succeeded", "failed") | Required | |itemsMessage | string| Message to display (e.g., error message) | Required | |items | Record[]| Array of data objects | Required | |itemsName | { singular: string, plural: string } | Names for your data items | { singular: "item", plural: "items" }| |newItemLink | string | Link to create a new item | undefined| |lengthOptions | string[] | Options for page size | ["10", "25", "50", "100"]| |columnsTitles | { id: string, title: string }[]| Column definitions | Required | |emailAddress | string | Support email (shown on error) | undefined` |

License

MIT

Issues

For bugs or feature requests, please open an issue on the GitHub repository.

Usage

$3

jsx
// index.jsx

import { WHTable } from "@spratch/whtable";

function YourComponent() {
  const employees = [
    {
      id: "1",
      firstName: "John",
      lastName: "Doe",
      startDate: "2023-01-15",
      department: "Engineering"
    }
    // more data...
  ];

  const columns = [
    { id: "firstName", title: "First Name" },
    { id: "lastName", title: "Last Name" },
    { id: "startDate", title: "Start Date" },
    { id: "department", title: "Department" }
  ];

  return (
          itemsStatus="succeeded"
      itemsMessage=""
      items={employees}
      itemsName={{ singular: "employee", plural: "employees" }}
      newItemLink="/create-employee"
      lengthOptions={["10", "25", "50", "100"]}
      columnsTitles={columns}
      emailAddress="support@wealthhealth.com"
    />
  );
}

Props

| Prop            | Type                                   | Description                                              | Default                                 |
| --------------- | -------------------------------------- | -------------------------------------------------------- | --------------------------------------- |
|

itemsStatus | string

                               | Loading state ("idle", "loading", "succeeded", "failed") | Required                                |
|

itemsMessage | string

                               | Message to display (e.g., error message)                 | Required                                |
|

items | Record[]

             | Array of data objects                                    | Required                                |
|

itemsName | { singular: string, plural: string } | Names for your data items | { singular: "item", plural: "items" }

|
|

newItemLink | string | Link to create a new item | undefined

|
|

lengthOptions | string[] | Options for page size | ["10", "25", "50", "100"]

|
|

columnsTitles | { id: string, title: string }[]

      | Column definitions                                       | Required                                |
|

emailAddress | string | Support email (shown on error) | undefined` |