@neynar/ui/llm-docs/table.llm.md

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

# Table

**Type**: component

Table - A responsive data table component for displaying structured information Built on semantic HTML table elements with responsive scrolling and proper accessibility. Follows shadcn/ui patterns for data presentation and can be enhanced with TanStack Table for sorting, filtering, and pagination. Perfect for dashboards, data management, and structured content display.

## JSX Usage

```jsx
import { Table } from '@neynar/ui';

<Table
  className="value"
  summary="value"
  "aria-label"="value"
  "aria-describedby"="value"
  role="value"
>
  {/* Your content here */}
</Table>
```

## Component Props

### className
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### children
- **Type**: `React.ReactNode`
- **Required**: No
- **Description**: No description available

### summary
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### "aria-label"
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### "aria-describedby"
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### role
- **Type**: `string`
- **Required**: No
- **Description**: No description available

## Examples

### Example 1
```tsx
// Basic table with Farcaster user data
<Table>
  <TableCaption>Recent casts from your network</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>User</TableHead>
      <TableHead>Channel</TableHead>
      <TableHead>Content</TableHead>
      <TableHead className="text-right">Reactions</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell className="font-medium">
### Example 2
```tsx
// Table with selection and actions
<Table>
  <TableHeader>
    <TableRow>
      <TableHead className="w-[50px]">
        <Checkbox />
      </TableHead>
      <TableHead>User</TableHead>
      <TableHead>FID</TableHead>
      <TableHead className="text-right">Actions</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow data-state="selected">
      <TableCell><Checkbox checked /></TableCell>
      <TableCell>
### Example 3
```tsx
// Table with footer totals
<Table>
  <TableBody>
    <TableRow>
      <TableCell>/farcaster</TableCell>
      <TableCell className="text-right">5,234</TableCell>
    </TableRow>
  </TableBody>
  <TableFooter>
    <TableRow>
      <TableCell>Total</TableCell>
      <TableCell className="text-right">15,767</TableCell>
    </TableRow>
  </TableFooter>
</Table>
```
### Example 4
```tsx
// Table with custom attributes for data integration
<Table role="table" aria-label="User analytics dashboard">
  <TableCaption>Showing 1-10 of 50 users</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead scope="col">User</TableHead>
      <TableHead scope="col">FID</TableHead>
      <TableHead scope="col" className="text-right">Casts</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow data-user-id="3">
      <TableCell>