Add Pagination component and integrate into Table component

[iurigustavo]

A new Pagination component has been created and added to the MaryServiceProvider. This component has been integrated into the Table component to manage table pagination. The addition of Pagination provides greater control and customization options for page number displays. This update also reduces complexity within the Table component by offloading pagination responsibilities.

Enable pagination outside table and add perPage parameter:

class ListTasks extends Component
{
    use Toast;
    use WithPagination;
    use ResetsPaginationWhenPropsChanges;

    #[Url]
    public string $name = '';

    #[Url]
    public array $sortBy = ['column' => 'id', 'direction' => 'asc'];

    #[Url]
    public int $perPage = 10;

    public function render()
    {
        return view('livewire.tasks.list-tasks')->with(
            [
                'tasks'   => $this->tasks(),
                'headers' => $this->headers(),
            ]
        );
    }

    public function tasks(): LengthAwarePaginator
    {
        return Task::query()
            ->when($this->name, fn(Builder $q) => $q->whereAny(['title', 'code', 'description'], 'like', "%$this->name%"))
            ->orderBy(...array_values($this->sortBy))
            ->paginate($this->perPage);
    }

    public function headers(): array
    {
        return [
            ['key' => 'id', 'label' => '#', 'class' => 'hidden lg:table-cell'],
            ['key' => 'code', 'label' => 'Code', 'sortBy' => 'code'],
            ['key' => 'title', 'label' => 'Title'],
            ['key' => 'status', 'label' => 'Status'],
            ['key' => 'expires_at', 'label' => 'Expires at', 'sortBy' => 'expires_at'],
        ];
    }

}

     @foreach($tasks as $task)
            <x-card title="{{ strtoupper($task->title) }}" subtitle="{{ $task->code }}" shadow separator>
                {{ $task->description }}
            </x-card>
            <x-pagination :rows="$tasks" wire:model.live="perPage"/>
     @endforeach

      <x-table :headers="$headers" :rows="$tasks" with-pagination per-page="perPage" :sort-by="$sortBy"/>

[robsontenorio]

Great PR ❤️

[robsontenorio]

Hey @iurigustavo

It throws a warning when using default pagination without perPage configuration. Can you handle it? This configuration should be optional.

<x-table :headers="$headers" :rows="$users" with-pagination />

[iurigustavo]

Both ways don't work:

<x-mary-pagination :rows="$rows" :per-page-values="$perPageValues" {{ $perPage ? "wire:model.live=$perPage" : '' }} />
<x-mary-pagination :rows="$rows" :per-page-values="$perPageValues" @if ($perPage) wire:model.live="{{ $perPage }}" @endif />

So I had to get a conditional (if) to work

[robsontenorio]

Thanks!