Stepwise UI

Table

A typed, column-driven data table with alternating rows, a dark header, and horizontal scroll on overflow. Columns accept a render function for custom cell content - badges, avatars, actions, anything.

Installation

npx stepwise-ui add table

Default

NameRoleStatus
Akhil Reji
Admin
Active
Sarah Chen
Editor
Active
Marcus Wright
Viewer
Invited
Priya Nair
Editor
Active
Luka Moran
Viewer
Suspended
import { Table, type TableColumn } from '@/components/stepwise/table'

type User = { name: string; role: string; status: string }

const columns: TableColumn<User>[] = [
  { key: 'name',   header: 'Name',   width: '1fr' },
  { key: 'role',   header: 'Role',   width: '120px' },
  {
    key: 'status', header: 'Status', width: '120px',
    render: (v) => <StatusBadge status={v} />,
  },
]

<Table columns={columns} rows={data} getKey={r => r.name} />

Pagination

Set pageSize and the table pages itself: rows cross-fade between pages, and a footer appears with the page read-out and prev/next arrows. Control it externally with page + onPageChange.
NameRoleStatus
Akhil Reji
Admin
Active
Sarah Chen
Editor
Active
Marcus Wright
Viewer
Invited
Priya Nair
Editor
Active
Luka Moran
Viewer
Suspended
Page 1 of 3
// pageSize turns on the footer: "Page x of y" + prev/next arrows.
<Table columns={columns} rows={rows} pageSize={5} />

// Customise the read-out, or control the page yourself:
<Table
  columns={columns}
  rows={rows}
  pageSize={5}
  page={page}
  onPageChange={setPage}
  pageLabel={(p, total) => `${p} / ${total}`}
/>

Props - Table

PropTypeDescription
columns
TableColumn<T>[]
Column definitions.
rows
T[]
Data rows.
getKey
(row: T, i: number) => string | number
Stable key for each row.
pageSize
number
Rows per page. Omit for no pagination.
page
number
Controlled page (1-indexed).
onPageChange
(page: number) => void
Fires when the user pages.
pageLabel
(page, pages) => ReactNode
Customise the footer read-out.
gridCols
string
Override the auto grid-template-columns.
minWidth
string
Min width before horizontal scroll. Default "480px".

Props - TableColumn

PropTypeDescription
key
keyof T | string
Row object key to read.
header
string
Column heading.
width
string
CSS track size (e.g. "1fr", "120px"). Default "1fr".
render
(value, row, index) => ReactNode
Custom cell renderer.