@versini/ui-table

An accessible and feature-rich React table component built with TypeScript and TailwindCSS.

The Table component provides data tables with sorting, accessibility features, and customizable styling for displaying tabular data.

Table of Contents

• Features
• Installation
• Usage

Installation

npm install @versini/ui-table

Note: This component requires TailwindCSS and the @versini/ui-styles plugin for proper styling. See the installation documentation for complete setup instructions.

Usage

import { Table } from "@versini/ui-table";

function App() {
  const data = [
    { id: 1, name: "John Doe", email: "[email protected]" },
    { id: 2, name: "Jane Smith", email: "[email protected]" }
  ];

  return (
    <Table
      columns={[
        { key: "name", label: "Name" },
        { key: "email", label: "Email" }
      ]}
      data={data}
    />
  );
}

Active Row

Use the active prop on TableRow to highlight a row with a left border indicator:

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableRow
} from "@versini/ui-table";
import { useState } from "react";

function App() {
  const [activeRowId, setActiveRowId] = useState<number | null>(1);
  const data = [
    { id: 1, name: "John Doe", email: "[email protected]" },
    { id: 2, name: "Jane Smith", email: "[email protected]" }
  ];

  return (
    <Table>
      <TableHead>
        <TableRow>
          <TableCell>Name</TableCell>
          <TableCell>Email</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {data.map((row) => (
          <TableRow
            key={row.id}
            active={activeRowId === row.id}
            onClick={() => setActiveRowId(row.id)}
          >
            <TableCell>{row.name}</TableCell>
            <TableCell>{row.email}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}