Skip to content

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.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>

Hoverable + Striped

Name Status
Server A Online
Server B Offline 
<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>

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.