Table

Overview

The Table component displays structured data in rows and columns. It supports clickable rows, sortable column headers, bordered styling, elevation levels, and empty state messaging. Column and cell content accepts any ReactNode, allowing badges, buttons, and other components inline.

Usage

Import the component:

import { Table } from "@eqtylab/equality";

Basic usage with required properties:

<Table
  columns={[
    { key: "name", content: "Name" },
    { key: "email", content: "Email" },
  ]}
  rows={[
    {
      key: "1",
      cells: [
        { key: "name", content: "Alice Cooper" },
        { key: "email", content: "alice@example.com" },
      ],
    },
  ]}
/>

Variants

Default

Clickable Rows

Rows accept an onClick handler, which applies hover and cursor styles.

Sortable Columns

Use <SortButton> in column headers to add interactive sort controls.

Usage

import { SortButton, Table } from "@eqtylab/equality";

<Table
  columns={[
    {
      key: "name",
      content: (
        <SortButton
          field="name"
          sortField={sortField}
          sortDirection={sortDirection}
          onSort={handleSort}
        >
          Name
        </SortButton>
      ),
    },
  ]}
  rows={rows}
/>;

With Border

Apply a border to tables with the border prop. This should be added most places <Table> is used, except for when it lives within a different container which already has a border applied.

Empty State

When rows is empty and emptyState is provided, the table keeps column headers visible and renders the empty state content spanning all columns.

Empty State with Custom Component

The emptyState prop accepts any ReactNode, so you can pass a custom component like EmptyTableState.

Elevations

Sunken

Base (default)

Raised

Overlay

Props