Turbine UI - Laravel and Tailwind CSS Table Component

Alert Avatar Badge Burger Button Button Group Card Code Container Dropdown F A Q Grid Heading Input Input Group Label Link List Group Media Menu Modal Nav Link Navbar Progress Section Select Sidebar Stat Table Text Textarea Theme Switcher Toast Toggle

Table

Present structured data in clean, responsive table layouts.

x-t-table

Preview and Examples

Tables

Tables...

Tag: x-t-table

Slots: thead tbody tfoot

Player	Club	Goals
1 Erling Haaland	Manchester City	36
2 Harry Kane	Tottenham Hotspur	30
3 Ivan Toney	Brentford	20
	1 2 3 4 5

Player	Club	Goals
1 Erling Haaland	Manchester City	36
2 Harry Kane	Tottenham Hotspur	30
3 Ivan Toney	Brentford	20
	1 2 3 4 5

Player	Club	Goals
1 Erling Haaland	Manchester City	36
2 Harry Kane	Tottenham Hotspur	30
3 Ivan Toney	Brentford	20
	1 2 3 4 5

Player	Club	Goals
1 Erling Haaland	Manchester City	36
2 Harry Kane	Tottenham Hotspur	30
3 Ivan Toney	Brentford	20
	1 2 3 4 5

Player	Club	Goals
1 Erling Haaland	Manchester City	36
2 Harry Kane	Tottenham Hotspur	30
3 Ivan Toney	Brentford	20
	1 2 3 4 5

Player	Club	Goals
1 Erling Haaland	Manchester City	36
2 Harry Kane	Tottenham Hotspur	30
3 Ivan Toney	Brentford	20
	1 2 3 4 5

Player	Club	Goals
1 Erling Haaland	Manchester City	36
2 Harry Kane	Tottenham Hotspur	30
3 Ivan Toney	Brentford	20
	1 2 3 4 5

Player	Club	Goals
1 Erling Haaland	Manchester City	36
2 Harry Kane	Tottenham Hotspur	30
3 Ivan Toney	Brentford	20
	1 2 3 4 5

<x-t-table
    variant="light"
    divide
    striped
>
    <x-slot:thead>
        <tr>
            <th>
                Player
            </th>
            <th>
                Club
            </th>
            <th>
                Goals
            </th>
        </tr>
    </x-slot:thead>
    <x-slot:tbody>
        <tr>
            <th class="whitespace-nowrap">
                <x-t-badge size="sm" class="mr-2 font-mono">1</x-t-badge> Erling Haaland
            </th>
            <td>
                Manchester City
            </td>
            <td class="font-mono">
                36
            </td>
        </tr>
        <tr>
            <th class="whitespace-nowrap">
                <x-t-badge size="sm" class="mr-2 font-mono">2</x-t-badge> Harry Kane
            </th>
            <td>
                Tottenham Hotspur
            </td>
            <td class="font-mono">
                30
            </td>
        </tr>
        <tr>
            <th class="whitespace-nowrap">
                <x-t-badge size="sm" class="mr-2 font-mono">3</x-t-badge> Ivan Toney
            </th>
            <td>
                Brentford
            </td>
            <td class="font-mono">
                20
            </td>
        </tr>
    </x-slot:tbody>
    <x-slot:tfoot>
        <tr>
            <td>
                <x-t-button variant="light" size="sm"><</x-t-button>
            </td>
            <td class="text-slate-400">
                <span class="text-slate-600 dark:text-slate-100">1</span> 2 3 4 5
            </td>
            <td>
                <x-t-button variant="light" size="sm">></x-t-button>
            </td>
        </tr>
    </x-slot:tfoot>
</x-t-table>

API Options

Name	Type	Options	Description
accent	boolean	true false	Adds an accent to the table. Extensible via the theme.
border	boolean	true false	Adds a border to the table. Extensible via the theme.
divide	boolean	true false	Adds a divide between thead\|tbody\|tfoot. Extensible via the theme.
hollow	boolean	true false	Removes background from the table.
ring	boolean	true false	Adds a ring around the table. Extensible via the theme.
rounded	boolean	true false	Adds a rounded corner to the table. Extensible via the theme.
shadow	boolean	true false	Adds a shadow to the table. Extensible via the theme.
striped	boolean	true false	Adds a striped effect to the table. Extensible via the theme.
variant	string	primary secondary success warning danger	A variant is like a colour pallette. Extensible via the theme.

Attributes

Name	Type	Options	Description
accent	boolean	true false	Adds an accent
border	boolean	true false	Adds a border
divide	boolean	true false	Adds a divide between elements
hollow	boolean	true false	Removes background colour
ring	boolean	true false	Adds a ring
rounded	boolean	true false	Adds rounded corners
shadow	boolean	true false	Adds a shadow
size	string	xs sm md lg xl 2xl	Controls component scale
striped	boolean	true false	Alternates row backgrounds
variant	string	default brand primary secondary success warning danger light dark	A variant is like a colour palette