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

npm install @spratch/whtable

Usage

Tailwind CSS

// 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 (
    <WHTable
      itemsStatus="succeeded"
      itemsMessage=""
      items={employees}
      itemsName={{ singular: "employee", plural: "employees" }}
      newItemLink="/create-employee"
      lengthOptions={["10", "25", "50", "100"]}
      columnsTitles={columns}
      emailAddress="[email protected]"
    />
  );
}

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<string, string>[] | 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.