@versini/ui-table

!npm package minimized gzipped size>)

> 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

``bash
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

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

function App() {
const data = [
{ id: 1, name: "John Doe", email: "john@example.com" },
{ id: 2, name: "Jane Smith", email: "jane@example.com" }
];

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

$3

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

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

function App() {
const [activeRowId, setActiveRowId] = useState(1);
const data = [
{ id: 1, name: "John Doe", email: "john@example.com" },
{ id: 2, name: "Jane Smith", email: "jane@example.com" }
];

return (





Name
Email



{data.map((row) => (
key={row.id}
active={activeRowId === row.id}
onClick={() => setActiveRowId(row.id)}
>
{row.name}
{row.email}

))}


);
}
``