Table

The table component is used to display data in a tabular format. It additionally comes with a TableComponent abstract component class that can be used to create custom tables. with pagination, sorting, and filtering capabilities.

Table Attributes

stretch (boolean) - The data to display in the table.
paginate (SimplePaginator) - The data to display in the table.
simple-paginate (SimplePaginator) - The data to display in the table. just no search input field and items per page.

Row Attributes

size (string) - The size of the row. Can be sm, md, or lg.

Cell Attributes

align (string) - The alignment of the cell. Can be left, center, right, start or end.
sort (string) - The sorting attribute when using the TableComponent abstract class. It represents the column name to sort by.
href (string) - The URL to link to when the whole row is clicked.

Basic Usage

Name	Email	Role	Status	Actions
John Doe	[email protected]	User	Active	show
Jane Doe	[email protected]	Admin	Active	show

Copy to clipboard

<aura:table>
    <aura:columns>
        <aura:column text="Name"/>
        <aura:column text="Email"/>
        <aura:column text="Role"/>
        <aura:column text="Status"/>
        <aura:column text="Actions"/>
    </aura:columns>
    <aura:rows>
        <aura:row>
            <aura:cell text="John Doe"/>
            <aura:cell text="[email protected]"/>
            <aura:cell>
                <aura:badge secondary text="User"/>
            </aura:cell>
            <aura:cell text="Active"/>
            <aura:cell>
                show
            </aura:cell>
        </aura:row>
        <aura:row>
            <aura:cell text="Jane Doe"/>
            <aura:cell text="[email protected]"/>
            <aura:cell>
                <aura:badge primary text="Admin"/>
            </aura:cell>
            <aura:cell text="Active"/>
            <aura:cell>
                show
            </aura:cell>
        </aura:row>
    </aura:rows>
</aura:table>

Stretched Table

The stretch attribute can be used to stretch the table to the full width of the aura:main container which is hard to show here but can be tested in the application.

Name	Email	Role	Status	Actions
John Doe	[email protected]	User	Active	show
Jane Doe	[email protected]	Admin	Active	show

Copy to clipboard

<aura:table stretch>
    <!-- Columns and Rows -->
</aura:table>

With Pagination

Create a new Livewire component that extends the TableComponent abstract class. The loadTable method is used to load the data from the database and return it to the view.

A search input field is added to the table to filter the data. The query method is used to define the query to fetch the data from the database.

Copy to clipboard

use KollegEssig\Aura\Livewire\TableComponent;

class Table extends TableComponent
{
    public function query(): Builder
    {
        return User::query()
            ->when($this->search, function ($query) {
                $query->where('name', 'like', '%'.$this->search.'%')
                    ->orWhere('email', 'like', '%'.$this->search.'%');
            });
    }

    public function render(): View
    {
        return view('livewire.table', [
            'data' => $this->loadTable(),
        ]);
    }
}

Then all that is left is to create the view file for the table.

Copy to clipboard

<aura:table :paginate="$data" stretch>
    <aura:columns>
        <aura:column>Name</aura:column>
        <aura:column>Email</aura:column>
        <aura:column>Role</aura:column>
        <aura:column>Status</aura:column>
        <aura:column>Actions</aura:column>
    </aura:columns>
    <aura:rows>
        @foreach($data as $item)
            <aura:row>
                <aura:cell>
                    {{ $item->name }}
                </aura:cell>
                <aura:cell text="{{ $item->email }}"/>
                <aura:cell>
                    <aura:badge primary text="{{ $item->role }}"/>
                </aura:cell>
                <aura:cell>
                    {{ $item->status }}
                </aura:cell>
                <aura:cell href="{{ route('users.show', $item) }}">
                    <aura:button xs>
                        Show
                    </aura:button>
                </aura:cell>
            </aura:row>
        @endforeach
    </aura:rows>
</aura:table>

Home