Workflow
Custom Theme

This component uses a Custom Theme TailwindStriped.

You can find its source code in our GitHub Repository.

Header Top View - This is my property: foobar
ID
Name
Email
Created At
Header Bottom View - This is my property: foobar
ID
Name
Email
Created At
1
Test User
test@example.com
18/12/2024 23:00:49
2
Luan
luanfreitasdev@fakemail.com
18/01/2025 01:57:01
3
Daniel
dansysanalyst@fakemail.com
18/01/2025 01:57:01
4
Claudio
claudio@fakemail.com
18/01/2025 01:57:01
Footer Top View - This is my property: foobar
Custom Paginator Component: Page 1 Page 2
(user wants 4 records per page).
Footer Bottom View - This is my property: foobar
Disclaimer: Table data is randomly generated for illustrative purposes only. The information here is not a reflection of the actual market and does not constitute business, financial, or medical advice.
<?php

namespace App\Livewire\Examples\CustomThemeTable;

use App\Helpers\PowerGridThemes\TailwindStriped;
use App\Models\User;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Support\Carbon;
use PowerComponents\LivewirePowerGrid\Column;

use PowerComponents\LivewirePowerGrid\Facades\PowerGrid;
use PowerComponents\LivewirePowerGrid\PowerGridComponent;
use PowerComponents\LivewirePowerGrid\PowerGridFields;

final class CustomThemeTable extends PowerGridComponent
{
    public string $tableName = 'custom-theme-table';

    public string $someProperty =  'foobar';

    public function setUp(): array
    {
        return [
            PowerGrid::header()
                ->showToggleColumns()
                ->showSearchInput()
                ->includeViewOnTop('components.header.view-on-top')
                ->includeViewOnBottom('components.header.view-on-bottom'),

            PowerGrid::footer()
                ->showPerPage(4)
                ->showRecordCount()
                ->includeViewOnTop('components.bottom.view-on-top')
                ->includeViewOnBottom('components.bottom.view-on-bottom')
                ->pagination('components.pagination'),
        ];
    }

    public function datasource(): ?Builder
    {
        return User::query();
    }

    public function fields(): PowerGridFields
    {
        return PowerGrid::fields()
            ->add('id')
            ->add('name')
            ->add('email')
            ->add('created_at_formatted', fn ($user) => Carbon::parse($user->created_at)->format('d/m/Y H:i:s'))
            ->add('updated_at_formatted', fn ($user) => Carbon::parse($user->updated_at)->format('d/m/Y H:i:s'));
    }

    public function columns(): array
    {
        return [
            Column::add()
                ->title('ID')
                ->field('id'),

            Column::add()
                ->title('Name')
                ->field('name')
                ->sortable()
                ->searchable(),

            Column::add()
                ->title('Email')
                ->field('email')
                ->sortable()
                ->searchable(),

            Column::add()
                ->title('Created At')
                ->field('created_at_formatted', 'created_at')
                ->searchable()
                ->sortable(),

        ];
    }

    public function customThemeClass(): ?string
    {
        return TailwindStriped::class;
    }
}