Table - Laravel Blade

Use the table component to show data in a structured tabular format with support for striped rows, hover states, and more.

Default Table

Product name Color Category Price
Apple MacBook Pro 17" Silver Laptop $2999
Microsoft Surface Pro White Laptop PC $1999
Magic Mouse 2 Black Accessories $99
Apple Watch Silver Accessories $179
iPad Gold Tablet $799

Blade code

<x-fwb.table>
    <x-slot:head>
        <x-fwb.table.head>
            <x-fwb.table.cell :header="true">Product name</x-fwb.table.cell>
            <x-fwb.table.cell :header="true">Color</x-fwb.table.cell>
            <x-fwb.table.cell :header="true">Category</x-fwb.table.cell>
            <x-fwb.table.cell :header="true">Price</x-fwb.table.cell>
        </x-fwb.table.head>
    </x-slot:head>
    <x-fwb.table.row>
        <x-fwb.table.cell :row-header="true">Apple MacBook Pro 17"</x-fwb.table.cell>
        <x-fwb.table.cell>Silver</x-fwb.table.cell>
        <x-fwb.table.cell>Laptop</x-fwb.table.cell>
        <x-fwb.table.cell>$2999</x-fwb.table.cell>
    </x-fwb.table.row>
    <x-fwb.table.row>
        <x-fwb.table.cell :row-header="true">Microsoft Surface Pro</x-fwb.table.cell>
        <x-fwb.table.cell>White</x-fwb.table.cell>
        <x-fwb.table.cell>Laptop PC</x-fwb.table.cell>
        <x-fwb.table.cell>$1999</x-fwb.table.cell>
    </x-fwb.table.row>
    <x-fwb.table.row>
        <x-fwb.table.cell :row-header="true">Magic Mouse 2</x-fwb.table.cell>
        <x-fwb.table.cell>Black</x-fwb.table.cell>
        <x-fwb.table.cell>Accessories</x-fwb.table.cell>
        <x-fwb.table.cell>$99</x-fwb.table.cell>
    </x-fwb.table.row>
    <x-fwb.table.row>
        <x-fwb.table.cell :row-header="true">Apple Watch</x-fwb.table.cell>
        <x-fwb.table.cell>Silver</x-fwb.table.cell>
        <x-fwb.table.cell>Accessories</x-fwb.table.cell>
        <x-fwb.table.cell>$179</x-fwb.table.cell>
    </x-fwb.table.row>
    <x-fwb.table.row>
        <x-fwb.table.cell :row-header="true">iPad</x-fwb.table.cell>
        <x-fwb.table.cell>Gold</x-fwb.table.cell>
        <x-fwb.table.cell>Tablet</x-fwb.table.cell>
        <x-fwb.table.cell>$799</x-fwb.table.cell>
    </x-fwb.table.row>
</x-fwb.table>

Striped Rows

Product name Color Category Price
Apple MacBook Pro 17" Silver Laptop $2999
Microsoft Surface Pro White Laptop PC $1999
Magic Mouse 2 Black Accessories $99
Apple Watch Silver Accessories $179

Blade code

<x-fwb.table :striped="true">
    <x-slot:head>
        <x-fwb.table.head>
            <x-fwb.table.cell :header="true">Product name</x-fwb.table.cell>
            <x-fwb.table.cell :header="true">Color</x-fwb.table.cell>
            <x-fwb.table.cell :header="true">Category</x-fwb.table.cell>
            <x-fwb.table.cell :header="true">Price</x-fwb.table.cell>
        </x-fwb.table.head>
    </x-slot:head>
    <x-fwb.table.row>
        <x-fwb.table.cell :row-header="true">Apple MacBook Pro 17"</x-fwb.table.cell>
        <x-fwb.table.cell>Silver</x-fwb.table.cell>
        <x-fwb.table.cell>Laptop</x-fwb.table.cell>
        <x-fwb.table.cell>$2999</x-fwb.table.cell>
    </x-fwb.table.row>
    <x-fwb.table.row>
        <x-fwb.table.cell :row-header="true">Microsoft Surface Pro</x-fwb.table.cell>
        <x-fwb.table.cell>White</x-fwb.table.cell>
        <x-fwb.table.cell>Laptop PC</x-fwb.table.cell>
        <x-fwb.table.cell>$1999</x-fwb.table.cell>
    </x-fwb.table.row>
    <x-fwb.table.row>
        <x-fwb.table.cell :row-header="true">Magic Mouse 2</x-fwb.table.cell>
        <x-fwb.table.cell>Black</x-fwb.table.cell>
        <x-fwb.table.cell>Accessories</x-fwb.table.cell>
        <x-fwb.table.cell>$99</x-fwb.table.cell>
    </x-fwb.table.row>
    <x-fwb.table.row>
        <x-fwb.table.cell :row-header="true">Apple Watch</x-fwb.table.cell>
        <x-fwb.table.cell>Silver</x-fwb.table.cell>
        <x-fwb.table.cell>Accessories</x-fwb.table.cell>
        <x-fwb.table.cell>$179</x-fwb.table.cell>
    </x-fwb.table.row>
</x-fwb.table>

Hover State

Product name Color Category Price
Apple MacBook Pro 17" Silver Laptop $2999
Microsoft Surface Pro White Laptop PC $1999
Magic Mouse 2 Black Accessories $99

Blade code

<x-fwb.table :hoverable="true">
    <x-slot:head>
        <x-fwb.table.head>
            <x-fwb.table.cell :header="true">Product name</x-fwb.table.cell>
            <x-fwb.table.cell :header="true">Color</x-fwb.table.cell>
            <x-fwb.table.cell :header="true">Category</x-fwb.table.cell>
            <x-fwb.table.cell :header="true">Price</x-fwb.table.cell>
        </x-fwb.table.head>
    </x-slot:head>
    <x-fwb.table.row>
        <x-fwb.table.cell :row-header="true">Apple MacBook Pro 17"</x-fwb.table.cell>
        <x-fwb.table.cell>Silver</x-fwb.table.cell>
        <x-fwb.table.cell>Laptop</x-fwb.table.cell>
        <x-fwb.table.cell>$2999</x-fwb.table.cell>
    </x-fwb.table.row>
    <x-fwb.table.row>
        <x-fwb.table.cell :row-header="true">Microsoft Surface Pro</x-fwb.table.cell>
        <x-fwb.table.cell>White</x-fwb.table.cell>
        <x-fwb.table.cell>Laptop PC</x-fwb.table.cell>
        <x-fwb.table.cell>$1999</x-fwb.table.cell>
    </x-fwb.table.row>
    <x-fwb.table.row>
        <x-fwb.table.cell :row-header="true">Magic Mouse 2</x-fwb.table.cell>
        <x-fwb.table.cell>Black</x-fwb.table.cell>
        <x-fwb.table.cell>Accessories</x-fwb.table.cell>
        <x-fwb.table.cell>$99</x-fwb.table.cell>
    </x-fwb.table.row>
</x-fwb.table>

Table with Shadow

Product name Color Category Price
Apple MacBook Pro 17" Silver Laptop $2999
Microsoft Surface Pro White Laptop PC $1999

Blade code

<x-fwb.table :shadow="true">
    <x-slot:head>
        <x-fwb.table.head>
            <x-fwb.table.cell :header="true">Product name</x-fwb.table.cell>
            <x-fwb.table.cell :header="true">Color</x-fwb.table.cell>
            <x-fwb.table.cell :header="true">Category</x-fwb.table.cell>
            <x-fwb.table.cell :header="true">Price</x-fwb.table.cell>
        </x-fwb.table.head>
    </x-slot:head>
    <x-fwb.table.row>
        <x-fwb.table.cell :row-header="true">Apple MacBook Pro 17"</x-fwb.table.cell>
        <x-fwb.table.cell>Silver</x-fwb.table.cell>
        <x-fwb.table.cell>Laptop</x-fwb.table.cell>
        <x-fwb.table.cell>$2999</x-fwb.table.cell>
    </x-fwb.table.row>
    <x-fwb.table.row>
        <x-fwb.table.cell :row-header="true">Microsoft Surface Pro</x-fwb.table.cell>
        <x-fwb.table.cell>White</x-fwb.table.cell>
        <x-fwb.table.cell>Laptop PC</x-fwb.table.cell>
        <x-fwb.table.cell>$1999</x-fwb.table.cell>
    </x-fwb.table.row>
</x-fwb.table>

Table Foot

Product name Qty Price
Apple MacBook Pro 17" 1 $2999
Magic Mouse 2 2 $198
Total 3 $3197

Blade code

<x-fwb.table>
    <x-slot:head>
        <x-fwb.table.head>
            <x-fwb.table.cell :header="true">Product name</x-fwb.table.cell>
            <x-fwb.table.cell :header="true">Qty</x-fwb.table.cell>
            <x-fwb.table.cell :header="true">Price</x-fwb.table.cell>
        </x-fwb.table.head>
    </x-slot:head>
    <x-fwb.table.row>
        <x-fwb.table.cell :row-header="true">Apple MacBook Pro 17"</x-fwb.table.cell>
        <x-fwb.table.cell>1</x-fwb.table.cell>
        <x-fwb.table.cell>$2999</x-fwb.table.cell>
    </x-fwb.table.row>
    <x-fwb.table.row>
        <x-fwb.table.cell :row-header="true">Magic Mouse 2</x-fwb.table.cell>
        <x-fwb.table.cell>2</x-fwb.table.cell>
        <x-fwb.table.cell>$198</x-fwb.table.cell>
    </x-fwb.table.row>
    <x-slot:foot>
        <x-fwb.table.row>
            <x-fwb.table.cell class="font-semibold text-heading">Total</x-fwb.table.cell>
            <x-fwb.table.cell class="font-semibold text-heading">3</x-fwb.table.cell>
            <x-fwb.table.cell class="font-semibold text-heading">$3197</x-fwb.table.cell>
        </x-fwb.table.row>
    </x-slot:foot>
</x-fwb.table>

Table Caption

Our products

Browse a list of Flowbite products designed to help you work and play, stay organized, get answers, keep in touch, grow your business, and more.
Product name Color Category Price
Apple MacBook Pro 17" Silver Laptop $2999
Microsoft Surface Pro White Laptop PC $1999
Magic Mouse 2 Black Accessories $99

Blade code

<x-fwb.table>
    <x-slot:caption>
        Our products
        <p class="mt-1.5 text-sm font-normal text-body">Browse a list of Flowbite products designed to help you work and play, stay organized, get answers, keep in touch, grow your business, and more.</p>
    </x-slot:caption>
    <x-slot:head>
        <x-fwb.table.head>
            <x-fwb.table.cell :header="true">Product name</x-fwb.table.cell>
            <x-fwb.table.cell :header="true">Color</x-fwb.table.cell>
            <x-fwb.table.cell :header="true">Category</x-fwb.table.cell>
            <x-fwb.table.cell :header="true">Price</x-fwb.table.cell>
        </x-fwb.table.head>
    </x-slot:head>
    <x-fwb.table.row>
        <x-fwb.table.cell :row-header="true">Apple MacBook Pro 17"</x-fwb.table.cell>
        <x-fwb.table.cell>Silver</x-fwb.table.cell>
        <x-fwb.table.cell>Laptop</x-fwb.table.cell>
        <x-fwb.table.cell>$2999</x-fwb.table.cell>
    </x-fwb.table.row>
    <x-fwb.table.row>
        <x-fwb.table.cell :row-header="true">Microsoft Surface Pro</x-fwb.table.cell>
        <x-fwb.table.cell>White</x-fwb.table.cell>
        <x-fwb.table.cell>Laptop PC</x-fwb.table.cell>
        <x-fwb.table.cell>$1999</x-fwb.table.cell>
    </x-fwb.table.row>
    <x-fwb.table.row>
        <x-fwb.table.cell :row-header="true">Magic Mouse 2</x-fwb.table.cell>
        <x-fwb.table.cell>Black</x-fwb.table.cell>
        <x-fwb.table.cell>Accessories</x-fwb.table.cell>
        <x-fwb.table.cell>$99</x-fwb.table.cell>
    </x-fwb.table.row>
</x-fwb.table>

Striped Rows with Hover and Actions

Product name Color Category Price Edit
Apple MacBook Pro 17" Silver Laptop $2999 Edit
Microsoft Surface Pro White Laptop PC $1999 Edit
Magic Mouse 2 Black Accessories $99 Edit
Apple Watch Silver Accessories $179 Edit

Blade code

<x-fwb.table :striped="true" :hoverable="true">
    <x-slot:head>
        <x-fwb.table.head>
            <x-fwb.table.cell :header="true">Product name</x-fwb.table.cell>
            <x-fwb.table.cell :header="true">Color</x-fwb.table.cell>
            <x-fwb.table.cell :header="true">Category</x-fwb.table.cell>
            <x-fwb.table.cell :header="true">Price</x-fwb.table.cell>
            <x-fwb.table.cell :header="true"><span class="sr-only">Edit</span></x-fwb.table.cell>
        </x-fwb.table.head>
    </x-slot:head>
    <x-fwb.table.row>
        <x-fwb.table.cell :row-header="true">Apple MacBook Pro 17"</x-fwb.table.cell>
        <x-fwb.table.cell>Silver</x-fwb.table.cell>
        <x-fwb.table.cell>Laptop</x-fwb.table.cell>
        <x-fwb.table.cell>$2999</x-fwb.table.cell>
        <x-fwb.table.cell><a href="#" class="font-medium text-brand hover:underline">Edit</a></x-fwb.table.cell>
    </x-fwb.table.row>
    <x-fwb.table.row>
        <x-fwb.table.cell :row-header="true">Microsoft Surface Pro</x-fwb.table.cell>
        <x-fwb.table.cell>White</x-fwb.table.cell>
        <x-fwb.table.cell>Laptop PC</x-fwb.table.cell>
        <x-fwb.table.cell>$1999</x-fwb.table.cell>
        <x-fwb.table.cell><a href="#" class="font-medium text-brand hover:underline">Edit</a></x-fwb.table.cell>
    </x-fwb.table.row>
    <x-fwb.table.row>
        <x-fwb.table.cell :row-header="true">Magic Mouse 2</x-fwb.table.cell>
        <x-fwb.table.cell>Black</x-fwb.table.cell>
        <x-fwb.table.cell>Accessories</x-fwb.table.cell>
        <x-fwb.table.cell>$99</x-fwb.table.cell>
        <x-fwb.table.cell><a href="#" class="font-medium text-brand hover:underline">Edit</a></x-fwb.table.cell>
    </x-fwb.table.row>
    <x-fwb.table.row>
        <x-fwb.table.cell :row-header="true">Apple Watch</x-fwb.table.cell>
        <x-fwb.table.cell>Silver</x-fwb.table.cell>
        <x-fwb.table.cell>Accessories</x-fwb.table.cell>
        <x-fwb.table.cell>$179</x-fwb.table.cell>
        <x-fwb.table.cell><a href="#" class="font-medium text-brand hover:underline">Edit</a></x-fwb.table.cell>
    </x-fwb.table.row>
</x-fwb.table>

Component Properties

Table x-fwb.table

Prop Type Default Description
striped bool false Enable striped rows with alternating background colors. Automatically applied to all child rows.
hoverable bool false Enable hover highlighting on all child rows.
shadow bool false Add a subtle shadow to the table wrapper.
noborder bool false Remove the border from the table wrapper.
head slot - Named slot for the table header row(s).
foot slot - Named slot for the table footer row(s).
caption slot - Named slot for the table caption.

Table Head x-fwb.table.head

Prop Type Default Description
slot slot - Default slot for header cells.

Table Row x-fwb.table.row

Prop Type Default Description
slot slot - Default slot for table cells. Striped and hoverable styles are inherited from the parent x-fwb.table component.

Table Cell x-fwb.table.cell

Prop Type Default Description
header bool false Render as a column header <th scope="col">. Used inside x-fwb.table.head.
row-header bool false Render as a row header <th scope="row"> with bold text. Used for the first cell in a body row.