Github
  1. Blade Components
  5. Table

Table

Display structured data in a responsive table component.

A list of your recent invoices.
Invoice Status Method Amount
INV001 Paid Credit card €10.00
INV002 Paid Bank Transfer €15.00
INV003 Paid PayPal €5.00
INV004 Refunded Credit card €20.00
INV005 Pending Credit card €50.00

Usage

<x-table>
    <x-table-caption>...</x-table-caption>
    <x-table-header>
        <x-table-row>
            <x-table-head>...</x-table-head>
        </x-table-row>
    </x-table-header>
    <x-table-body>
        <x-table-row>
            <x-table-cell>...</x-table-cell>
        </x-table-row>
    </x-table-body>
</x-table>

Row highlighting

Control row highlighting by setting the highlight attribute on x-table-body to even or odd.

INV001 Paid Credit card €10.00
INV002 Paid Bank Transfer €15.00
INV003 Paid PayPal €5.00 
@php
$rows = [
    ['Paid', 'Credit card', 10.00],
    ['Paid', 'Bank Transfer', 15.00],
    ['Paid', 'PayPal', 5.00],
];
@endphp

<x-table>
    <x-table-body highlight="even">
        @foreach($rows as $i => $row)
            <x-table-row>
                <x-table-head>
                    INV{{ str_pad(($i + 1), 3, 0, STR_PAD_LEFT) }}
                </x-table-head>
                <x-table-cell>
                    {{ $row[0] }}
                </x-table-cell>
                <x-table-cell>
                    {{ $row[1] }}
                </x-table-cell>
                <x-table-cell align="end">
                    <x-currency :value="$row[2]" />
                </x-table-cell>
            </x-table-row>
        @endforeach
    </x-table-body>
</x-table>

Highlighting on hover

Alternatively, rows can be highlighted on hover by adding the hover attribute to x-table.

INV001 Paid Credit card €10.00
INV002 Paid Bank Transfer €15.00
INV003 Paid PayPal €5.00 
@php
$rows = [
    ['Paid', 'Credit card', 10.00],
    ['Paid', 'Bank Transfer', 15.00],
    ['Paid', 'PayPal', 5.00],
];
@endphp

<x-table hover>
    <x-table-body>
        @foreach($rows as $i => $row)
            <x-table-row>
                <x-table-head>
                    INV{{ str_pad(($i + 1), 3, 0, STR_PAD_LEFT) }}
                </x-table-head>
                <x-table-cell>
                    {{ $row[0] }}
                </x-table-cell>
                <x-table-cell>
                    {{ $row[1] }}
                </x-table-cell>
                <x-table-cell align="end">
                    <x-currency :value="$row[2]" />
                </x-table-cell>
            </x-table-row>
        @endforeach
    </x-table-body>
</x-table>

Sticky header

Keep the x-table-header visible during vertical scrolling by adding the sticky attribute.

Invoice Status Method Amount
INV001 Paid Credit card €10.00
INV002 Paid Bank Transfer €15.00
INV003 Paid PayPal €5.00
INV004 Paid Credit card €10.00
INV005 Paid Bank Transfer €15.00
INV006 Paid PayPal €5.00
INV007 Paid Credit card €10.00
INV008 Paid Bank Transfer €15.00
INV009 Paid PayPal €5.00
INV010 Paid Credit card €10.00
INV011 Paid Bank Transfer €15.00
INV012 Paid PayPal €5.00
INV013 Paid Credit card €10.00
INV014 Paid Bank Transfer €15.00
INV015 Paid PayPal €5.00
INV016 Paid Credit card €10.00
INV017 Paid Bank Transfer €15.00
INV018 Paid PayPal €5.00
INV019 Paid Credit card €10.00
INV020 Paid Bank Transfer €15.00
INV021 Paid PayPal €5.00
INV022 Paid Credit card €10.00
INV023 Paid Bank Transfer €15.00
INV024 Paid PayPal €5.00
INV025 Paid Credit card €10.00
INV026 Paid Bank Transfer €15.00
INV027 Paid PayPal €5.00
INV028 Paid Credit card €10.00
INV029 Paid Bank Transfer €15.00
INV030 Paid PayPal €5.00 
@php
$rows = [
    ['Paid', 'Credit card', 10.00],
    ['Paid', 'Bank Transfer', 15.00],
    ['Paid', 'PayPal', 5.00],
];
@endphp

<x-table container:class="max-h-80">
    <x-table-header sticky>
        <x-table-row>
            <x-table-head>
                Invoice
            </x-table-head>
            <x-table-head>
                Status
            </x-table-head>
            <x-table-head>
                Method
            </x-table-head>
            <x-table-head align="end">
                Amount
            </x-table-head>
        </x-table-row>
    </x-table-header>

    <x-table-body highlight="even">
        @for($i=0; $i<10; $i++)
            @foreach($rows as $j => $row)
                <x-table-row>
                    <x-table-head>
                        INV{{ str_pad(($i * 3 + $j + 1), 3, 0, STR_PAD_LEFT) }}
                    </x-table-head>
                    <x-table-cell>
                        {{ $row[0] }}
                    </x-table-cell>
                    <x-table-cell>
                        {{ $row[1] }}
                    </x-table-cell>
                    <x-table-cell align="end">
                        <x-currency :value="$row[2]" />
                    </x-table-cell>
                </x-table-row>
            @endforeach
        @endfor
    </x-table-body>
</x-table>

Sticky rows

Keep certain rows visible during vertical scrolling by adding the sticky attribute to x-table-row.

A
Amara
Alden
Astrid
Aurelio
Anouk
B
Bastian
Brielle
Bodhi
Beatrix
Bram
E
Elowen
Evander
Esme
Emrys
Elodie
D
Dashiell
Delia
Dorian
Dex
Delara 
@php
$names = [
    'A' => ['Amara', 'Alden', 'Astrid', 'Aurelio', 'Anouk'],
    'B' => ['Bastian', 'Brielle', 'Bodhi', 'Beatrix', 'Bram'],
    'E' => ['Elowen', 'Evander', 'Esme', 'Emrys', 'Elodie'],
    'D' => ['Dashiell', 'Delia', 'Dorian', 'Dex', 'Delara'],
];
@endphp

<x-table container:class="max-h-80">
    <x-table-body>
        @foreach($names as $letter => $rows)
            <x-table-row sticky>
                <x-table-head>
                    {{ $letter }}
                </x-table-head>
            </x-table-row>
            @foreach($rows as $row)
                <x-table-row>
                    <x-table-cell>
                        {{ $row }}
                    </x-table-cell>
                </x-table-row>
            @endforeach
        @endforeach
    </x-table-body>
</x-table>

Sticky cells

Keep important information visible during horizontal scrolling by adding the sticky attribute to x-table-head or x-table-cell.

Invoice Status Method Amount Payment reference
INV001 Paid Credit card €10.00 27ed00e0-a383-4483-b864-67e65cbb033d
INV002 Paid Bank Transfer €15.00 b33256e6-a35d-4670-8b78-908f0035a827
INV003 Paid PayPal €5.00 df3caae2-f945-4317-9db4-68fc605345b4
INV004 Refunded Credit card €20.00 36f19e85-6841-456c-9ddb-1ecdaa47dafd
INV005 Pending Credit card €50.00 22f60166-819e-4216-9d34-08e5cf3906f9
INV004 Paid Credit card €10.00 27ed00e0-a383-4483-b864-67e65cbb033d
INV005 Paid Bank Transfer €15.00 b33256e6-a35d-4670-8b78-908f0035a827
INV006 Paid PayPal €5.00 df3caae2-f945-4317-9db4-68fc605345b4
INV007 Refunded Credit card €20.00 36f19e85-6841-456c-9ddb-1ecdaa47dafd
INV008 Pending Credit card €50.00 22f60166-819e-4216-9d34-08e5cf3906f9
INV007 Paid Credit card €10.00 27ed00e0-a383-4483-b864-67e65cbb033d
INV008 Paid Bank Transfer €15.00 b33256e6-a35d-4670-8b78-908f0035a827
INV009 Paid PayPal €5.00 df3caae2-f945-4317-9db4-68fc605345b4
INV010 Refunded Credit card €20.00 36f19e85-6841-456c-9ddb-1ecdaa47dafd
INV011 Pending Credit card €50.00 22f60166-819e-4216-9d34-08e5cf3906f9
INV010 Paid Credit card €10.00 27ed00e0-a383-4483-b864-67e65cbb033d
INV011 Paid Bank Transfer €15.00 b33256e6-a35d-4670-8b78-908f0035a827
INV012 Paid PayPal €5.00 df3caae2-f945-4317-9db4-68fc605345b4
INV013 Refunded Credit card €20.00 36f19e85-6841-456c-9ddb-1ecdaa47dafd
INV014 Pending Credit card €50.00 22f60166-819e-4216-9d34-08e5cf3906f9
INV013 Paid Credit card €10.00 27ed00e0-a383-4483-b864-67e65cbb033d
INV014 Paid Bank Transfer €15.00 b33256e6-a35d-4670-8b78-908f0035a827
INV015 Paid PayPal €5.00 df3caae2-f945-4317-9db4-68fc605345b4
INV016 Refunded Credit card €20.00 36f19e85-6841-456c-9ddb-1ecdaa47dafd
INV017 Pending Credit card €50.00 22f60166-819e-4216-9d34-08e5cf3906f9
INV016 Paid Credit card €10.00 27ed00e0-a383-4483-b864-67e65cbb033d
INV017 Paid Bank Transfer €15.00 b33256e6-a35d-4670-8b78-908f0035a827
INV018 Paid PayPal €5.00 df3caae2-f945-4317-9db4-68fc605345b4
INV019 Refunded Credit card €20.00 36f19e85-6841-456c-9ddb-1ecdaa47dafd
INV020 Pending Credit card €50.00 22f60166-819e-4216-9d34-08e5cf3906f9
INV019 Paid Credit card €10.00 27ed00e0-a383-4483-b864-67e65cbb033d
INV020 Paid Bank Transfer €15.00 b33256e6-a35d-4670-8b78-908f0035a827
INV021 Paid PayPal €5.00 df3caae2-f945-4317-9db4-68fc605345b4
INV022 Refunded Credit card €20.00 36f19e85-6841-456c-9ddb-1ecdaa47dafd
INV023 Pending Credit card €50.00 22f60166-819e-4216-9d34-08e5cf3906f9
INV022 Paid Credit card €10.00 27ed00e0-a383-4483-b864-67e65cbb033d
INV023 Paid Bank Transfer €15.00 b33256e6-a35d-4670-8b78-908f0035a827
INV024 Paid PayPal €5.00 df3caae2-f945-4317-9db4-68fc605345b4
INV025 Refunded Credit card €20.00 36f19e85-6841-456c-9ddb-1ecdaa47dafd
INV026 Pending Credit card €50.00 22f60166-819e-4216-9d34-08e5cf3906f9
INV025 Paid Credit card €10.00 27ed00e0-a383-4483-b864-67e65cbb033d
INV026 Paid Bank Transfer €15.00 b33256e6-a35d-4670-8b78-908f0035a827
INV027 Paid PayPal €5.00 df3caae2-f945-4317-9db4-68fc605345b4
INV028 Refunded Credit card €20.00 36f19e85-6841-456c-9ddb-1ecdaa47dafd
INV029 Pending Credit card €50.00 22f60166-819e-4216-9d34-08e5cf3906f9
INV028 Paid Credit card €10.00 27ed00e0-a383-4483-b864-67e65cbb033d
INV029 Paid Bank Transfer €15.00 b33256e6-a35d-4670-8b78-908f0035a827
INV030 Paid PayPal €5.00 df3caae2-f945-4317-9db4-68fc605345b4
INV031 Refunded Credit card €20.00 36f19e85-6841-456c-9ddb-1ecdaa47dafd
INV032 Pending Credit card €50.00 22f60166-819e-4216-9d34-08e5cf3906f9 
@php
$rows = [
    ['Paid', 'Credit card', 10.00, '27ed00e0-a383-4483-b864-67e65cbb033d'],
    ['Paid', 'Bank Transfer', 15.00, 'b33256e6-a35d-4670-8b78-908f0035a827'],
    ['Paid', 'PayPal', 5.00, 'df3caae2-f945-4317-9db4-68fc605345b4'],
    ['Refunded', 'Credit card', 20.00, '36f19e85-6841-456c-9ddb-1ecdaa47dafd'],
    ['Pending', 'Credit card', 50.00, '22f60166-819e-4216-9d34-08e5cf3906f9'],
];
@endphp

<x-table container:class="max-h-80">
    <x-table-header sticky>
        <x-table-row>
            <x-table-head sticky>
                Invoice
            </x-table-head>
            <x-table-head>
                Status
            </x-table-head>
            <x-table-head>
                Method
            </x-table-head>
            <x-table-head>
                Amount
            </x-table-head>
            <x-table-head>
                Payment reference
            </x-table-head>
        </x-table-row>
    </x-table-header>
    <x-table-body highlight="even">
        @for($i=0; $i<10; $i++)
            @foreach($rows as $j => $row)
                <x-table-row>
                    <x-table-head sticky>
                        INV{{ str_pad(($i * 3 + $j + 1), 3, 0, STR_PAD_LEFT) }}
                    </x-table-head>
                    <x-table-cell>
                        {{ $row[0] }}
                    </x-table-cell>
                    <x-table-cell>
                        {{ $row[1] }}
                    </x-table-cell>
                    <x-table-cell>
                        <x-currency :value="$row[2]" />
                    </x-table-cell>
                    <x-table-cell>
                        {{ $row[3] }}
                    </x-table-cell>
                </x-table-row>
            @endforeach
        @endfor
    </x-table-body>
</x-table>

Composition

Use the following composition to build a table:

x-table
├── x-table-caption
├── x-table-header
│   └── x-table-row
│       ├── x-table-head
│       ├── x-table-head
│       ├── x-table-head
│       └── x-table-head
└── x-table-body
    ├── x-table-row
    │   ├── x-table-cell
    │   ├── x-table-cell
    │   ├── x-table-cell
    │   └── x-table-cell
    └── x-table-row
        ├── x-table-cell
        ├── x-table-cell
        ├── x-table-cell
        └── x-table-cell

Component API

x-table

Attribute Default Description
container:class null string
Helper attribute for adding classes to the table container.
hover false bool
Controls highlighting of rows when hovered.
caption bottom string
Controls the x-table-caption placement. Possible values bottom or top.

x-header

Attribute Default Description
sticky false bool
Makes the header sticky during vertical scrolling.

x-body

Attribute Default Description
highlight null string
Alternate highlighting for the contained rows. Possible values null, even or odd.

x-row

Attribute Default Description
sticky false bool
Makes the row sticky during vertical scrolling.

x-head

Attribute Default Description
align start string
Controls text alignment. Possible values start, center or end.
sticky false bool
Makes the cell sticky during horizontal scrolling.

x-cell

Attribute Default Description
align start string
Controls text alignment. Possible values start, center or end.
sticky false bool
Makes the cell sticky during horizontal scrolling.

On This Page