Table Pagination with React "Helper"

The shadcn pagination component uses a regular <a> tag for the links, so you'll notice that the pagination links cause a full page refresh. This can be remedied by updating the shadcn component to use the Inertia <Link> component.

The great thing about shadcn and the way that the Laravel Starter Kits are implemented is that you can modify the components in this way, so no messy extending. Just be careful not to overwrite the changes later!

Just an observation, after the custom table-pagination.tsx component is created, the step where the component is used is missing. This can be confusing to readers who are just following along. The following needs to be added to the Tasks/Index.tsx for the pagination to show;

//Import first
import { TablePagination } from '@/components/table-pagination';
 
// Then use below
        <TablePagination resource={tasks} />
     </div>
</AppLayout>

Each child in a list should have a unique "key" prop.
 
Check the render method of `TablePagination`. See https://react.dev/link/warning-keys for more information. Error Component Stack
    at TablePagination (table-pagination.tsx:5:35)
    at div (<anonymous>)
    at main (<anonymous>)
    at SidebarInset (sidebar.tsx:302:25)
    at AppContent (app-content.tsx:8:30)
    at div (<anonymous>)
    at TooltipProvider (tooltip.tsx:7:3)
    at SidebarProvider (sidebar.tsx:55:3)
    at AppShell (app-shell.tsx:9:28)
    at AppSidebarLayout (app-sidebar-layout.tsx:9:44)
    at default (app-layout.tsx:10:19)
    at Index (Index.tsx:17:5)

I get error in console log. And I fixed it in resources/js/lib/generate-pagination-links.tsx by adding 2 keys to PaginationEllipsis key="ellipsis-before" and key="ellipsis-after"

...
if (2 < currentPage && currentPage < totalPages - 1) {
            pages.push(<PaginationEllipsis key="ellipsis-before"/>);
            pages.push(
                <PaginationItem key={currentPage}>
                    <PaginationLink href="" isActive={true}>
                        {currentPage}
                    </PaginationLink>
                </PaginationItem>,
            );
        }
        pages.push(<PaginationEllipsis key="ellipsis-after"/>);
        for (let i = totalPages - 1; i <= totalPages; i++) {
            pages.push(
                <PaginationItem key={i}>
                    <PaginationLink href={path + pageQuery + i} isActive={i === currentPage}>
                        {i}
                    </PaginationLink>
                </PaginationItem>,
            );
        }

For the PaginatedResponse interface to be generally useful you need to remove the default type Task and leave the generic declaration without any default type. It makes no sense to have an arbitrary dependency on Task. You can close the type declaration where it's used by specifying the type at that point.

For example, the table pagination component would become an open generic function: export function TablePagination<T>({resource}: {resource: PaginatedResponse<T>})...

You then close the function when it's used in the TSX markup, for example if you're paginating a list of Task, like this: <TablePagination<Task> resource={tasks} />

You also have to remove the dependency on Task from TablePagination and from generatePaginationLinks, making them also generic on T.

After doing that, you have pagination components that can be used in any project without having to edit the code and change the dependency on Task to something else.

I think it would be most useful to add a chapter with data-table. https://ui.shadcn.com/docs/components/data-table