Skip to main content
Docs
← Back to Examples View Docs

Data Table Basic

A simple DataTable with built-in sorting and pagination. Click column headers to sort, use pagination controls to navigate.

Users

87 total users

Active Inactive Pending
User data with built-in sorting and pagination
User 1user1@example.comAdminActiveEngineering1/1/2020
User 2user2@example.comEditorInactiveMarketing2/2/2020
User 3user3@example.comViewerPendingSales3/3/2020
User 4user4@example.comManagerActiveSupport4/4/2020
User 5user5@example.comAdminInactiveHR5/5/2020
User 6user6@example.comEditorPendingEngineering6/6/2020
User 7user7@example.comViewerActiveMarketing7/7/2020
User 8user8@example.comManagerInactiveSales8/8/2020
User 9user9@example.comAdminPendingSupport9/9/2020
User 10user10@example.comEditorActiveHR10/10/2020
87 row(s) total
Page 1 of 9

Usage

<DataTable
  data={users}
  columns={columns}
  enablePagination
  pageSize={10}
  onRowClick={handleRowClick}
  getRowId={(row) => String(row.id)}
/>
  • Built-in client-side sorting by clicking column headers
  • Automatic pagination with configurable page size
  • Row click handler for interaction
  • Accessible with proper ARIA attributes
  • For advanced features (filtering, selection, virtualization), see the Advanced DataTable example