║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Table description: Display your data in a structured tabular format. lastUpdated: 09 Sep, 2025 links: source: https://github.com/Logging-Stuff/RetroUI/blob/main/components/retroui/Table.tsx

<ComponentShowcase name="table-style-default" /> <br /> <br /> <ComponentInstall> <ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/table" /> <ComponentInstall.Manual> #### 1. Install dependencies:

npm install class-variance-authority

<br />

2. Copy the code 👇 into your project:

<ComponentSource name="table" />

</ComponentInstall.Manual> </ComponentInstall>

<br /> <br />

Examples

Default

<ComponentShowcase name="table-style-default" /> <br /> <br />

With Checkbox Selection

<ComponentShowcase name="table-with-checkbox" /> <br /> <br />

With Sticky Header

<ComponentShowcase name="table-with-sticky-header" /> <br /> <br />

API Reference

The Table component is composed of several sub-components: <br />

• Table - The main table wrapper
• Table.Header - Table header section (<thead>)
• Table.Body - Table body section (<tbody>)
• Table.Footer - Table footer section (<tfoot>)
• Table.Row - Table row (<tr>)
• Table.Head - Table header cell (<th>)
• Table.Cell - Table data cell (<td>)

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║