1. First
  2. Second
  3. Third

Table

Display structured data in organized rows and columns with support for various styling options. Tables are perfect for data lists, comparisons, and organized information display.

The table component supports 9 different variants, each with its own color scheme and styling:

Name Email Role Status
John Doe [email protected] Admin Active
Jane Smith [email protected] Editor Active
Bob Wilson [email protected] User Inactive
Alice Brown [email protected] Moderator Active
Charlie Davis [email protected] User Pending
Name Email Role Status
John Doe [email protected] Admin Active
Jane Smith [email protected] Editor Active
Bob Wilson [email protected] User Inactive
Alice Brown [email protected] Moderator Active
Charlie Davis [email protected] User Pending
Name Email Role Status
John Doe [email protected] Admin Active
Jane Smith [email protected] Editor Active
Bob Wilson [email protected] User Inactive
Alice Brown [email protected] Moderator Active
Charlie Davis [email protected] User Pending
Name Email Role Status
John Doe [email protected] Admin Active
Jane Smith [email protected] Editor Active
Bob Wilson [email protected] User Inactive
Alice Brown [email protected] Moderator Active
Charlie Davis [email protected] User Pending
Name Email Role Status
John Doe [email protected] Admin Active
Jane Smith [email protected] Editor Active
Bob Wilson [email protected] User Inactive
Alice Brown [email protected] Moderator Active
Charlie Davis [email protected] User Pending
Name Email Role Status
John Doe [email protected] Admin Active
Jane Smith [email protected] Editor Active
Bob Wilson [email protected] User Inactive
Alice Brown [email protected] Moderator Active
Charlie Davis [email protected] User Pending
Name Email Role Status
John Doe [email protected] Admin Active
Jane Smith [email protected] Editor Active
Bob Wilson [email protected] User Inactive
Alice Brown [email protected] Moderator Active
Charlie Davis [email protected] User Pending
Name Email Role Status
John Doe [email protected] Admin Active
Jane Smith [email protected] Editor Active
Bob Wilson [email protected] User Inactive
Alice Brown [email protected] Moderator Active
Charlie Davis [email protected] User Pending
Name Email Role Status
John Doe [email protected] Admin Active
Jane Smith [email protected] Editor Active
Bob Wilson [email protected] User Inactive
Alice Brown [email protected] Moderator Active
Charlie Davis [email protected] User Pending 
<x-andach-table>
    @include('main.components.partials.table')
</x-andach-table>

<x-andach-table variant="primary">
    @include('main.components.partials.table')
</x-andach-table>

<x-andach-table variant="success">
    @include('main.components.partials.table')
</x-andach-table>

Customisation

Attribute Name Type Default Value Description
size string null Controls the overall size and spacing. Options: 'xs', 'sm', 'base', 'lg', 'xl'.
variant string null Color scheme variant. Options: 'default', 'dark', 'light', 'brand', 'primary', 'secondary', 'success', 'warning', 'danger'.

Size Variations

Control the spacing and size of table elements:

Name Email Role Status
John Doe [email protected] Admin Active
Jane Smith [email protected] Editor Active
Bob Wilson [email protected] User Inactive
Alice Brown [email protected] Moderator Active
Charlie Davis [email protected] User Pending
Name Email Role Status
John Doe [email protected] Admin Active
Jane Smith [email protected] Editor Active
Bob Wilson [email protected] User Inactive
Alice Brown [email protected] Moderator Active
Charlie Davis [email protected] User Pending 
<x-andach-table size="sm" variant="secondary">
    @include('main.components.partials.table')
</x-andach-table>

<x-andach-table size="lg" variant="brand">
    @include('main.components.partials.table')
</x-andach-table>