Data Table

Name: Boreal UI
Author: Davin Chiupka

The Data Table component allows for easy display of tabular data with options for sorting and row interaction.

Usage & Examples

Default

Data table
			Status
1	Alice	91	Pass
2	Bob	75	Pass
3	Charlie	58	Fail
4	Dana	84	Pass

default.tsx

 const sampleData = [
      { id: 1, name: "Alice", score: 91, passed: true },
      { id: 2, name: "Bob", score: 75, passed: true },
      { id: 3, name: "Charlie", score: 58, passed: false },
      { id: 4, name: "Dana", score: 84, passed: true },
    ];
  
    <DataTable
              data={sampleData}
              columns={[
                { key: "id", label: "ID", sortable: true },
                { key: "name", label: "Name", sortable: true },
                { key: "score", label: "Score", sortable: true },
                {
                  key: "passed",
                  label: "Status",
                  sortable: false,
                  render: (value: unknown) => (value ? "Pass" : "Fail"),
                },
              ]}
              theme="primary"
              striped={true}
            />

Visual variants

Themes

primary

Data table
			Status
1	Alice	91	Pass
2	Bob	75	Pass
3	Charlie	58	Fail
4	Dana	84	Pass

secondary

Data table
			Status
1	Alice	91	Pass
2	Bob	75	Pass
3	Charlie	58	Fail
4	Dana	84	Pass

tertiary

Data table
			Status
1	Alice	91	Pass
2	Bob	75	Pass
3	Charlie	58	Fail
4	Dana	84	Pass

quaternary

Data table
			Status
1	Alice	91	Pass
2	Bob	75	Pass
3	Charlie	58	Fail
4	Dana	84	Pass

States

success

Data table
			Status
1	Alice	91	Pass
2	Bob	75	Pass
3	Charlie	58	Fail
4	Dana	84	Pass

warning

Data table
			Status
1	Alice	91	Pass
2	Bob	75	Pass
3	Charlie	58	Fail
4	Dana	84	Pass

error

Data table
			Status
1	Alice	91	Pass
2	Bob	75	Pass
3	Charlie	58	Fail
4	Dana	84	Pass

info

Data table
			Status
1	Alice	91	Pass
2	Bob	75	Pass
3	Charlie	58	Fail
4	Dana	84	Pass

Variants

solid

Data table
			Status
1	Alice	91	Pass
2	Bob	75	Pass
3	Charlie	58	Fail
4	Dana	84	Pass

outline

Data table
			Status
1	Alice	91	Pass
2	Bob	75	Pass
3	Charlie	58	Fail
4	Dana	84	Pass

glass

Data table
			Status
1	Alice	91	Pass
2	Bob	75	Pass
3	Charlie	58	Fail
4	Dana	84	Pass

Rounding

none

Data table
			Status
1	Alice	91	Pass
2	Bob	75	Pass
3	Charlie	58	Fail
4	Dana	84	Pass

medium

Data table
			Status
1	Alice	91	Pass
2	Bob	75	Pass
3	Charlie	58	Fail
4	Dana	84	Pass

large

Data table
			Status
1	Alice	91	Pass
2	Bob	75	Pass
3	Charlie	58	Fail
4	Dana	84	Pass

Shadows

none

Data table
			Status
1	Alice	91	Pass
2	Bob	75	Pass
3	Charlie	58	Fail
4	Dana	84	Pass

light

Data table
			Status
1	Alice	91	Pass
2	Bob	75	Pass
3	Charlie	58	Fail
4	Dana	84	Pass

strong

Data table
			Status
1	Alice	91	Pass
2	Bob	75	Pass
3	Charlie	58	Fail
4	Dana	84	Pass

visual-variants.tsx

// Themes
 const sampleData = [
      { id: 1, name: "Alice", score: 91, passed: true },
      { id: 2, name: "Bob", score: 75, passed: true },
      { id: 3, name: "Charlie", score: 58, passed: false },
      { id: 4, name: "Dana", score: 84, passed: true },
    ];
  
    <DataTable theme="primary"
              data={sampleData}
              columns={[
                { key: "id", label: "ID", sortable: true },
                { key: "name", label: "Name", sortable: true },
                { key: "score", label: "Score", sortable: true },
                {
                  key: "passed",
                  label: "Status",
                  sortable: false,
                  render: (value: unknown) => (value ? "Pass" : "Fail"),
                },
              ]}
              theme="primary"
              striped={true}
            />
 const sampleData = [
      { id: 1, name: "Alice", score: 91, passed: true },
      { id: 2, name: "Bob", score: 75, passed: true },
      { id: 3, name: "Charlie", score: 58, passed: false },
      { id: 4, name: "Dana", score: 84, passed: true },
    ];
  
    <DataTable theme="secondary"
              data={sampleData}
              columns={[
                { key: "id", label: "ID", sortable: true },
                { key: "name", label: "Name", sortable: true },
                { key: "score", label: "Score", sortable: true },
                {
                  key: "passed",
                  label: "Status",
                  sortable: false,
                  render: (value: unknown) => (value ? "Pass" : "Fail"),
                },
              ]}
              theme="primary"
              striped={true}
            />
 const sampleData = [
      { id: 1, name: "Alice", score: 91, passed: true },
      { id: 2, name: "Bob", score: 75, passed: true },
      { id: 3, name: "Charlie", score: 58, passed: false },
      { id: 4, name: "Dana", score: 84, passed: true },
    ];
  
    <DataTable theme="tertiary"
              data={sampleData}
              columns={[
                { key: "id", label: "ID", sortable: true },
                { key: "name", label: "Name", sortable: true },
                { key: "score", label: "Score", sortable: true },
                {
                  key: "passed",
                  label: "Status",
                  sortable: false,
                  render: (value: unknown) => (value ? "Pass" : "Fail"),
                },
              ]}
              theme="primary"
              striped={true}
            />
 const sampleData = [
      { id: 1, name: "Alice", score: 91, passed: true },
      { id: 2, name: "Bob", score: 75, passed: true },
      { id: 3, name: "Charlie", score: 58, passed: false },
      { id: 4, name: "Dana", score: 84, passed: true },
    ];
  
    <DataTable theme="quaternary"
              data={sampleData}
              columns={[
                { key: "id", label: "ID", sortable: true },
                { key: "name", label: "Name", sortable: true },
                { key: "score", label: "Score", sortable: true },
                {
                  key: "passed",
                  label: "Status",
                  sortable: false,
                  render: (value: unknown) => (value ? "Pass" : "Fail"),
                },
              ]}
              theme="primary"
              striped={true}
            />

// States
 const sampleData = [
      { id: 1, name: "Alice", score: 91, passed: true },
      { id: 2, name: "Bob", score: 75, passed: true },
      { id: 3, name: "Charlie", score: 58, passed: false },
      { id: 4, name: "Dana", score: 84, passed: true },
    ];
  
    <DataTable state="success"
              data={sampleData}
              columns={[
                { key: "id", label: "ID", sortable: true },
                { key: "name", label: "Name", sortable: true },
                { key: "score", label: "Score", sortable: true },
                {
                  key: "passed",
                  label: "Status",
                  sortable: false,
                  render: (value: unknown) => (value ? "Pass" : "Fail"),
                },
              ]}
              theme="primary"
              striped={true}
            />
 const sampleData = [
      { id: 1, name: "Alice", score: 91, passed: true },
      { id: 2, name: "Bob", score: 75, passed: true },
      { id: 3, name: "Charlie", score: 58, passed: false },
      { id: 4, name: "Dana", score: 84, passed: true },
    ];
  
    <DataTable state="warning"
              data={sampleData}
              columns={[
                { key: "id", label: "ID", sortable: true },
                { key: "name", label: "Name", sortable: true },
                { key: "score", label: "Score", sortable: true },
                {
                  key: "passed",
                  label: "Status",
                  sortable: false,
                  render: (value: unknown) => (value ? "Pass" : "Fail"),
                },
              ]}
              theme="primary"
              striped={true}
            />
 const sampleData = [
      { id: 1, name: "Alice", score: 91, passed: true },
      { id: 2, name: "Bob", score: 75, passed: true },
      { id: 3, name: "Charlie", score: 58, passed: false },
      { id: 4, name: "Dana", score: 84, passed: true },
    ];
  
    <DataTable state="error"
              data={sampleData}
              columns={[
                { key: "id", label: "ID", sortable: true },
                { key: "name", label: "Name", sortable: true },
                { key: "score", label: "Score", sortable: true },
                {
                  key: "passed",
                  label: "Status",
                  sortable: false,
                  render: (value: unknown) => (value ? "Pass" : "Fail"),
                },
              ]}
              theme="primary"
              striped={true}
            />
 const sampleData = [
      { id: 1, name: "Alice", score: 91, passed: true },
      { id: 2, name: "Bob", score: 75, passed: true },
      { id: 3, name: "Charlie", score: 58, passed: false },
      { id: 4, name: "Dana", score: 84, passed: true },
    ];
  
    <DataTable state="info"
              data={sampleData}
              columns={[
                { key: "id", label: "ID", sortable: true },
                { key: "name", label: "Name", sortable: true },
                { key: "score", label: "Score", sortable: true },
                {
                  key: "passed",
                  label: "Status",
                  sortable: false,
                  render: (value: unknown) => (value ? "Pass" : "Fail"),
                },
              ]}
              theme="primary"
              striped={true}
            />

// Variants
 const sampleData = [
      { id: 1, name: "Alice", score: 91, passed: true },
      { id: 2, name: "Bob", score: 75, passed: true },
      { id: 3, name: "Charlie", score: 58, passed: false },
      { id: 4, name: "Dana", score: 84, passed: true },
    ];
  
    <DataTable variant="solid"
              data={sampleData}
              columns={[
                { key: "id", label: "ID", sortable: true },
                { key: "name", label: "Name", sortable: true },
                { key: "score", label: "Score", sortable: true },
                {
                  key: "passed",
                  label: "Status",
                  sortable: false,
                  render: (value: unknown) => (value ? "Pass" : "Fail"),
                },
              ]}
              theme="primary"
              striped={true}
            />
 const sampleData = [
      { id: 1, name: "Alice", score: 91, passed: true },
      { id: 2, name: "Bob", score: 75, passed: true },
      { id: 3, name: "Charlie", score: 58, passed: false },
      { id: 4, name: "Dana", score: 84, passed: true },
    ];
  
    <DataTable variant="outline"
              data={sampleData}
              columns={[
                { key: "id", label: "ID", sortable: true },
                { key: "name", label: "Name", sortable: true },
                { key: "score", label: "Score", sortable: true },
                {
                  key: "passed",
                  label: "Status",
                  sortable: false,
                  render: (value: unknown) => (value ? "Pass" : "Fail"),
                },
              ]}
              theme="primary"
              striped={true}
            />
 const sampleData = [
      { id: 1, name: "Alice", score: 91, passed: true },
      { id: 2, name: "Bob", score: 75, passed: true },
      { id: 3, name: "Charlie", score: 58, passed: false },
      { id: 4, name: "Dana", score: 84, passed: true },
    ];
  
    <DataTable variant="glass"
              data={sampleData}
              columns={[
                { key: "id", label: "ID", sortable: true },
                { key: "name", label: "Name", sortable: true },
                { key: "score", label: "Score", sortable: true },
                {
                  key: "passed",
                  label: "Status",
                  sortable: false,
                  render: (value: unknown) => (value ? "Pass" : "Fail"),
                },
              ]}
              theme="primary"
              striped={true}
            />

// Rounding
 const sampleData = [
      { id: 1, name: "Alice", score: 91, passed: true },
      { id: 2, name: "Bob", score: 75, passed: true },
      { id: 3, name: "Charlie", score: 58, passed: false },
      { id: 4, name: "Dana", score: 84, passed: true },
    ];
  
    <DataTable rounding="none"
              data={sampleData}
              columns={[
                { key: "id", label: "ID", sortable: true },
                { key: "name", label: "Name", sortable: true },
                { key: "score", label: "Score", sortable: true },
                {
                  key: "passed",
                  label: "Status",
                  sortable: false,
                  render: (value: unknown) => (value ? "Pass" : "Fail"),
                },
              ]}
              theme="primary"
              striped={true}
            />
 const sampleData = [
      { id: 1, name: "Alice", score: 91, passed: true },
      { id: 2, name: "Bob", score: 75, passed: true },
      { id: 3, name: "Charlie", score: 58, passed: false },
      { id: 4, name: "Dana", score: 84, passed: true },
    ];
  
    <DataTable rounding="medium"
              data={sampleData}
              columns={[
                { key: "id", label: "ID", sortable: true },
                { key: "name", label: "Name", sortable: true },
                { key: "score", label: "Score", sortable: true },
                {
                  key: "passed",
                  label: "Status",
                  sortable: false,
                  render: (value: unknown) => (value ? "Pass" : "Fail"),
                },
              ]}
              theme="primary"
              striped={true}
            />
 const sampleData = [
      { id: 1, name: "Alice", score: 91, passed: true },
      { id: 2, name: "Bob", score: 75, passed: true },
      { id: 3, name: "Charlie", score: 58, passed: false },
      { id: 4, name: "Dana", score: 84, passed: true },
    ];
  
    <DataTable rounding="large"
              data={sampleData}
              columns={[
                { key: "id", label: "ID", sortable: true },
                { key: "name", label: "Name", sortable: true },
                { key: "score", label: "Score", sortable: true },
                {
                  key: "passed",
                  label: "Status",
                  sortable: false,
                  render: (value: unknown) => (value ? "Pass" : "Fail"),
                },
              ]}
              theme="primary"
              striped={true}
            />

// Shadows
 const sampleData = [
      { id: 1, name: "Alice", score: 91, passed: true },
      { id: 2, name: "Bob", score: 75, passed: true },
      { id: 3, name: "Charlie", score: 58, passed: false },
      { id: 4, name: "Dana", score: 84, passed: true },
    ];
  
    <DataTable shadow="none"
              data={sampleData}
              columns={[
                { key: "id", label: "ID", sortable: true },
                { key: "name", label: "Name", sortable: true },
                { key: "score", label: "Score", sortable: true },
                {
                  key: "passed",
                  label: "Status",
                  sortable: false,
                  render: (value: unknown) => (value ? "Pass" : "Fail"),
                },
              ]}
              theme="primary"
              striped={true}
            />
 const sampleData = [
      { id: 1, name: "Alice", score: 91, passed: true },
      { id: 2, name: "Bob", score: 75, passed: true },
      { id: 3, name: "Charlie", score: 58, passed: false },
      { id: 4, name: "Dana", score: 84, passed: true },
    ];
  
    <DataTable shadow="light"
              data={sampleData}
              columns={[
                { key: "id", label: "ID", sortable: true },
                { key: "name", label: "Name", sortable: true },
                { key: "score", label: "Score", sortable: true },
                {
                  key: "passed",
                  label: "Status",
                  sortable: false,
                  render: (value: unknown) => (value ? "Pass" : "Fail"),
                },
              ]}
              theme="primary"
              striped={true}
            />
 const sampleData = [
      { id: 1, name: "Alice", score: 91, passed: true },
      { id: 2, name: "Bob", score: 75, passed: true },
      { id: 3, name: "Charlie", score: 58, passed: false },
      { id: 4, name: "Dana", score: 84, passed: true },
    ];
  
    <DataTable shadow="strong"
              data={sampleData}
              columns={[
                { key: "id", label: "ID", sortable: true },
                { key: "name", label: "Name", sortable: true },
                { key: "score", label: "Score", sortable: true },
                {
                  key: "passed",
                  label: "Status",
                  sortable: false,
                  render: (value: unknown) => (value ? "Pass" : "Fail"),
                },
              ]}
              theme="primary"
              striped={true}
            />

Interaction states

Loading data

Data table
			Status
Loading data

interaction-states.tsx

// Loading
 const sampleData = [
      { id: 1, name: "Alice", score: 91, passed: true },
      { id: 2, name: "Bob", score: 75, passed: true },
      { id: 3, name: "Charlie", score: 58, passed: false },
      { id: 4, name: "Dana", score: 84, passed: true },
    ];
  
    <DataTable loading
              data={sampleData}
              columns={[
                { key: "id", label: "ID", sortable: true },
                { key: "name", label: "Name", sortable: true },
                { key: "score", label: "Score", sortable: true },
                {
                  key: "passed",
                  label: "Status",
                  sortable: false,
                  render: (value: unknown) => (value ? "Pass" : "Fail"),
                },
              ]}
              theme="primary"
              striped={true}
            />

Props API

Data Table props API
				Default	Description
`aria-describedby`	`string`	No	aria	`—`	Accessible description reference for the table. Useful for tying helper or instructional text to the table.
`aria-label`	`string`	No	aria	`—`	Accessible label for screen readers. Use this when there is no visible caption or heading tied to the table.
`aria-labelledby`	`string`	No	aria	`—`	Accessible labelledby reference for the table. Prefer this when a visible heading already labels the table.
`bulkActions`	`((selectedKeys: Array<string \| number>, selectedRows: T[]) => ReactNode)`	No	events	`—`	Optional actions shown only when one or more rows are selected.
`bulkToolbarClassName`	`string`	No	props	`—`	Optional class name for the bulk action toolbar.
`caption`	`string`	No	props	`"Data table"`	Optional visible or screen-reader-only caption text for the table. A table caption is the preferred built-in table label.
`cellClassName`	`((value: unknown, row: T, column: Column<T>, rowIndex: number) => string)`	No	events	`—`	Optional dynamic class name for each cell.
`className`	`string`	No	styling	`—`	Optional class name for the table wrapper.
`colCount`	`number`	No	props	`—`	Total column count override. Helpful when rendering dynamic or grouped columns in advanced cases.
`columnMenuClassName`	`string`	No	props	`—`	Optional class name for the column visibility menu.
`columnOrder`	`(keyof T)[]`	No	props	`—`	Controlled column order.
`columnPinning`	`boolean`	No	props	`false`	Enables column pin/unpin controls.