Table

Display data in rows and columns with proper styling

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:

npx velyx add table
pnpm dlx velyx add table
yarn dlx velyx add table
bunx --bun velyx add table

Usage

Basic Table

Loading preview...

Failed to load preview

Code

With Caption

Loading preview...

Failed to load preview

Code

With Footer

Loading preview...

Failed to load preview

Code

Full Table with All Sections

Loading preview...

Failed to load preview

Code

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, or text-right utility classes for column alignment
  • The colspan attribute can be used on cells to span multiple columns
  • Row heights automatically adjust to content

Next Steps