Pagination

Pagination patterns for navigating large datasets.

Table Pagination

The AdvancedTable component includes built-in pagination:

import { AdvancedTable } from '@gtcx/ui';
 
<AdvancedTable
  dataSource={data}
  columns={columns}
  pagination={{
    pageSize: 20,
    showSizeChanger: true,
    showTotal: (total) => `${total} items`,
  }}
/>

With ListTemplate

The ListTemplate handles pagination automatically:

import { ListTemplate } from '@gtcx/templates';
 
<ListTemplate
  title="Orders"
  data={{ items: orders, loading: false }}
  table={{
    rowKey: 'id',
    columns: orderColumns,
    pagination: { pageSize: 25 },
  }}
/>

Guidelines

Default page size: 20 items
Show page size selector for data-heavy views (10, 20, 50, 100)
Display total count: "Showing 1-20 of 150 items"
Use cursor-based pagination for real-time data
Avoid infinite scroll in audit/compliance contexts where users need stable references

Tabs Inputs