---
title: "Table"
description: "In this case, Table is a pattern, not a component. Build a table by sorting the table component items into rows. Each row should have an alternating color."
sidebar_label: "Table"
slug: /reference/components/table
---

import ComponentDemo from '@site/src/components/ComponentDemo';

# Table

In this case, Table is a pattern, not a component. Build a table by sorting the table component items into rows. Each row should have an alternating color.

**Package:** `@terreno/ui`  
**Categories:** Pattern  
**Props interface:** `TableProps`  
**Story source:** [`demo/stories/Table.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Table.stories.tsx)

## Live demo

<ComponentDemo name="Table" />

## Props

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `children` | `union` | Yes | Must be instances of TableHeader, TableRow, and/or TableFooter components. |
| `columns` | `array` | Yes | The size of the table title. Can be one of "sm", "md", "lg", or "xl". |
| `alternateRowBackground` | `boolean` |  | If true, alternate rows will have a light gray background. Defaults to true. |
| `borderStyle` | `union` |  | Specify a border width for Table: "sm" is 1px. |
| `extraControls` | `ReactElement` |  | Extra controls to render below the table next to pagination |
| `maxHeight` | `DimensionValue` |  | Use numbers for pixels:  |
| `more` | `boolean` |  | If true, the table will render a next page button. Defaults to true. |
| `page` | `number` |  | Set the page outside of the Table |
| `setPage` | `reflection` |  | Set the page outside of the Table |
| `sort` | `ColumnSortInterface` |  | Control sort outside of the Table |
| `stickyHeader` | `boolean` |  | If true, the header will stick to the top of the table when scrolling. Defaults to true. |
| `totalPages` | `number` |  | Set the total number of pages of the Table |