Skip to content

No results for

↑ ↓ navigate ↵ open Esc close

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

Overview

The WithAuraRowDetails trait adds expandable detail rows to a DataTable. Each row can reveal an extra panel below it — useful for showing related records, a preview, or actions — and the content is typically lazy-loaded on first expand. By default multiple rows can be open at once; opt into accordion behaviour to keep only one open.

Installation

Add the trait alongside WithAuraDataTable:

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

class OrdersTable extends Component
{
    use WithAuraDataTable, WithAuraRowDetails;

    // ...
}

Rendering the detail row

In your table markup, add a toggle and conditionally render a detail row:

@foreach ($this->getItems() as $row)
    <tr wire:key="row-{{ $row->id }}">
        {{-- ...cells... --}}
        <td>
            <x-aura::button size="sm" wire:click="toggleRowDetails({{ $row->id }})">
                Details
            </x-aura::button>
        </td>
    </tr>

    @if ($this->isRowExpanded($row->id))
        <tr wire:key="row-details-{{ $row->id }}">
            <td :colspan="count($this->getVisibleColumns())">
                {{-- detail content for $row --}}
            </td>
        </tr>
    @endif
@endforeach

API

Method Description
toggleRowDetails($key) Open the row if closed, close it if open.
expandRow($key) / collapseRow($key) Explicitly open / close a row.
collapseAllRows() Close every open row.
isRowExpanded($key): bool Whether the given row key is open.
singleRowExpand(): bool Override to return true for accordion behaviour (only one row open at a time).

Accordion mode

public function singleRowExpand(): bool
{
    return true;
}

Row keys are compared as strings, so integer and string IDs interoperate (expandRow(5) and isRowExpanded('5') agree).