---
title: "DataTable"
description: "DataTable takes arrays of arrays of data and handles them correctly to build a table. It supports pinnable columns unlike Table, but is less flexible."
sidebar_label: "DataTable"
slug: /reference/components/datatable
---

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

# DataTable

DataTable takes arrays of arrays of data and handles them correctly to build a table. It supports pinnable columns unlike Table, but is less flexible.

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

## Live demo

<ComponentDemo name="DataTable" />

## Props

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `columns` | `array` | Yes |  |
| `data` | `array` | Yes |  |
| `alternateRowBackground` | `boolean` |  |  |
| `customColumnComponentMap` | `DataTableCustomComponentMap` |  |  |
| `defaultTextSize` | `union` |  |  |
| `headerHeight` | `number` |  |  |
| `moreContentComponent` | `ComponentType` |  | When tapping the eye icon, a modal is shown with more info about the row. |
| `moreContentExtraData` | `array` |  |  |
| `page` | `number` |  |  |
| `pinnedColumns` | `number` |  |  |
| `rowHeight` | `number` |  |  |
| `setPage` | `reflection` |  |  |
| `setSortColumn` | `reflection` |  |  |
| `sortColumn` | `ColumnSortInterface` |  |  |
| `totalPages` | `number` |  |  |