TallCraftUI

UI Components

Table

Cyber Week Mega Offer!

Huge discounts on all Hostinger plans

Use our referral link for an extra 20% off!

Claim Your Discount Now

# Basic usage

Active Actions
1 Taylor Otwell Taylor@gmail.com
2 Nuno Maduro Nuno@gmail.com
3 Caleb Porzio Caleb@gmail.com
4 Jeffrey Way Jeffrey@gmail.com
5 Developer Mithu Mithu@gmail.com
6 Jannie McDermott DVM ben.cremin@example.net
7 Peter Weber jmcglynn@example.net
8 Nelda Dooley IV mcclure.micaela@example.org
9 Bonita Crist nstiedemann@example.com
10 Willy Leuschke barrows.david@example.net
Per page: 
@php
    use App\Models\User;
    use Livewire\Component;
    use Developermithu\Tallcraftui\Traits\WithTcTable;
 
    class Table extends Component
    {
        use WithTcTable;
 
        public bool $is_active = false;
        public bool $email_verified_at = false;
 
        public function render()
        {
            $users = User::query()
                ->when($this->tcSearch, function ($query) {
                    $query->where('name', 'LIKE', '%' . $this->tcSearch . '%');
                })
                ->when($this->is_active, function ($query) {
                    $query->where('is_active', true);
                })
                ->when($this->email_verified_at, function ($query) {
                    $query->whereNotNull('email_verified_at');
                })
                ->tap(fn($query) => $this->tcApplySorting($query))
                ->paginate($this->tcPerPage);
 
            return view('livewire.table', compact('users'));
        }
    }
@endphp
 
<x-table :paginate="$users" :per-page="[5, 10, 20, 50]" searchable hoverable>
    <x-slot:heading>
        <x-th label="Id" sortable :$sortCol :$sortAsc />
        <x-th label="Name" sortable :$sortCol :$sortAsc />
        <x-th label="Email" sortable :$sortCol :$sortAsc />
        <x-th label="Active" />
        <x-th label="Actions" />
    </x-slot:heading>
 
    @forelse ($users as $user)
        <x-tr>
            <x-td :label="$user->id" />
            <x-td :label="$user->name" />
            <x-td :label="$user->email" />
            <x-td>
                @if ($user->is_active)
                    <x-icon name="check-circle" class="text-green-500 size-6" />
                @else
                    <x-icon name="x-circle" class="text-red-500 size-6" />
                @endif
            </x-td>
            <x-td class="space-x-2">
                <x-dropdown>
                    <x-slot:trigger>
                        <x-button icon="ellipsis-vertical" flat gray circle />
                    </x-slot:trigger>
 
                    <x-dropdown-item label="View" icon="eye" />
                    <x-dropdown-item label="Edit" icon="pencil-square" />
                    <x-dropdown-item label="Delete" icon="trash" />
                </x-dropdown>
            </x-td>
        </x-tr>
    @empty
        <x-not-found />
    @endforelse
 
    {{-- Filters --}}
    <x-slot:filters>
        <x-dropdown title="Filters" persistent w-56>
            <x-slot:trigger>
                <x-button icon="funnel" flat gray sm />
            </x-slot:trigger>
 
            <div class="p-4 space-y-3">
                <x-toggle wire:model.live="is_active" label="Active" />
                <x-toggle wire:model.live="email_verified_at" label="Email verified" />
            </div>
        </x-dropdown>
    </x-slot:filters>
</x-table>

# Simple table

Id Name Email Actions
1 Taylor Otwell Taylor@gmail.com Edit Delete
2 Nuno Maduro Nuno@gmail.com Edit Delete
3 Caleb Porzio Caleb@gmail.com Edit Delete
4 Jeffrey Way Jeffrey@gmail.com Edit Delete
5 Developer Mithu Mithu@gmail.com Edit Delete 
@php
    $users = App\Models\User::take(5)->get();
@endphp
 
<x-table>
    <x-slot:heading>
        <x-th label="Id" />
        <x-th label="Name" />
        <x-th label="Email" />
        <x-th label="Actions" />
    </x-slot:heading>
 
    @foreach ($users as $user)
        <x-tr>
            <x-td :label="$user->id" />
            <x-td :label="$user->name" />
            <x-td :label="$user->email" />
            <x-td>
                <x-button link="#" label="Edit" icon="pencil-square" amber flat sm />
                <x-button link="#" label="Delete" icon="trash" red flat sm />
            </x-td>
        </x-tr>
    @endforeach
</x-table>

# Without border

Id Name Email
1 Taylor Otwell Taylor@gmail.com
2 Nuno Maduro Nuno@gmail.com
3 Caleb Porzio Caleb@gmail.com
4 Jeffrey Way Jeffrey@gmail.com
5 Developer Mithu Mithu@gmail.com 
@php
    $users = App\Models\User::take(5)->get();
@endphp
 
<x-table borderless>
    <x-slot:heading>
        <x-th label="Id" />
        <x-th label="Name" />
        <x-th label="Email" />
    </x-slot:heading>
 
    @foreach ($users as $user)
        <x-tr>
            <x-td :label="$user->id" />
            <x-td :label="$user->name" />
            <x-td :label="$user->email" />
        </x-tr>
    @endforeach
</x-table>

# Striped style

Id Name Email
1 Taylor Otwell Taylor@gmail.com
2 Nuno Maduro Nuno@gmail.com
3 Caleb Porzio Caleb@gmail.com
4 Jeffrey Way Jeffrey@gmail.com
5 Developer Mithu Mithu@gmail.com 
@php
    $users = App\Models\User::take(5)->get();
@endphp
 
<x-table borderless striped>
    <x-slot:heading>
        <x-th label="Id" />
        <x-th label="Name" />
        <x-th label="Email" />
    </x-slot:heading>
 
    @foreach ($users as $user)
        <x-tr>
            <x-td :label="$user->id" />
            <x-td :label="$user->name" />
            <x-td :label="$user->email" />
        </x-tr>
    @endforeach
</x-table>

# Without header

1 Taylor Otwell Taylor@gmail.com
2 Nuno Maduro Nuno@gmail.com
3 Caleb Porzio Caleb@gmail.com
4 Jeffrey Way Jeffrey@gmail.com
5 Developer Mithu Mithu@gmail.com 
@php
    $users = App\Models\User::take(5)->get();
@endphp
 
<x-table borderless>
    @foreach ($users as $user)
        <x-tr>
            <x-td :label="$user->id" />
            <x-td :label="$user->name" />
            <x-td :label="$user->email" />
        </x-tr>
    @endforeach
</x-table>

# Hoverable

1 Taylor Otwell Taylor@gmail.com
2 Nuno Maduro Nuno@gmail.com
3 Caleb Porzio Caleb@gmail.com
4 Jeffrey Way Jeffrey@gmail.com
5 Developer Mithu Mithu@gmail.com 
@php
    $users = App\Models\User::take(5)->get();
@endphp
 
<x-table borderless hoverable>
    @foreach ($users as $user)
        <x-tr>
            <x-td :label="$user->id" />
            <x-td :label="$user->name" />
            <x-td :label="$user->email" />
        </x-tr>
    @endforeach
</x-table>

# Clickable

1 Taylor Otwell Taylor@gmail.com
2 Nuno Maduro Nuno@gmail.com
3 Caleb Porzio Caleb@gmail.com
4 Jeffrey Way Jeffrey@gmail.com
5 Developer Mithu Mithu@gmail.com 
@php
    $users = App\Models\User::take(5)->get();
@endphp
 
<x-table borderless>
    @foreach ($users as $user)
        <x-tr :href="route('docs.components.table')">
            <x-td :label="$user->id" />
            <x-td :label="$user->name" />
            <x-td :label="$user->email" />
        </x-tr>
    @endforeach
</x-table>

# With searching

Id Name Email
1 Taylor Otwell Taylor@gmail.com
2 Nuno Maduro Nuno@gmail.com
3 Caleb Porzio Caleb@gmail.com
4 Jeffrey Way Jeffrey@gmail.com
5 Developer Mithu Mithu@gmail.com 
@php
    // Include `WithTcTable` trait
    // use Developermithu\Tallcraftui\Traits\WithTcTable;
 
    $users = App\Models\User::query()
            ->when($this->tcSearch, function ($query) {
                $query->where('name', 'LIKE', '%' . $this->tcSearch . '%');
            })
            ->take(5)->get();
@endphp
 
<x-table searchable>
    <x-slot:heading>
        <x-th label="Id" />
        <x-th label="Name" />
        <x-th label="Email" />
    </x-slot:heading>
 
    @forelse ($users as $user)
        <x-tr>
            <x-td :label="$user->id" />
            <x-td :label="$user->name" />
            <x-td :label="$user->email" />
        </x-tr>
    @empty
        <x-not-found />
    @endforelse
</x-table>

# With pagination

Id Name Email
1 Taylor Otwell Taylor@gmail.com
2 Nuno Maduro Nuno@gmail.com
3 Caleb Porzio Caleb@gmail.com 
@php
    $users = App\Models\User::paginate(3);
@endphp
 
<x-table :paginate="$users">
    <x-slot:heading>
        <x-th label="Id" />
        <x-th label="Name" />
        <x-th label="Email" />
    </x-slot:heading>
 
    @foreach ($users as $user)
        <x-tr>
            <x-td :label="$user->id" />
            <x-td :label="$user->name" />
            <x-td :label="$user->email" />
        </x-tr>
    @endforeach
</x-table>

# With per page

Id Name Email
1 Taylor Otwell Taylor@gmail.com
2 Nuno Maduro Nuno@gmail.com
3 Caleb Porzio Caleb@gmail.com
4 Jeffrey Way Jeffrey@gmail.com
5 Developer Mithu Mithu@gmail.com
6 Jannie McDermott DVM ben.cremin@example.net
7 Peter Weber jmcglynn@example.net
8 Nelda Dooley IV mcclure.micaela@example.org
9 Bonita Crist nstiedemann@example.com
10 Willy Leuschke barrows.david@example.net
Per page: 
@php
    // Include `WithTcTable` trait
    // use Developermithu\Tallcraftui\Traits\WithTcTable;
 
    $users = App\Models\User::paginate($this->tcPerPage);
@endphp
 
{{-- You can also add custom option :per-page="[5, 10, 20]" --}}
<x-table :paginate="$users" per-page>
    <x-slot:heading>
        <x-th label="Id" />
        <x-th label="Name" />
        <x-th label="Email" />
    </x-slot:heading>
 
    @foreach ($users as $user)
        <x-tr>
            <x-td :label="$user->id" />
            <x-td :label="$user->name" />
            <x-td :label="$user->email" />
        </x-tr>
    @endforeach
</x-table>

# With sorting 

@php
    // Include `WithTcTable` trait
    // use Developermithu\Tallcraftui\Traits\WithTcTable;
 
    $users = App\Models\User::query()
            ->tap(fn($query) => $this->tcApplySorting($query))
            ->get();
@endphp
 
<x-table>
    <x-slot:heading>
        <x-th label="Id" sortable :$sortCol :$sortAsc />
        <x-th label="Name" sortable :$sortCol :$sortAsc />
    </x-slot:heading>
</x-table>
Code highlighting powered by Torchlight