Lucent UI
← CommandPaletteDataTableFileUpload →
✦ LLM-ready

DataTable

molecule

Feature-rich table with sortable columns, pagination, and a custom empty state. Accepts typed row data via generics.

"Add a DataTable from lucent-ui to display a list of users. Include sortable Name and Role columns, pagination set to 10 rows per page, and an empty state."

Usage

React / JSX
import { DataTable } from 'lucent-ui'

<DataTable pageSize={10}
  columns={[
    { key: "name", header: "Name" },
    { key: "role", header: "Role" },
    { key: "status", header: "Status" },
  ]}
  rows={[
    { name: "Alice", role: "Engineer", status: "Active" },
    { name: "Bob", role: "Designer", status: "Away" },
  ]} />

Installation

pnpm add lucent-ui

API Reference

DataTable props — * required

PropTypeDefaultDescription
columns*DataTableColumn<T>[]—Column definitions with key, header, optional render, sortable, width, and align.
rows*T[]—Array of row data objects.
pageSizenumber10Number of rows per page.
pagenumber—Controlled current page (1-indexed).
onPageChange(page: number) => void—Called when the user changes the page.
emptyStateReact.ReactNode—Content rendered when rows is empty.
styleReact.CSSProperties—Inline styles for the table wrapper.