Paginated Table
A paginated table wrapper for a TanStack Table instance, with keyboard navigation and empty and loading states.
Página 1 de 2
0 de 8 seleccionados
Items por página
Página 1 de 2
Installation
pnpm dlx shadcn@latest add @ecodeliver/paginated-tableUsage
Build the table with useReactTable and pass the instance in. Page size options are 1, 3, 5, 10, and 100. Columns with id select or actions render narrower than the rest.
import {
getCoreRowModel,
getPaginationRowModel,
useReactTable,
} from "@tanstack/react-table";
import PaginatedTable from "@/components/registry/paginated-table";
const columns = [{ accessorKey: "name", header: "Name" }];
export function Example() {
const table = useReactTable({
data: [{ name: "Alice" }, { name: "Bob" }],
columns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
});
return <PaginatedTable table={table} />;
}Keyboard shortcuts
- Left / Right: previous / next page
- Home / End: first / last page
API Reference
PaginatedTable
PaginatedTable is a default export. The empty-state copy is Spanish.
| Prop | Type | Default |
|---|---|---|
table | Table<T> | - |
empty | object | - |
isPending | boolean | - |
empty
| Prop | Type | Default |
|---|---|---|
title | string | "No se encontraron resultados" |
description | string | "Intenta ajustar los filtros o realizar una nueva búsqueda" |
icon | ReactNode | <SearchX /> |