Table — DevDojo Components

Examples

Basic

A styled, horizontally scrollable data table.

<div class="w-full">
    <x-components.table>
        <x-components.table.columns>
            <x-components.table.column>Name</x-components.table.column>
            <x-components.table.column>Role</x-components.table.column>
            <x-components.table.column>Status</x-components.table.column>
        </x-components.table.columns>
        <x-components.table.row>
            <x-components.table.cell class="font-medium text-foreground">Tony Lea</x-components.table.cell>
            <x-components.table.cell>Founder</x-components.table.cell>
            <x-components.table.cell><x-components.badge variant="success" size="sm">Active</x-components.badge></x-components.table.cell>
        </x-components.table.row>
        <x-components.table.row>
            <x-components.table.cell class="font-medium text-foreground">Ada Lovelace</x-components.table.cell>
            <x-components.table.cell>Engineer</x-components.table.cell>
            <x-components.table.cell><x-components.badge variant="secondary" size="sm">Invited</x-components.badge></x-components.table.cell>
        </x-components.table.row>
    </x-components.table>
</div>

Slots

Slot	Description
`slot`	Table content: <x-table.columns> header + <x-table.row> body.