useXDSTablePagination@xds/core · Table
Usage
Table displays structured data in rows and columns with consistent dimensionality. It supports rich cell content, sorting, selection, pagination, and column management through a composable plugin system. Use Table for data sets with uniform structure; for simpler or inconsistent data, consider a list or card layout instead.Best practices
| Guidance | Practices |
|---|---|
| Do | Use density and divider variants to match the information density and scanning needs of your data. |
| Do | Compose rich cell content with XDS components like XDSBadge, XDSStatusDot, and XDSAvatar via renderCell. |
| Don't | Use a table for data without consistent columns — use a list or card layout for heterogeneous content. |
| Don't | Enable every plugin at once — add only the features your use case requires to keep the interface focused. |
Anatomy
| Element | Description | |
|---|---|---|
| Column Header | required | Displays titles, sorting controls, and bulk selection. |
| Body Rows | required | Rows with consistent data structure. |
| Footer | Displays summary or totals. | |
| Top Bar | Contains title, toolbar, and filters. | |
| Bottom Bar | Contains pagination controls. | |
| Support Panels | Displays row details in a side panel. |
Import
ts
Props
| Prop | Type | Description |
|---|---|---|
pagerequired | number | Current page number (1-based). |
onPageChangerequired | (page: number) => void | Called when the page changes. |
totalItems | number | Total number of items across all pages. Used to calculate total page count. |
totalPages | number | Total number of pages. Use when you know the page count but not item count. |
hasMore | boolean | Whether more pages exist. Use for cursor-based pagination where the total is unknown. |
pageSize | number (default: 10) | Number of items per page. |
onPageSizeChange | (pageSize: number) => void | Called when the user changes the page size. Shows a page size dropdown when provided with pageSizeOptions. |
pageSizeOptions | number[] | Available page size options. Shows a page size selector when provided. |
variant | 'pages' | 'count' | 'compact' | 'dots' | 'none' (default: 'pages') | Visual variant for the pagination controls. |
position | 'below' | 'above' | 'both' | 'none' (default: 'below') | Where to render pagination controls relative to the table. |
align | 'start' | 'center' | 'end' (default: 'center') | Horizontal alignment of the pagination controls. |