Widget tables - How to display results total and advanced navigation

Hi ! How can I add results total and advanced navigation similar to others table in my application ?

1 Reply

This is what I'm talking about :

<span class="fi-pagination-overview text-sm font-medium text-gray-700 dark:text-gray-200">
    Affichage de 1 résultat
</span>

<span class="fi-pagination-overview text-sm font-medium text-gray-700 dark:text-gray-200">
    Affichage de 1 résultat
</span>

Still searching for a solution 🤚 I found a solution. Make a custom BaseTableWidget and override the paginateTableQuery() by copying the base method from the Filament\Tables\Concerns\CanPaginateRecords trait :

<?php

declare(strict_types=1);

namespace App\Filament\Widgets;

use Filament\Widgets\TableWidget;
use Illuminate\Contracts\Pagination\CursorPaginator;
use Illuminate\Contracts\Pagination\Paginator;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Pagination\LengthAwarePaginator;
use Illuminate\Support\Facades\App;

abstract class NanouBaseTableWidget extends TableWidget
{
    protected function paginateTableQuery(Builder $query): Paginator | CursorPaginator
    {

        $perPage = $this->getTableRecordsPerPage();

        if (version_compare(App::version(), '11.0', '>=')) {
            $total = $query->toBase()->getCountForPagination();

            /** @var LengthAwarePaginator $records */
            $records = $query->paginate(
                perPage: ($perPage === 'all') ? $total : $perPage,
                columns: ['*'],
                pageName: $this->getTablePaginationPageName(),
                total: $total,
            );
        } else {
            /** @var LengthAwarePaginator $records */
            $records = $query->paginate(
                perPage: ($perPage === 'all') ? $query->toBase()->getCountForPagination() : $perPage,
                columns: ['*'],
                pageName: $this->getTablePaginationPageName(),
            );
        }

        return $records->onEachSide(0);
    }
}

<?php

declare(strict_types=1);

namespace App\Filament\Widgets;

use Filament\Widgets\TableWidget;
use Illuminate\Contracts\Pagination\CursorPaginator;
use Illuminate\Contracts\Pagination\Paginator;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Pagination\LengthAwarePaginator;
use Illuminate\Support\Facades\App;

abstract class NanouBaseTableWidget extends TableWidget
{
    protected function paginateTableQuery(Builder $query): Paginator | CursorPaginator
    {

        $perPage = $this->getTableRecordsPerPage();

        if (version_compare(App::version(), '11.0', '>=')) {
            $total = $query->toBase()->getCountForPagination();

            /** @var LengthAwarePaginator $records */
            $records = $query->paginate(
                perPage: ($perPage === 'all') ? $total : $perPage,
                columns: ['*'],
                pageName: $this->getTablePaginationPageName(),
                total: $total,
            );
        } else {
            /** @var LengthAwarePaginator $records */
            $records = $query->paginate(
                perPage: ($perPage === 'all') ? $query->toBase()->getCountForPagination() : $perPage,
                columns: ['*'],
                pageName: $this->getTablePaginationPageName(),
            );
        }

        return $records->onEachSide(0);
    }
}

Then, in your widget extends it, add ->extremePaginationLinks() to your table and be sure the widget is large enough to allow the pagination to be displayed.

Gaming

Programming

Widget tables - How to display results total and advanced navigation