@spratch/whtable v1.0.4

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="support@wealthhealth.com"
    />
  );
}

Props

License

MIT

Issues

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