Data Table

A generic sortable and paginated table wrapper for dense operational datasets.

Preview & Interactive Laboratory

Account
Owner
Region
MRR
Status
Northstar BioA. ChenUS$12,800Expansion
Helio SystemsM. SinghEU$9,400Healthy
Canvas RetailJ. ParkUS$7,200Review
Atlas EnergyD. ReedMEA$11,100Healthy
Showing 1 to 4 of 6 entries

Usage & Implementation

<DataTable
  columns={columns}
  data={rows}
  pageSize={5}
/>
React / Tailwind

Granular Customization

1

Columns

Define headers, accessor keys, sorting, and optional custom cells.

className={`columns={[...]}`}
2

Page Size

Control the row count per page.

className={`pageSize={8}`}
3

Wrapper

Extend layout spacing and outer chrome.

className={`className`}

API Reference (Props)

PropTypeDefaultDescription
columnsColumn<T>[]-Column configuration for the table.
dataT[]-Row data.
pageSizenumber5Rows shown per page.