• Overview
• Component
• View
• Rules and gotchas
• API

Pro Feature — Part of the WithAuraDataTable trait, which requires an Aura UI Pro license.

Overview#

Row grouping renders your table rows under group headers by the value of one column — for example, materials grouped by category. It builds on the DataTable Trait: set $groupBy, keep the grouping column as the primary orderBy in query(), and iterate groupedRows() in your view.

Grouping bypasses pagination (all filtered rows are returned), so it is intended for configuration-style screens with modest row counts.

Component#

use BlueStarSystem\AuraUIPro\DataTable\Column;
use BlueStarSystem\AuraUIPro\Traits\WithAuraDataTable;
use BlueStarSystem\AuraUIPro\Traits\WithAuraInlineEdit;
use Illuminate\Database\Eloquent\Builder;

class Materials extends Component
{
    use WithAuraDataTable, WithAuraInlineEdit;

    // Enable grouping by overriding this method. Do NOT redeclare the $groupBy
    // property in your class — a trait property cannot be redeclared with a
    // different default in PHP 8.4 (fatal "definition differs" error).
    protected function defaultGroupBy(): ?string
    {
        return 'category';
    }

    public function query(): Builder
    {
        // Grouping column FIRST, and not sortable — so applied sorts append
        // without splitting groups.
        return Material::query()->orderBy('category')->orderBy('name');
    }

    public function columns(): array
    {
        return [
            Column::make('name', 'Name')->searchable()->inlineEditable(),
            Column::make('cost', 'Cost')->inlineEditable(),
        ];
    }
}

View#

Iterate groupedRows() — a collection keyed by the group value:

<x-aura::table :hoverable="true">
    <thead>{{-- your header row --}}</thead>
    <tbody>
        @foreach ($this->groupedRows() as $group => $rows)
            <tr>
                <td colspan="3" class="bg-aura-surface-100 font-semibold">{{ $group }}</td>
            </tr>
            @foreach ($rows as $row)
                <tr wire:key="row-{{ $row->id }}">
                    <td>
                        @if ($this->isEditing($row->id, 'name'))
                            <input wire:model="editingValue" wire:keydown.enter="saveEditing" wire:blur="saveEditing" />
                        @else
                            <span wire:click="startEditing('{{ $row->id }}', 'name', @js($row->name))">{{ $row->name }}</span>
                        @endif
                    </td>
                    {{-- … --}}
                </tr>
            @endforeach
        @endforeach
    </tbody>
</x-aura::table>

Rules and gotchas#

• The grouping column must be the primary orderBy in query() and should not be ->sortable(), so user sorts append after it and never split a group.
• Inline editing is safe by design. WithAuraInlineEdit only writes columns you mark ->inlineEditable(). startEditing / saveEditing are public Livewire actions, but the trait rejects any column that is not on the allow-list — so a tampered request cannot write arbitrary columns. Always declare inline-editable columns explicitly; never bypass the trait's updateCellValue.
• Pass values to startEditing with @js(...), not e(...), to avoid double-encoding.
• No pagination while grouped. groupedRows() fetches all filtered rows; use it for configuration screens, not million-row tables.
• Enable grouping via defaultGroupBy(), not a redeclared property. Redeclaring the trait's public ?string $groupBy in your component (e.g. public ?string $groupBy = 'category';) is a fatal error in PHP 8.4 ("definition differs"). Override defaultGroupBy() instead, or set $this->groupBy in mount() for dynamic grouping.

API#