Boson
Packagist GitHub

Table

Data table with striped, hoverable, and bordered variants. Supports multiple sizes and cell alignment.

Basic usage

Name
Email
Role
Alice alice@example.com Admin
Bob bob@example.com Editor
Charlie charlie@example.com Viewer 
<x-boson::table>
    <x-boson::table.head>
        <x-boson::table.row>
            <x-boson::table.header>Name</x-boson::table.header>
            <x-boson::table.header>Email</x-boson::table.header>
            <x-boson::table.header>Role</x-boson::table.header>
        </x-boson::table.row>
    </x-boson::table.head>
    <x-boson::table.body>
        <x-boson::table.row>
            <x-boson::table.data>Alice</x-boson::table.data>
            <x-boson::table.data>alice@example.com</x-boson::table.data>
            <x-boson::table.data>Admin</x-boson::table.data>
        </x-boson::table.row>
    </x-boson::table.body>
</x-boson::table>

Striped

Product
Price
Stock
Widget $9.99 142
Gadget $24.99 85
Doohickey $14.50 230 
<x-boson::table striped>
    ...
</x-boson::table>

Hoverable

Name
Status
Alice Active
Bob Inactive 
<x-boson::table hoverable>
    ...
</x-boson::table>

Bordered

Name
Status
Alice Active
Bob Inactive 
<x-boson::table bordered>
    ...
</x-boson::table>

Sizes

Size
Value
Small sm 
<x-boson::table size="sm">
    ...
</x-boson::table>

<x-boson::table size="lg">
    ...
</x-boson::table>

Column alignment

Item
Qty
Price
Widget 3 $29.97
Gadget 1 $24.99 
<x-boson::table.header align="center">Qty</x-boson::table.header>
<x-boson::table.header align="right">Price</x-boson::table.header>

<x-boson::table.data align="center">3</x-boson::table.data>
<x-boson::table.data align="right">$29.97</x-boson::table.data>

With badges

Name
Email
Status
Role
Alice alice@example.com Active Admin
Bob bob@example.com Pending Editor
Charlie charlie@example.com Inactive Viewer 
<x-boson::table hoverable>
    <x-boson::table.head>
        <x-boson::table.row>
            <x-boson::table.header>Name</x-boson::table.header>
            <x-boson::table.header>Status</x-boson::table.header>
        </x-boson::table.row>
    </x-boson::table.head>
    <x-boson::table.body>
        <x-boson::table.row>
            <x-boson::table.data>Alice</x-boson::table.data>
            <x-boson::table.data>
                <x-boson::badge color="green" size="sm">Active</x-boson::badge>
            </x-boson::table.data>
        </x-boson::table.row>
        <x-boson::table.row>
            <x-boson::table.data>Bob</x-boson::table.data>
            <x-boson::table.data>
                <x-boson::badge color="yellow" size="sm">Pending</x-boson::badge>
            </x-boson::table.data>
        </x-boson::table.row>
    </x-boson::table.body>
</x-boson::table>

Scrollable container

<x-boson::table.container>
    <x-boson::table>
        ...
    </x-boson::table>
</x-boson::table.container>

Props

Prop Type Default Description
striped bool false Alternate row background colors
hoverable bool false Highlight rows on hover
bordered bool false Add borders between cells
size string md Cell padding size: sm, md, lg
align string left Text alignment for header/data cells: left, center, right