---
title: "Table"
description: "Table with sizes and variants"
source: "Equality"
---
import { TableDemo } from "@demo/components/demo/table";
import { ELEVATION } from "@eqtylab/equality";

## Content Options

### Unclickable

<TableDemo client:only="react" />

### Clickable

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

### With Actions

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

### Column items with custom component

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

### 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" />

## Style Options

### With Border

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

## 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} />

### Floating

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

## Elevations With Border

### Sunken

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

### Base (default)

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

### Raised

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

### Overlay

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

### Floating

<TableDemo
  client:only="react"
  variant="with-border"
  elevation={ELEVATION.FLOATING}
/>

## 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`, `floating` | `base`  | ❌       |
| `emptyState` | Content rendered when rows is empty, spanning all columns    | `ReactNode`                                       |         | ❌       |