# TablePagination

> Pagination footer for DataTable.

- **Level**: molecule · **Status**: stable · **Role**: navigation
- **Import**: `import { TablePagination } from "@rrios-forge/ui/molecules/table-pagination";`
- **Source**: `packages/ui/src/molecules/table-pagination`

Composes the existing Pagination molecule with a summary line ('1–10 of 42'). page / pageCount are required and 1-based; pageSize / totalItems unlock the compressed range. Patterns consulted: Patterns/Navigation · PaginationForDatasets, Patterns/Page Shells · DataPage.

## Use it for

- Table → `DataTable`, or `TableHeader` + `TableRow` + `TablePagination`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `density` | — | `compact` `comfortable` | — | — |

## Stories

- [Playground](/?path=/story/components-molecules-tablepagination--playground) · frame: `/iframe.html?id=components-molecules-tablepagination--playground&viewMode=story`
- [Many pages](/?path=/story/components-molecules-tablepagination--many-pages) · frame: `/iframe.html?id=components-molecules-tablepagination--many-pages&viewMode=story`
- [First page](/?path=/story/components-molecules-tablepagination--first-page) · frame: `/iframe.html?id=components-molecules-tablepagination--first-page&viewMode=story`
- [Last page](/?path=/story/components-molecules-tablepagination--last-page) · frame: `/iframe.html?id=components-molecules-tablepagination--last-page&viewMode=story`
- [In data surface](/?path=/story/components-molecules-tablepagination--in-data-surface) · frame: `/iframe.html?id=components-molecules-tablepagination--in-data-surface&viewMode=story`

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).