Table
The Table component provides a styled container for displaying tabular data with support for headers, footers, captions, and responsive scrolling.
Installation
Add the table component to your project:
Usage
Basic Table
Table
Live preview rendered from the registry in an isolated iframe.
Loading preview...
Failed to load preview
Table
Full preview from the registry iframe.
Loading preview...
With Caption
Table
Live preview rendered from the registry in an isolated iframe.
Loading preview...
Failed to load preview
Table
Full preview from the registry iframe.
Loading preview...
With Footer
Table
Live preview rendered from the registry in an isolated iframe.
Loading preview...
Failed to load preview
Table
Full preview from the registry iframe.
Loading preview...
Full Table with All Sections
Table
Live preview rendered from the registry in an isolated iframe.
Loading preview...
Failed to load preview
Table
Full preview from the registry iframe.
Loading preview...
Components
The Table component consists of several sub-components:
| Component | Purpose |
|---|---|
<x-ui.table> |
Main table container with responsive scrolling |
<x-ui.table.header> |
Table header section (<thead>) |
<x-ui.table.body> |
Table body section (<tbody>) |
<x-ui.table.footer> |
Table footer section (<tfoot>) |
<x-ui.table.row> |
Table row (<tr>) |
<x-ui.table.head> |
Table header cell (<th>) |
<x-ui.table.cell> |
Table data cell (<td>) |
<x-ui.table.caption> |
Table caption (<caption>) |
Examples
Basic Table Structure
<x-ui.table>
<x-ui.table.header>
<x-ui.table.row>
<x-ui.table.head>Name</x-ui.table.head>
<x-ui.table.head>Email</x-ui.table.head>
<x-ui.table.head>Role</x-ui.table.head>
</x-ui.table.row>
</x-ui.table.header>
<x-ui.table.body>
<x-ui.table.row>
<x-ui.table.cell>John Doe</x-ui.table.cell>
<x-ui.table.cell>john@example.com</x-ui.table.cell>
<x-ui.table.cell>Admin</x-ui.table.cell>
</x-ui.table.row>
</x-ui.table.body>
</x-ui.table>
Table with Laravel Collection
<x-ui.table>
<x-ui.table.header>
<x-ui.table.row>
<x-ui.table.head>Name</x-ui.table.head>
<x-ui.table.head>Email</x-ui.table.head>
</x-ui.table.row>
</x-ui.table.header>
<x-ui.table.body>
@foreach($users as $user)
<x-ui.table.row>
<x-ui.table.cell>{{ $user->name }}</x-ui.table.cell>
<x-ui.table.cell>{{ $user->email }}</x-ui.table.cell>
</x-ui.table.row>
@endforeach
</x-ui.table.body>
</x-ui.table>
With Column Alignment
<x-ui.table>
<x-ui.table.header>
<x-ui.table.row>
<x-ui.table.head>Product</x-ui.table.head>
<x-ui.table.head class="text-center">Quantity</x-ui.table.head>
<x-ui.table.head class="text-right">Price</x-ui.table.head>
</x-ui.table.row>
</x-ui.table.header>
<x-ui.table.body>
<x-ui.table.row>
<x-ui.table.cell>Widget</x-ui.table.cell>
<x-ui.table.cell class="text-center">5</x-ui.table.cell>
<x-ui.table.cell class="text-right">$99.99</x-ui.table.cell>
</x-ui.table.row>
</x-ui.table.body>
</x-ui.table>
With Row Styling
<x-ui.table>
<x-ui.table.header>
<x-ui.table.row>
<x-ui.table.head>Task</x-ui.table.head>
<x-ui.table.head>Status</x-ui.table.head>
</x-ui.table.row>
</x-ui.table.header>
<x-ui.table.body>
<x-ui.table.row class="bg-muted/50">
<x-ui.table.cell>Important task</x-ui.table.cell>
<x-ui.table.cell>Urgent</x-ui.table.cell>
</x-ui.table.row>
<x-ui.table.row>
<x-ui.table.cell>Normal task</x-ui.table.cell>
<x-ui.table.cell>Active</x-ui.table.cell>
</x-ui.table.row>
</x-ui.table.body>
</x-ui.table>
With Conditional Styling
<x-ui.table>
<x-ui.table.header>
<x-ui.table.row>
<x-ui.table.head>Invoice</x-ui.table.head>
<x-ui.table.head>Status</x-ui.table.head>
</x-ui.table.row>
</x-ui.table.header>
<x-ui.table.body>
@foreach($invoices as $invoice)
<x-ui.table.row class="{{ $invoice->status === 'Overdue' ? 'bg-destructive/10' : '' }}">
<x-ui.table.cell>{{ $invoice->number }}</x-ui.table.cell>
<x-ui.table.cell>
<span class="inline-flex items-center rounded-full px-2 py-1 text-xs
{{ $invoice->status === 'Paid' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800' }}">
{{ $invoice->status }}
</span>
</x-ui.table.cell>
</x-ui.table.row>
@endforeach
</x-ui.table.body>
</x-ui.table>
Customization
Custom Column Width
<x-ui.table>
<x-ui.table.header>
<x-ui.table.row>
<x-ui.table.head class="w-[100px]">ID</x-ui.table.head>
<x-ui.table.head class="w-[200px]">Name</x-ui.table.head>
<x-ui.table.head>Description</x-ui.table.head>
</x-ui.table.row>
</x-ui.table.header>
<x-ui.table.body>
<!-- rows -->
</x-ui.table.body>
</x-ui.table>
Custom Caption Styling
<x-ui.table>
<x-ui.table.caption class="text-sm font-medium text-muted-foreground">
Showing 1 to 10 of 50 results
</x-ui.table.caption>
<!-- rest of table -->
</x-ui.table>
Accessibility
Table components include semantic HTML and ARIA attributes:
- Proper table structure with
<thead>,<tbody>,<tfoot> - Caption for screen readers describing table content
- Header cells (
<th>) properly associated with data cells - Scope attributes automatically added to header cells
- Responsive scrolling for mobile devices
Notes
- The table component automatically wraps content in a scrollable container on mobile
- Use
text-left,text-center, ortext-rightutility classes for column alignment - The
colspanattribute can be used on cells to span multiple columns - Row heights automatically adjust to content
Next Steps
- Explore Card component
- Learn about Badge component
- View Breadcrumbs component