GLS Component Registry

Nombre	Parcel Shop
Ana	Madrid Centro
Luis	Barcelona Eixample
Marta	Valencia Ruzafa
Pablo	Sevilla Norte
Irene	Bilbao Casco

Página 1 de 2

0 de 8 seleccionados

Items por página

Página 1 de 2

Installation

npx shadcn@latest add @ecodeliver/paginated-table

This table uses TanStack Table. See the shadcn data table guide if you need to change columns, sorting, or filters.

Usage

The component only needs to be passed the data and columns needed to render. Some relevant documentation:

We recommend getting familiarized with Tanstack Table before using this component.

import PaginatedTable from "@/components/registry/paginated-table";
import { createAppColumnHelper, useAppTable } from "@/hooks/use-app-table";
import { TooltipProvider } from "@/components/ui/tooltip";

const columnHelper = createAppColumnHelper();
const columns = columnHelper.columns([
  columnHelper.accessor("name", { header: "Name" }),
]);

export function Example() {
  const table = useAppTable({
    data: [{ name: "Alice" }, { name: "Bob" }],
    columns,
  });

  return (
    <TooltipProvider>
      <table.AppTable>
        <PaginatedTable />
      </table.AppTable>
    </TooltipProvider>
  );
}

Keyboard shortcuts

Left / Right: previous / next page
Home / End: first / last page

API Reference

PaginatedTable

empty is used to render a custom empty state. isPending is used to show a loading state.

Prop	Type	Default
`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 />`

Paginated Table