---
title: "Table"
description: "A data table for displaying structured information in rows and columns."
source: "Equality"
---
import { TableDemo } from "@demo/components/demo/table";
import { ELEVATION } from "@eqtylab/equality";

## 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:

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

Basic usage with required properties:

```tsx
<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

<TableDemo client:only="react" />

### Clickable Rows

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

<TableDemo client:only="react" variant="clickable" />

### Sortable Columns

Use [`<SortButton>`](/components/sort-button) in column headers to add interactive sort controls.

<TableDemo client:only="react" variant="with-sorter" />

#### Usage

```tsx
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.

<TableDemo client:only="react" variant="with-border" />

### 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.

<TableDemo client:only="react" variant="empty-state" />

### Empty State with Custom Component

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

<TableDemo client:only="react" variant="empty-state-custom" />

## Elevations

### Sunken

<TableDemo client:only="react" elevation={ELEVATION.SUNKEN} />

### Base (default)

<TableDemo client:only="react" elevation={ELEVATION.BASE} />

### Raised

<TableDemo client:only="react" elevation={ELEVATION.RAISED} />

### Overlay

<TableDemo client:only="react" elevation={ELEVATION.OVERLAY} />

## Props

| Name         | Description                                                  | Type                                  | Default | Required |
| ------------ | ------------------------------------------------------------ | ------------------------------------- | ------- | -------- |
| `columns`    | Column definitions with key, content, and optional className | `TableColumn[]`                       |         | ✅       |
| `rows`       | Row data with key, cells, and optional onClick/className     | `TableRowData[]`                      |         | ✅       |
| `border`     | Adds a border and rounded corners around the table           | `boolean`                             | `false` | ❌       |
| `elevation`  | Controls the shadow and border elevation level               | `sunken`, `base`, `raised`, `overlay` | `base`  | ❌       |
| `emptyState` | Content rendered when rows is empty, spanning all columns    | `ReactNode`                           |         | ❌       |