# DataTable component for Stripe Apps Use DataTable to display tabular data in your Stripe app. # v8 > This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/datatable?app-sdk-version=8. The `DataTable` component isn’t available in the selected SDK version. # v9 > This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/datatable?app-sdk-version=9. To add the `DataTable` component to your app: ```js import {DataTable} from '@stripe/ui-extension-sdk/ui'; ``` The `DataTable` component provides a structured way to display tabular data within a Stripe App. It supports column configuration, row actions, pagination, batch selection, and column reordering out of the box. ### DataTable props | Property | Type | | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `columns` | (Required) `DataTableColumn[]` Related types: [DataTableColumn](https://docs.stripe.com/stripe-apps/components/datatable.md#datatablecolumn). | | `items` | (Required) `DataTableItem[]` | | `batchable` | (Optional) `Batchable | undefined` Defines the configuration for multi-select row behavior. Related types: [Batchable](https://docs.stripe.com/stripe-apps/components/datatable.md#batchable). | | `emptyMessage` | (Optional) `(string | DataTableEmptyMessage) | undefined` The message to display when the table is empty. Related types: [DataTableEmptyMessage](https://docs.stripe.com/stripe-apps/components/datatable.md#datatableemptymessage). | | `loading` | (Optional) `boolean | undefined` Set the table to a loading state. | | `onColumnOrderChange` | (Optional) `((order: DataTableColumn[]) => void) | undefined` A callback that is invoked when table column order is changed. Related types: [DataTableColumn](https://docs.stripe.com/stripe-apps/components/datatable.md#datatablecolumn). | | `onPageChange` | (Optional) `((pageIndex: number) => void) | undefined` A callback that is invoked when table page is changed. | | `onRowClick` | (Optional) `((item: DataTableItem) => void) | undefined` An event handler for when the user clicks a table row. | | `rowActions` | (Optional) `(DataTableRowAction | DataTableRowActionGroup)[] | undefined` Actions to display in the row. Related types: [DataTableRowActionGroup](https://docs.stripe.com/stripe-apps/components/datatable.md#datatablerowactiongroup), [DataTableRowAction](https://docs.stripe.com/stripe-apps/components/datatable.md#datatablerowaction). | ### DataTableColumn | Property | Type | | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `key` | (Required) `string` The unique identifier for the column. | | `label` | (Required) `string` The label to display for the column. | | `cell` | (Optional) `DataTableCell | undefined` Cell format options. Related types: [DataTableCell](https://docs.stripe.com/stripe-apps/components/datatable.md#datatablecell). | | `hideHeaderLabel` | (Optional) `boolean | undefined` Sets the column label to be hidden. | | `pinned` | (Optional) `boolean | undefined` Whether the column is pinned. | ### DataTableCell This is a union type. It can be one of: [TextTableCell](https://docs.stripe.com/stripe-apps/components/datatable.md#texttablecell), [LinkTableCell](https://docs.stripe.com/stripe-apps/components/datatable.md#linktablecell), [DateTableCell](https://docs.stripe.com/stripe-apps/components/datatable.md#datetablecell), [IdTableCell](https://docs.stripe.com/stripe-apps/components/datatable.md#idtablecell), [StatusTableCell](https://docs.stripe.com/stripe-apps/components/datatable.md#statustablecell), [CurrencyTableCell](https://docs.stripe.com/stripe-apps/components/datatable.md#currencytablecell). ### TextTableCell | Property | Type | | -------- | ---------------------------------------------- | | `type` | (Required) `"text"` The type of the cell. | ### LinkTableCell | Property | Type | | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `type` | (Required) `"link"` The type of the cell. | | `linkMap` | (Optional) `{ [x: string]: string; } | undefined` A map of cell values (URLs) to human-readable display text for links. Each key is a URL that may appear as a cell value, and its corresponding value is the text to display for that link. If a cell value is not found in the map, the raw URL is shown as the link text instead. | ### DateTableCell | Property | Type | | -------- | ---------------------------------------------- | | `type` | (Required) `"date"` The type of the cell. | ### IdTableCell | Property | Type | | -------- | -------------------------------------------- | | `type` | (Required) `"id"` The type of the cell. | ### StatusTableCell | Property | Type | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | | `statusMap` | (Required) `{ [x: string]: "neutral" | "urgent" | "warning" | "negative" | "positive" | "info"; }` A map of cell values to status types. | | `type` | (Required) `"status"` The type of the cell. | ### CurrencyTableCell | Property | Type | | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `currency` | (Required) `string` Three-letter ISO-4217 currency code or a non-ISO currency code like `USDC` for USD Coin or `BTC` for Bitcoin. | | `type` | (Required) `"currency"` The type of the cell. | | `currencyMap` | (Optional) `{ [x: string]: CurrencyCode; } | undefined` Specifies a per-item currency code override, keyed by table item id. If an item id is not present in the map, the value of currency is used. This allows a single column to display multiple currencies. | ### Batchable | Property | Type | | --------------- | --------------------------------------------------------------------------- | | `onBatchChange` | (Required) `(selectedItems: { [x: string]: DataTableItem; }) => void` | ### DataTableEmptyMessage | Property | Type | | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `action` | (Required) `Action` An call to action displayed below the message. Related types: [Action](https://docs.stripe.com/stripe-apps/components/datatable.md#datatableemptymessage-action). | | `message` | (Required) `string` A custom message to display when the table is empty. | ### DataTableEmptyMessage Action | Property | Type | | -------- | ------------------------------------------------- | | `href` | (Required) `string` The link of the action. | | `label` | (Required) `string` The label of the action. | ### DataTableRowAction | Property | Type | | --------- | --------------------------------------------------------------------------------- | | `id` | (Required) `string` The unique identifier for the action. | | `label` | (Required) `string` The label of the action. | | `onPress` | (Required) `(item: DataTableItem) => void` An event handler for the action. | | `type` | (Optional) `("default" | "destructive") | undefined` The type of the action. | ### DataTableRowActionGroup | Property | Type | | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `actions` | (Required) `DataTableRowAction[]` The actions to display in the action group. Related types: [DataTableRowAction](https://docs.stripe.com/stripe-apps/components/datatable.md#datatablerowaction). | | `id` | (Required) `string` The unique identifier for the action group. | | `label` | (Required) `string` The label of the action group. | ## LinkTableCell with linkMap Use the `LinkTableCell` cell type to render cell values as clickable links. By default, when you set a column’s cell type to `link`, the raw URL from the cell value is displayed as both the link text and the `href`. Use the optional `linkMap` prop to provide human-readable display text for specific URLs. `linkMap` is an object where each key is a URL that may appear as a cell value, and the corresponding value is the text to display for that link. If a cell’s URL is not found in the `linkMap`, the raw URL is shown as the link text instead. In this example, the **Website** column uses `linkMap` to display friendly names like “Stripe Docs” and “Stripe Home” instead of raw URLs. The last row shows the fallback behavior: because `https://example.com/liam-blog` is not in the `linkMap`, it displays the full URL. The **Profile** column has no `linkMap`, so all values display as raw URLs. ## Advanced Use column pinning, cell formatting, row actions, batch selection, pagination, and column reordering together to build a full-featured data table. ## Empty state Render an empty table by passing an empty `items` array. ## Custom empty message Provide the `emptyMessage` prop to customize the message shown when the table has no rows. ## See also - [Design patterns to follow](https://docs.stripe.com/stripe-apps/patterns.md) - [Style your app](https://docs.stripe.com/stripe-apps/style.md) - [UI testing](https://docs.stripe.com/stripe-apps/ui-testing.md)