[](https://www.npmjs.com/package/@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.
- Features
- Installation
- Usage
``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.
`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 (
$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}
))}
);
}
``