Table

Copy Markdown

A responsive table component.

PreviewCode

A list of users in your workspace.| Name | Email | Role | Status | | --- | --- | --- | --- | | Alice Johnson | [email protected] | Admin | active | | Bruno Silva | [email protected] | Editor | invited | | Clara Mendes | [email protected] | Viewer | inactive | | David Park | [email protected] | Editor | active |

Installation#

CLIManual

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/table

Anatomy#

Table
├── TableCaption
├── TableHeader
│ └── TableRow
│ └── TableHead
├── TableBody
│ └── TableRow
│ └── TableCell
└── TableFooter
    └── TableRow
        └── TableCell

Usage#

import { 
  Table, 
  TableBody, 
  TableCaption, 
  TableCell, 
  TableHead, 
  TableHeader, 
  TableRow,
  TableFooter,
} from "@/components/ui/table";

<Table>
  <TableCaption />
  <TableHeader>
    <TableRow>
      <TableHead />
      <TableHead />
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell />
      <TableCell />
    </TableRow>
  </TableBody>
  <TableFooter />
</Table>

Accessibility#

Always use a TableCaption to help assistive technologies announce what the table represents.

Use with the sr-only class to make the caption screen-reader only if you don't want to show it.

<Table>
  <TableCaption className="sr-only">
    Monthly revenue by product.
  </TableCaption>
</Table>

Examples#

Striped#

Use variant="striped" on Table for alternating row backgrounds.

PreviewCode

Users with alternating row backgrounds.| Name | Email | Role | Status | | --- | --- | --- | --- | | Alice Johnson | [email protected] | Admin | Active | | Bruno Silva | [email protected] | Editor | Invited | | Clara Mendes | [email protected] | Viewer | Inactive | | David Park | [email protected] | Editor | Active |

Use TableFooter for summary rows, totals, or notes.

PreviewCode

Order summary with footer totals.| Item | Qty | Unit price | Amount | | --- | --- | --- | --- | | Wireless mouse | 2 | $29.99 | $59.98 | | Mechanical keyboard | 1 | $149.99 | $149.99 | | USB-C hub | 3 | $45.00 | $135.00 | | Total | $379.47 |

With actions#

Add an actions column with buttons per row.

PreviewCode

Users with row actions (edit, delete).| Name | Email | Actions | | --- | --- | --- | | Alice Johnson | [email protected] | | | Bruno Silva | [email protected] | | | Clara Mendes | [email protected] | |

With action bar#

Use checkboxes for row selection and an action bar that appears when one or more rows are selected. See the action bar component.

PreviewCode

Orders with checkbox selection and action bar.|

| ID | Name | Status | Amount | | --- | --- | --- | --- | --- | |

| SO-01 | Macbook Pro 16 | progress | 245,12 $ | |

| SO-02 | Apple Watch Series 9 | transit | 122,18 $ | |

| SO-03 | AirPods Max | pending | 89,50 $ | |

| SO-04 | iPad Pro 13 | pending | 310,00 $ | |

| SO-05 | iPhone 15 Pro Max | transit | 156,75 $ |

Wrap each row with ContextMenuTrigger so right-clicking shows a context menu with row actions.

PreviewCode

Users with row context menu. Right-click a row to open the menu.| Name | Email | | --- | --- | | Alice Johnson | [email protected] | | Bruno Silva | [email protected] | | Clara Mendes | [email protected] |

Disable row hover#

Set isHoverable={false} on Table to disable the hover background on body rows.

PreviewCode

Table with row hover disabled (isHoverable=false).| Name | Email | | --- | --- | | Alice Johnson | [email protected] | | Bruno Silva | [email protected] | | Clara Mendes | [email protected] |