@neynar/ui/docs/llm/components/tables.md

React UI component library built on shadcn/ui and Tailwind CSS

# Tables

Flexible table components for displaying structured data with proper accessibility.

## Components

- `Table` - Root container with proper table styling
- `TableHeader` - Groups header content
- `TableBody` - Contains table rows
- `TableRow` - Individual table row
- `TableHead` - Header cell with proper semantics
- `TableCell` - Data cell with consistent styling
- `TableCaption` - Accessible table description

## Basic Table

```tsx
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@neynar/ui"

export function UsersTable() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Email</TableHead>
          <TableHead>Role</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>John Doe</TableCell>
          <TableCell>john@example.com</TableCell>
          <TableCell>Admin</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  )
}
```

## Table with Actions

```tsx
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Button } from "@neynar/ui"

export function CastsTable({ casts }) {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Author</TableHead>
          <TableHead>Content</TableHead>
          <TableHead>Likes</TableHead>
          <TableHead className="text-right">Actions</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {casts.map((cast) => (
          <TableRow key={cast.hash}>
            <TableCell>{cast.author.display_name}</TableCell>
            <TableCell className="max-w-md truncate">{cast.text}</TableCell>
            <TableCell>{cast.reactions.likes.length}</TableCell>
            <TableCell className="text-right">
              <Button variant="ghost" size="sm">View</Button>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}
```