Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add table

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

Overview

The <x-aura::table> component provides a simple, styled HTML table with sub-components for full composability. It is not a DataTable — it renders static markup without sorting, filtering, or pagination. Use it for settings pages, pricing comparisons, simple data displays, and any context where a clean table is needed.

Sub-components: table.head, table.body, table.row, table.header, table.cell.

Basic Usage

Name Email Role
Alice Johnson [email protected] Admin
Bob Smith [email protected] Editor 
<x-aura::table>
    <x-aura::table.head>
        <x-aura::table.row>
            <x-aura::table.header>Name</x-aura::table.header>
            <x-aura::table.header>Email</x-aura::table.header>
            <x-aura::table.header align="right">Role</x-aura::table.header>
        </x-aura::table.row>
    </x-aura::table.head>
    <x-aura::table.body>
        <x-aura::table.row>
            <x-aura::table.cell>Alice Johnson</x-aura::table.cell>
            <x-aura::table.cell>[email protected]</x-aura::table.cell>
            <x-aura::table.cell align="right">Admin</x-aura::table.cell>
        </x-aura::table.row>
        <x-aura::table.row>
            <x-aura::table.cell>Bob Smith</x-aura::table.cell>
            <x-aura::table.cell>[email protected]</x-aura::table.cell>
            <x-aura::table.cell align="right">Editor</x-aura::table.cell>
        </x-aura::table.row>
    </x-aura::table.body>
</x-aura::table>
<x-aura::table>
    <x-aura::table.head>
        <x-aura::table.row>
            <x-aura::table.header>Name</x-aura::table.header>
            <x-aura::table.header>Email</x-aura::table.header>
            <x-aura::table.header align="right">Role</x-aura::table.header>
        </x-aura::table.row>
    </x-aura::table.head>
    <x-aura::table.body>
        <x-aura::table.row>
            <x-aura::table.cell>Alice Johnson</x-aura::table.cell>
            <x-aura::table.cell>[email protected]</x-aura::table.cell>
            <x-aura::table.cell align="right">Admin</x-aura::table.cell>
        </x-aura::table.row>
    </x-aura::table.body>
</x-aura::table>

Props

Table

Prop Type Default Description
striped bool false Alternating row background colors
hoverable bool false Highlight rows on hover
bordered bool false Add borders to all cells
compact bool false Reduce cell padding for dense data

Header / Cell

Prop Type Default Description
align string 'left' Text alignment: left, center, right

Head, Body, Row

Slot-only components. No custom props — pass any HTML attributes directly.

Variants / Examples

Striped

Product Price
Basic Plan $9/mo
Pro Plan $29/mo
Enterprise $99/mo 
<x-aura::table striped>
    <x-aura::table.head>
        <x-aura::table.row>
            <x-aura::table.header>Product</x-aura::table.header>
            <x-aura::table.header align="right">Price</x-aura::table.header>
        </x-aura::table.row>
    </x-aura::table.head>
    <x-aura::table.body>
        <x-aura::table.row>
            <x-aura::table.cell>Basic Plan</x-aura::table.cell>
            <x-aura::table.cell align="right">$9/mo</x-aura::table.cell>
        </x-aura::table.row>
        <x-aura::table.row>
            <x-aura::table.cell>Pro Plan</x-aura::table.cell>
            <x-aura::table.cell align="right">$29/mo</x-aura::table.cell>
        </x-aura::table.row>
        <x-aura::table.row>
            <x-aura::table.cell>Enterprise</x-aura::table.cell>
            <x-aura::table.cell align="right">$99/mo</x-aura::table.cell>
        </x-aura::table.row>
    </x-aura::table.body>
</x-aura::table>
<x-aura::table striped>
    ...
</x-aura::table>

Hoverable + Striped

Name Status
Server A Online
Server B Offline 
<x-aura::table striped hoverable>
    <x-aura::table.head>
        <x-aura::table.row>
            <x-aura::table.header>Name</x-aura::table.header>
            <x-aura::table.header>Status</x-aura::table.header>
        </x-aura::table.row>
    </x-aura::table.head>
    <x-aura::table.body>
        <x-aura::table.row>
            <x-aura::table.cell>Server A</x-aura::table.cell>
            <x-aura::table.cell><x-aura::badge variant="success">Online</x-aura::badge></x-aura::table.cell>
        </x-aura::table.row>
        <x-aura::table.row>
            <x-aura::table.cell>Server B</x-aura::table.cell>
            <x-aura::table.cell><x-aura::badge variant="danger">Offline</x-aura::badge></x-aura::table.cell>
        </x-aura::table.row>
    </x-aura::table.body>
</x-aura::table>
<x-aura::table striped hoverable>
    ...
</x-aura::table>

Bordered + Compact

Key Value
APP_ENV production
APP_DEBUG false 
<x-aura::table bordered compact>
    <x-aura::table.head>
        <x-aura::table.row>
            <x-aura::table.header>Key</x-aura::table.header>
            <x-aura::table.header>Value</x-aura::table.header>
        </x-aura::table.row>
    </x-aura::table.head>
    <x-aura::table.body>
        <x-aura::table.row>
            <x-aura::table.cell>APP_ENV</x-aura::table.cell>
            <x-aura::table.cell>production</x-aura::table.cell>
        </x-aura::table.row>
        <x-aura::table.row>
            <x-aura::table.cell>APP_DEBUG</x-aura::table.cell>
            <x-aura::table.cell>false</x-aura::table.cell>
        </x-aura::table.row>
    </x-aura::table.body>
</x-aura::table>
<x-aura::table bordered compact>
    ...
</x-aura::table>

Accessibility

  • The component renders semantic <table>, <thead>, <tbody>, <tr>, <th>, and <td> elements.
  • Use <x-aura::table.header> for column headings — they render as <th> with appropriate font weight and uppercase styling.
  • The outer wrapper provides overflow-x-auto for responsive horizontal scrolling on small screens.