• Overview
• Installation
• Required Methods
  • columns(): array
  • query(): \Illuminate\Database\Eloquent\Builder
• Provided Properties
• Provided Methods
• Blade Integration
• Examples
  • User Management Table
  • Order List with Custom Query
  • Customizing Pagination
  • Hiding Columns
• Live Demo
• Accessibility

Pro Component — This trait requires an Aura UI Pro license.

Overview#

The WithAuraDataTable trait adds full data table functionality to any Livewire component. It provides sortable columns, global search, pagination, and column visibility toggling out of the box. Combined with the <x-aura::data-table> Blade component, it renders a feature-rich data table with minimal boilerplate.

Installation#

Add the trait to your Livewire component:

use BlueStarSystem\AuraUIPro\Traits\WithAuraDataTable;
use Livewire\Component;

class UserTable extends Component
{
    use WithAuraDataTable;

    // ...
}

Required Methods#

columns(): array#

Define the table columns. Each column is an associative array with configuration options.

public function columns(): array
{
    return [
        [
            'key' => 'name',         // Database column or accessor
            'label' => 'Name',       // Display header text
            'sortable' => true,      // Enable sorting (default: false)
            'searchable' => true,    // Include in global search (default: false)
            'visible' => true,       // Initial visibility (default: true)
        ],
        [
            'key' => 'email',
            'label' => 'Email',
            'sortable' => true,
            'searchable' => true,
        ],
        [
            'key' => 'created_at',
            'label' => 'Created',
            'sortable' => true,
            'format' => 'date',      // Optional: date, datetime, currency, boolean
        ],
    ];
}

query(): \Illuminate\Database\Eloquent\Builder#

Return the base Eloquent query builder. The trait handles search, sorting, and pagination automatically.

public function query(): \Illuminate\Database\Eloquent\Builder
{
    return User::query();
}

Provided Properties#

The trait adds these public properties to your component:

Provided Methods#

Blade Integration#

Use the <x-aura::data-table> component in your Blade view to render the table with all features wired up:

<x-aura::data-table :columns="$this->columns()" :rows="$this->getRows()">
    @foreach($this->getRows() as $row)
        <tr>
            <td>{{ $row->name }}</td>
            <td>{{ $row->email }}</td>
            <td>{{ $row->created_at->format('M d, Y') }}</td>
            <td>
                <x-aura::button size="sm" variant="ghost" wire:click="edit({{ $row->id }})">
                    Edit
                </x-aura::button>
            </td>
        </tr>
    @endforeach
</x-aura::data-table>

Examples#

User Management Table#

<?php

namespace App\Livewire;

use App\Models\User;
use BlueStarSystem\AuraUIPro\Traits\WithAuraDataTable;
use Livewire\Component;

class UserTable extends Component
{
    use WithAuraDataTable;

    public function columns(): array
    {
        return [
            [
                'key' => 'name',
                'label' => 'Name',
                'sortable' => true,
                'searchable' => true,
            ],
            [
                'key' => 'email',
                'label' => 'Email',
                'sortable' => true,
                'searchable' => true,
            ],
            [
                'key' => 'role',
                'label' => 'Role',
                'sortable' => true,
            ],
            [
                'key' => 'created_at',
                'label' => 'Joined',
                'sortable' => true,
                'format' => 'date',
            ],
            [
                'key' => 'actions',
                'label' => '',
                'sortable' => false,
                'visible' => true,
            ],
        ];
    }

    public function query(): \Illuminate\Database\Eloquent\Builder
    {
        return User::query();
    }

    public function edit(int $id): void
    {
        $this->redirect(route('users.edit', $id));
    }

    public function render()
    {
        return view('livewire.user-table');
    }
}

<!-- resources/views/livewire/user-table.blade.php -->
<div>
    <x-aura::data-table :columns="$this->columns()" :rows="$this->getRows()">
        @foreach($this->getRows() as $user)
            <tr wire:key="user-{{ $user->id }}">
                <td class="px-4 py-3">
                    <div class="flex items-center gap-3">
                        <div class="h-8 w-8 rounded-full bg-indigo-100 flex items-center justify-center">
                            <span class="text-sm font-medium text-indigo-700">
                                {{ strtoupper(substr($user->name, 0, 1)) }}
                            </span>
                        </div>
                        <span class="font-medium">{{ $user->name }}</span>
                    </div>
                </td>
                <td class="px-4 py-3 text-gray-600">{{ $user->email }}</td>
                <td class="px-4 py-3">
                    <x-aura::badge :variant="$user->role === 'admin' ? 'primary' : 'default'">
                        {{ ucfirst($user->role) }}
                    </x-aura::badge>
                </td>
                <td class="px-4 py-3 text-gray-500">{{ $user->created_at->format('M d, Y') }}</td>
                <td class="px-4 py-3">
                    <x-aura::button size="sm" variant="ghost" wire:click="edit({{ $user->id }})">
                        Edit
                    </x-aura::button>
                </td>
            </tr>
        @endforeach
    </x-aura::data-table>
</div>

Order List with Custom Query#

class OrderTable extends Component
{
    use WithAuraDataTable;

    public string $status = '';

    public function columns(): array
    {
        return [
            ['key' => 'number', 'label' => 'Order #', 'sortable' => true, 'searchable' => true],
            ['key' => 'customer_name', 'label' => 'Customer', 'sortable' => true, 'searchable' => true],
            ['key' => 'total', 'label' => 'Total', 'sortable' => true, 'format' => 'currency'],
            ['key' => 'status', 'label' => 'Status', 'sortable' => true],
            ['key' => 'created_at', 'label' => 'Date', 'sortable' => true, 'format' => 'date'],
        ];
    }

    public function query(): \Illuminate\Database\Eloquent\Builder
    {
        return Order::query()
            ->join('customers', 'orders.customer_id', '=', 'customers.id')
            ->select('orders.*', 'customers.name as customer_name')
            ->when($this->status, fn ($q) => $q->where('orders.status', $this->status));
    }

    public function render()
    {
        return view('livewire.order-table');
    }
}

Customizing Pagination#

class ProductTable extends Component
{
    use WithAuraDataTable;

    // Override default per-page value
    public int $perPage = 25;

    public function columns(): array
    {
        return [
            ['key' => 'name', 'label' => 'Product', 'sortable' => true, 'searchable' => true],
            ['key' => 'sku', 'label' => 'SKU', 'sortable' => true, 'searchable' => true],
            ['key' => 'price', 'label' => 'Price', 'sortable' => true, 'format' => 'currency'],
            ['key' => 'stock', 'label' => 'Stock', 'sortable' => true],
        ];
    }

    public function query(): \Illuminate\Database\Eloquent\Builder
    {
        return Product::query()->where('active', true);
    }
}

Hiding Columns#

The column visibility dropdown is rendered automatically by <x-aura::data-table>. Users can toggle individual columns. You can also set initial visibility:

public function columns(): array
{
    return [
        ['key' => 'name', 'label' => 'Name', 'sortable' => true, 'visible' => true],
        ['key' => 'email', 'label' => 'Email', 'sortable' => true, 'visible' => true],
        ['key' => 'phone', 'label' => 'Phone', 'sortable' => false, 'visible' => false], // Hidden by default
        ['key' => 'address', 'label' => 'Address', 'sortable' => false, 'visible' => false], // Hidden by default
        ['key' => 'created_at', 'label' => 'Created', 'sortable' => true, 'visible' => true],
    ];
}

Live Demo#

Accessibility#

• The <x-aura::data-table> component renders a <table> with proper <thead>, <tbody>, and <th scope="col"> markup.
• Sortable column headers are <button> elements with aria-sort indicating the current sort direction.
• The search input has aria-label="Search table".
• Pagination controls use <nav> with aria-label="Pagination".
• Column visibility toggles use aria-checked for the checkbox state.
• The per-page selector uses a standard <select> with a descriptive label.
• aria-live="polite" announces result count changes after search or filter operations.