Tables

Tables organize data into rows and columns. Use markdown tables for quick, simple tables. Use Table components for highlighting, alignment, and other options.

Usage

<Table>
  <Row header>
    <Cell>Name</Cell>
    <Cell>Type</Cell>
  </Row>
  <Row>
    <Cell>id</Cell>
    <Cell>string</Cell>
  </Row>
</Table>

Markdown Tables

The quickest way to create a table. Use pipes (|) to separate columns and hyphens (-) for the header row:

| Name | Type | Description |
|------|------|-------------|
| id | string | Unique identifier |
| email | string | User email address |

Table Component

For more control, use the <Table>, <Row>, and <Cell> components:

<Table>
  <Row header>
    <Cell>Name</Cell>
    <Cell>Type</Cell>
    <Cell>Description</Cell>
  </Row>
  <Row>
    <Cell>id</Cell>
    <Cell>string</Cell>
    <Cell>Unique identifier</Cell>
  </Row>
  <Row>
    <Cell>email</Cell>
    <Cell>string</Cell>
    <Cell>User email address</Cell>
  </Row>
</Table>

Striped Rows

Add alternating row backgrounds for better readability:

<Table striped>
  <Row header>
    <Cell>Parameter</Cell>
    <Cell>Value</Cell>
  </Row>
  <Row><Cell>timeout</Cell><Cell>30s</Cell></Row>
  <Row><Cell>retries</Cell><Cell>3</Cell></Row>
  <Row><Cell>backoff</Cell><Cell>exponential</Cell></Row>
  <Row><Cell>maxDelay</Cell><Cell>60s</Cell></Row>
</Table>

Bordered & Compact

Add borders between cells and reduce padding:

<Table bordered compact>
  <Row header>
    <Cell>A</Cell>
    <Cell>B</Cell>
    <Cell>C</Cell>
  </Row>
  <Row>
    <Cell>1</Cell>
    <Cell>2</Cell>
    <Cell>3</Cell>
  </Row>
</Table>

Row Highlighting

Highlight entire rows to draw attention:

<Table>
  <Row header>
    <Cell>Field</Cell>
    <Cell>Required</Cell>
    <Cell>Description</Cell>
  </Row>
  <Row highlight highlightColor="warning">
    <Cell>api_key</Cell>
    <Cell>Yes</Cell>
    <Cell>Your API authentication key</Cell>
  </Row>
  <Row>
    <Cell>limit</Cell>
    <Cell>No</Cell>
    <Cell>Maximum results (default: 100)</Cell>
  </Row>
</Table>

Available highlight colors: primary, success, warning, error, info

Cell Highlighting

Highlight individual cells for status indicators:

<Table>
  <Row header>
    <Cell>Service</Cell>
    <Cell>Status</Cell>
  </Row>
  <Row>
    <Cell>API</Cell>
    <Cell highlight highlightColor="success">Operational</Cell>
  </Row>
  <Row>
    <Cell>Database</Cell>
    <Cell highlight highlightColor="warning">Degraded</Cell>
  </Row>
  <Row>
    <Cell>Storage</Cell>
    <Cell highlight highlightColor="error">Outage</Cell>
  </Row>
</Table>

Cell Alignment

Control text alignment per cell:

<Table>
  <Row header>
    <Cell align="left">Left</Cell>
    <Cell align="center">Center</Cell>
    <Cell align="right">Right</Cell>
  </Row>
  <Row>
    <Cell align="left">Text</Cell>
    <Cell align="center">Text</Cell>
    <Cell align="right">$99.99</Cell>
  </Row>
</Table>

Column & Row Spanning

Merge cells across columns or rows:

<Table bordered>
  <Row header>
    <Cell>Category</Cell>
    <Cell>Item</Cell>
    <Cell>Price</Cell>
  </Row>
  <Row>
    <Cell rowSpan={2}>Fruits</Cell>
    <Cell>Apple</Cell>
    <Cell>$1.00</Cell>
  </Row>
  <Row>
    <Cell>Banana</Cell>
    <Cell>$0.50</Cell>
  </Row>
  <Row>
    <Cell colSpan={2}>Subtotal</Cell>
    <Cell>$1.50</Cell>
  </Row>
</Table>

Visible Caption

Show an accessible table caption above the table:

<Table caption="Monthly Revenue by Region" captionVisible>
  <Row header>
    <Cell>Region</Cell>
    <Cell align="right">Revenue</Cell>
  </Row>
  <Row>
    <Cell>North America</Cell>
    <Cell align="right">$1.2M</Cell>
  </Row>
</Table>

Sortable Columns

Turn on column sorting with the sortable prop. Click a column header to sort:

<Table sortable>
  <Row header>
    <Cell>Name</Cell>
    <Cell>Price</Cell>
    <Cell>Stock</Cell>
  </Row>
  <Row><Cell>Widget A</Cell><Cell>$29.99</Cell><Cell>150</Cell></Row>
  <Row><Cell>Gadget B</Cell><Cell>$49.99</Cell><Cell>75</Cell></Row>
  <Row><Cell>Tool C</Cell><Cell>$19.99</Cell><Cell>200</Cell></Row>
  <Row><Cell>Device D</Cell><Cell>$99.99</Cell><Cell>25</Cell></Row>
</Table>

Combine sortable with other props like striped:

<Table sortable striped>
  <Row header>
    <Cell>Team</Cell>
    <Cell>Wins</Cell>
    <Cell>Losses</Cell>
  </Row>
  <Row><Cell>Eagles</Cell><Cell>12</Cell><Cell>4</Cell></Row>
  <Row><Cell>Bears</Cell><Cell>8</Cell><Cell>8</Cell></Row>
  <Row><Cell>Lions</Cell><Cell>10</Cell><Cell>6</Cell></Row>
</Table>

Props

Table

Row

Cell

What's Next?