DataTable

A data table component with sorting, selection, and pagination.

Installation

bash

npx @smicolon/cli add data-table

Run init once per project before adding components. See Installation.

Preview

Name	Email	Role
Layla Haddad	layla@example.com	Admin
Omar Khalil	omar@example.com	Editor
Sara Nasser	sara@example.com	Viewer

Pagination

Loading State

Name	Email	Role

Empty State

Name	Email	Role

No users found

Props

Prop	Type	Default	Description
`data`	`T[]`	—	Rows to display.
`columns`	`Column<T>[]`	—	Column definitions; each `align` is `start`, `center` or `end` of the reading direction.
`getRowKey`	`(row) => string \| number`	—	Unique key for each row.
`loading`	`boolean`	`false`	Shows the loading state.
`emptyState`	`ReactNode`	—	Shown when there are no rows.
`onRowClick`	`(row) => void`	—	Called when a row is clicked.
`selectedKey`	`string \| number`	—	Key of the selected row.
`stickyHeader`	`boolean`	`false`	Keeps the header visible on scroll.
`Pagination`	`{ page, totalPages, onPageChange, labels }`	—	Pages through rows; `labels` translates its text.
`className`	`string`	—	Extra classes for the component.

Usage

tsx

import { DataTable, Column } from "@/components/blocks/data-table"

const columns: Column<User>[] = [
  { id: "name", header: "Name", cell: (row) => row.name },
  { id: "email", header: "Email", cell: (row) => row.email },
]

<DataTable
  data={users}
  columns={columns}
  getRowKey={(row) => row.id}
  onRowClick={(row) => console.log(row)}
/>