Data Table

ready

Fixed-column record table with a sticky header and semantic status cells.

The Data Table lists records in equal-width, fixed columns with a sticky header. A cell accepts a string, a stack of strings, a colored Tag, or a row of icon actions — the last two are additive, so any existing table passing plain strings is unaffected. One column can render as a semantic Status Badge.

Anatomy

Application No.Application StatusSubmitted
9635 Approved 10/06/2021
7412 Under Review 08/14/2022
  1. 1 Header row — sticky column titles on a grey surface
  2. 2 Body rows — divider-separated, with a hover background
  3. 3 Cell — string, or a stack of lines via string[]
  4. 4 Status cell — the statusColumn renders a Status Badge

Variants

Basic

Application No.Licence TypeSubmitted
9635 Certified Social Worker (CSW) 10/06/2021
6676-D Licensed Practical Nurse (LPN) 10/06/2021 
<DataTable
columns={["Application No.", "Licence Type", "Submitted"]}
rows={[
  ["9635", "Certified Social Worker (CSW)", "10/06/2021"],
  ["6676-D", "Licensed Practical Nurse (LPN)", "10/06/2021"],
]}
/>

With status column

Pass statusColumn with the header name to color that column’s cells.

Application No.Application StatusDecision Date
9635 Approved 02/26/2024
7412 Under Review —
9023 Denied 05/17/2024
5290-D Withdrawn — 
<DataTable
columns={["Application No.", "Application Status", "Decision Date"]}
statusColumn="Application Status"
rows={[
  ["9635", "Approved", "02/26/2024"],
  ["7412", "Under Review", "—"],
  ["9023", "Denied", "05/17/2024"],
  ["5290-D", "Withdrawn", "—"],
]}
/>

Multi-line cells

A string[] cell stacks its lines — useful for a primary value with a caption.

ApplicantLicence Type
Jordan CallowayID 9635 Certified Social Worker (CSW) 
<DataTable
columns={["Applicant", "Licence Type"]}
rows={[
  [["Jordan Calloway", "ID 9635"], "Certified Social Worker (CSW)"],
]}
/>

Tag and action cells

A cell can be a { type: "tag", label, tone? } object instead of a string, and an optional header bar (title + headerActions) and footer row (footerLabel) give the grid its own chrome without reaching for a separate toolbar.

Student Records
NameStatus
Cindy Smith New 
<DataTable
title="Student Records"
headerActions={[{ icon: "search", label: "Search" }, { icon: "settings", label: "Settings" }]}
footerLabel="+ Add New"
columns={["Name", "Status", ""]}
rows={[
  ["Cindy Smith", { type: "tag", label: "New", tone: "info" }, { type: "actions", actions: [{ icon: "edit", label: "Edit" }, { icon: "trash", label: "Delete" }] }],
]}
/>

Usage

✓ Do
No.Application Status
9635 Approved

Name the status column and pass it to statusColumn for color coding.

✕ Don't
No.Application Status
9635 Approved

Don't leave status as plain text — it's harder to scan.

Accessibility

  • Renders a semantic <table> with <th scope="col"> header cells.
  • The header is visually sticky but remains part of the table structure.
  • Status cells keep their text label, so meaning isn’t carried by color alone.

Content

  • Keep headers short and in title case (“Application No.”, “Decision Date”).
  • Use an em dash (—) for empty values rather than leaving cells blank.

Props

PropTypeDefaultNotes
columnsstring[]—Column header labels.
rowsCell[][]—Cell is string | string[] | TagCell | ActionsCell.
statusColumnstring—Header name whose cells render as a Status Badge.
titlestring—Grid title shown in a small header bar above the table.
headerActions{icon,label}[]—Icon-only actions in that header bar.
footerLabelstring—Label for a full-width footer row (”+ Add New”).