# DataTable component for Stripe Apps

Use DataTable to display tabular data in your Stripe app.

# v9


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.

## Examples

### Basic

### 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.

### Batch selection

Provide the `batchable` prop with an `onBatchChange` callback to add checkbox selection to each row. The callback receives a record of selected items keyed by their `id`.

### Column reordering

Use the `enableColumnReorder` property to enable column reordering through drag and drop. Use the `onColumnOrderChange` callback to be notified when a user drags columns into a new order.

### Pagination

The `DataTable` supports three pagination modes:

#### Uncontrolled pagination

Pass only the `pageSize` prop. The table manages the page state internally and slices the `items` for each page.

#### Controlled pagination

Pass the `pageSize`, `currentPage`, `totalItems`, and `onPageChange` props. The table uses the page you provide and calls your callback when the user navigates.

#### Cursor pagination

Use this mode for data sources that use [manual](https://docs.stripe.com/pagination.md#manual-pagination) [cursor-based pagination](https://docs.stripe.com/api/pagination.md) and expose a `has_more` boolean signal with no total count. This is a common pattern in many RESTful APIs, including Stripe’s own. Pass the `pageSize`, `currentPage`, `onPageChange`, and `hasMore` props. The table doesn’t slice data (pass the current page’s items directly) and uses `hasMore` to enable or disable the Next button.

### Advanced

Use column pinning, cell formatting, row actions, batch selection, pagination, and column reordering together to build a full-featured data table.

### Currency column

Use the `currency` cell type to format numeric values as currency amounts. Set the `currency` prop to a default ISO 4217 currency code (for example, `USD`) that applies to all rows. To override the currency on a per-row basis, set `currencyKey` to the name of a field in each row item. When that field is present, it takes precedence over the default.

### 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.

### Empty state with action

Pass an `action` inside the `emptyMessage` prop to display a call-to-action button when the table has no rows.

## Props

### 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).                                                                                                          |
| `enableColumnReorder` | (Optional)
  `boolean | undefined`

  Whether it is possible to reorder table columns using drag-and-drop.                                                                                                                                                                                                                                            |
| `enableColumnResize`  | (Optional)
  `boolean | undefined`

  Whether it is possible to resize table columns.                                                                                                                                                                                                                                                                 |
| `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).                                                                                                   |
| `onRowClick`          | (Optional)
  `((item: DataTableItem) => void) | undefined`

  An event handler for when the user clicks a table row.                                                                                                                                                                                                                                  |
| `pagination`          | (Optional)
  `DataTablePagination | undefined`

  Configuration for paginating table rows.

  Related types: [DataTablePagination](https://docs.stripe.com/stripe-apps/components/datatable.md#datatablepagination).                                                                                                                                  |
| `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). |
| `onPageChange`        | (Optional)(Deprecated)
  A callback that is invoked when table page is changed.

  `((pageIndex: number) => void) | undefined`                                                                                                                                                                                                                        |

### 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.                                                                                                     |
| `options` | (Optional)
  `Options | undefined`

  Related types: [Options](https://docs.stripe.com/stripe-apps/components/datatable.md#datetablecell-options). |

### DateTableCell Options

| Property   | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `style`    | (Optional)
  `(("long-year" | "long-year-month" | "long-year-month-day" | "long-year-month-day-weekday" | "long-year-month-day-time" | "long-year-month-day-time-timezone" | "long-month" | "long-month-day" | "long-month-day-weekday" | "long-weekday" | "medium-year-month" | "medium-year-month-day" | "medium-year-month-day-weekday" | "medium-year-month-day-time" | "medium-year-month-day-time-timezone" | "medium-month" | "medium-month-day" | "medium-month-day-weekday" | "medium-month-day-time" | "medium-month-day-time-timezone" | "short-year-month-day" | "short-year-month-day-time" | "short-year-month-day-time-timezone" | "short-year-month-day-time-seconds" | "short-year-month-day-time-seconds-timezone" | "short-month-day" | "short-month-day-time" | "short-month-day-time-timezone" | "short-month-day-time-seconds" | "short-month-day-time-seconds-timezone" | "short-time" | "short-time-timezone" | "short-time-seconds" | "short-time-seconds-timezone") | ("long-year?-month-day" | "long-year?-month-day-weekday" | "long-year-month-day-time-timezone?" | "medium-year?-month" | "medium-year?-month-day" | "medium-year?-month-day-weekday" | "medium-year?-month-day-time" | "medium-year?-month-day-time-timezone?" | "short-year?-month-day" | "short-year?-month-day-time" | "short-year?-month-day-time-timezone?" | "short-year?-month-day-time-seconds" | "short-year?-month-day-time-seconds-timezone?" | "short-time-timezone?" | "short-time-seconds-timezone?")) | undefined`

  A date/time format style. Example outputs (en-US):

| style                                      | output                         |
| ------------------------------------------ | ------------------------------ |
| long-year                                  | 1985                           |
| long-year-month                            | October 1985                   |
| long-year-month-day                        | October 25, 1985               |
| long-year-month-day-weekday                | Friday, October 25, 1985       |
| long-year-month-day-time                   | October 25, 1985 at 5:21 PM    |
| long-year-month-day-time-timezone          | October 25, 1985 at 5:21 PM PT |
| long-month                                 | October                        |
| long-month-day                             | October 25                     |
| long-month-day-weekday                     | Friday, October 25             |
| long-weekday                               | Friday                         |
| medium-year-month                          | Oct 1985                       |
| medium-year-month-day                      | Oct 25, 1985                   |
| medium-year-month-day-weekday              | Fri, Oct 25, 1985              |
| medium-year-month-day-time                 | Oct 25, 1985, 5:21 PM          |
| medium-year-month-day-time-timezone        | Oct 25, 1985, 5:21 PM PT       |
| medium-month                               | Oct                            |
| medium-month-day                           | Oct 25                         |
| medium-month-day-weekday                   | Fri, Oct 25                    |
| medium-month-day-time                      | Oct 25, 5:21 PM                |
| medium-month-day-time-timezone             | Oct 25, 5:21 PM PT             |
| short-year-month-day                       | 10/25/85                       |
| short-year-month-day-time                  | 10/25/85, 5:21 PM              |
| short-year-month-day-time-timezone         | 10/25/85, 5:21 PM PT           |
| short-year-month-day-time-seconds          | 10/25/85, 5:21:00 PM           |
| short-year-month-day-time-seconds-timezone | 10/25/85, 5:21:00 PM PT        |
| short-month-day                            | 10/25                          |
| short-month-day-time                       | 10/25, 5:21 PM                 |
| short-month-day-time-timezone              | 10/25, 5:21 PM PT              |
| short-month-day-time-seconds               | 10/25, 5:21:00 PM              |
| short-month-day-time-seconds-timezone      | 10/25, 5:21:00 PM PT           |
| short-time                                 | 5:21 PM                        |
| short-time-timezone                        | 5:21 PM PT                     |
| short-time-seconds                         | 5:21:00 PM                     |
| short-time-seconds-timezone                | 5:21:00 PM PT                  | |
| `timeZone` | (Optional)
  `string | undefined`

  Valid values are time zone names in [IANA time zone database](https://www.iana.org/time-zones)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |

### 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.                                                                                                                                                                                                                                                               |
| `currencyKey` | (Optional)
  `string | undefined`

  The key of the currency attribute in the table row item. If not provided, the currency falls back to currencyMap (keyed by table item id), and then to the default currency value.                                                                                          |
| `currencyMap` | (Optional)(Deprecated)
  Use `currencyKey` instead. 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.

  `{     [x: string]: CurrencyCode; } | undefined` |

### 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. |

### DataTablePagination

| Property       | Type                                                                                                                                                                                                                                                                                                                                                                                                                        |
| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `pageSize`     | (Required)
  `number`

  The number of rows displayed per page.                                                                                                                                                                                                                                                                                                                                                             |
| `currentPage`  | (Optional)
  `number | undefined`

  The current active page (1-indexed). Enables controlled pagination — the table reflects this value instead of managing page state internally. Clamped to the last page when it exceeds the total number of pages.                                                                                                                                                                      |
| `onPageChange` | (Optional)
  `((pageNumber: number) => void) | undefined`

  A callback that is invoked when the user navigates to a different page. When used with `currentPage`, the table is fully controlled — the callback receives the target page number and the consumer is responsible for updating `currentPage`. When used without `currentPage`, page state is managed internally and the callback is called as a notification. |
| `totalItems`   | (Optional)
  `number | undefined`

  The total number of items across all pages. Only taken into account when `currentPage` is also provided; otherwise defaults to the length of `items`.                                                                                                                                                                                                                                  |

### DataTableRowAction

This is a union type. It can be one of: [TableRowLink](https://docs.stripe.com/stripe-apps/components/datatable.md#tablerowlink), [TableRowAction](https://docs.stripe.com/stripe-apps/components/datatable.md#tablerowaction).

### TableRowLink

| Property | Type                                                                                                                                                                               |
| -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `href`   | (Required)
  `string | RouteDescriptor`

  The href of the link.

  Related types: [RouteDescriptor](https://docs.stripe.com/stripe-apps/components/datatable.md#routedescriptor). |
| `id`     | (Required)
  `string`

  The unique identifier for the action.                                                                                                                     |
| `label`  | (Required)
  `string`

  The label of the action.                                                                                                                                  |
| `type`   | (Optional)
  `("default" | "destructive") | undefined`

  The type of the action.                                                                                                  |

### RouteDescriptor

This is a union type. It can be one of: [BalanceOverviewRoute](https://docs.stripe.com/stripe-apps/components/datatable.md#balanceoverviewroute), [BillingRoute](https://docs.stripe.com/stripe-apps/components/datatable.md#billingroute), [CustomersRoute](https://docs.stripe.com/stripe-apps/components/datatable.md#customersroute), [CustomerDetailsRoute](https://docs.stripe.com/stripe-apps/components/datatable.md#customerdetailsroute), [DashboardRoute](https://docs.stripe.com/stripe-apps/components/datatable.md#dashboardroute), [FullPageRoute](https://docs.stripe.com/stripe-apps/components/datatable.md#fullpageroute), [InvoiceDetailsRoute](https://docs.stripe.com/stripe-apps/components/datatable.md#invoicedetailsroute), [InvoicesRoute](https://docs.stripe.com/stripe-apps/components/datatable.md#invoicesroute), [OnboardingRoute](https://docs.stripe.com/stripe-apps/components/datatable.md#onboardingroute), [PaymentDetailsRoute](https://docs.stripe.com/stripe-apps/components/datatable.md#paymentdetailsroute), [PaymentReviewDetailsRoute](https://docs.stripe.com/stripe-apps/components/datatable.md#paymentreviewdetailsroute), [PaymentsRoute](https://docs.stripe.com/stripe-apps/components/datatable.md#paymentsroute), [ProductDetailsRoute](https://docs.stripe.com/stripe-apps/components/datatable.md#productdetailsroute), [ProductsRoute](https://docs.stripe.com/stripe-apps/components/datatable.md#productsroute), [ReportsHubRoute](https://docs.stripe.com/stripe-apps/components/datatable.md#reportshubroute), [RevenueRecognitionRoute](https://docs.stripe.com/stripe-apps/components/datatable.md#revenuerecognitionroute), [ShippingRateDetailsRoute](https://docs.stripe.com/stripe-apps/components/datatable.md#shippingratedetailsroute), [ShippingRatesRoute](https://docs.stripe.com/stripe-apps/components/datatable.md#shippingratesroute), [SubscriptionDetailsRoute](https://docs.stripe.com/stripe-apps/components/datatable.md#subscriptiondetailsroute), [SubscriptionsRoute](https://docs.stripe.com/stripe-apps/components/datatable.md#subscriptionsroute), [TaxReportingLocationsRoute](https://docs.stripe.com/stripe-apps/components/datatable.md#taxreportinglocationsroute), [TaxReportingRoute](https://docs.stripe.com/stripe-apps/components/datatable.md#taxreportingroute).

### BalanceOverviewRoute

| Property    | Type                                                                                                                                   |
| ----------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| `name`      | (Required)
  `"balanceOverview"`                                                                                                       |
| `envParams` | (Optional)
  `{     [x: string]: string; } | undefined`

  Query params that are passed to Extension views via the `environment` prop. |

### BillingRoute

| Property    | Type                                                                                                                                   |
| ----------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| `name`      | (Required)
  `"billing"`                                                                                                               |
| `envParams` | (Optional)
  `{     [x: string]: string; } | undefined`

  Query params that are passed to Extension views via the `environment` prop. |

### CustomersRoute

| Property    | Type                                                                                                                                   |
| ----------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| `name`      | (Required)
  `"customers"`                                                                                                             |
| `envParams` | (Optional)
  `{     [x: string]: string; } | undefined`

  Query params that are passed to Extension views via the `environment` prop. |

### CustomerDetailsRoute

| Property    | Type                                                                                                                                       |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| `name`      | (Required)
  `"customerDetails"`                                                                                                           |
| `params`    | (Required)
  `Params`

  Related types: [Params](https://docs.stripe.com/stripe-apps/components/datatable.md#customerdetailsroute-params). |
| `envParams` | (Optional)
  `{     [x: string]: string; } | undefined`

  Query params that are passed to Extension views via the `environment` prop.     |

### CustomerDetailsRoute Params

| Property     | Type                                             |
| ------------ | ------------------------------------------------ |
| `customerId` | (Required)
  `string`

  The id of the customer. |

### DashboardRoute

| Property    | Type                                                                                                                                   |
| ----------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| `name`      | (Required)
  `"dashboard"`                                                                                                             |
| `envParams` | (Optional)
  `{     [x: string]: string; } | undefined`

  Query params that are passed to Extension views via the `environment` prop. |

### FullPageRoute

| Property    | Type                                                                                                                                            |
| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| `name`      | (Required)
  `"fullPage"`                                                                                                                       |
| `envParams` | (Optional)
  `{     [x: string]: string; } | undefined`

  Query params that are passed to Extension views via the `environment` prop.          |
| `params`    | (Optional)
  `Params | undefined`

  Related types: [Params](https://docs.stripe.com/stripe-apps/components/datatable.md#fullpageroute-params). |

### FullPageRoute Params

| Property | Type                                                                              |
| -------- | --------------------------------------------------------------------------------- |
| `appId`  | (Optional)
  `string | undefined`

  The id of the app.                           |
| `tabId`  | (Optional)
  `string | undefined`

  The id of the tab that needs to be selected. |

### InvoiceDetailsRoute

| Property    | Type                                                                                                                                      |
| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| `name`      | (Required)
  `"invoiceDetails"`                                                                                                           |
| `params`    | (Required)
  `Params`

  Related types: [Params](https://docs.stripe.com/stripe-apps/components/datatable.md#invoicedetailsroute-params). |
| `envParams` | (Optional)
  `{     [x: string]: string; } | undefined`

  Query params that are passed to Extension views via the `environment` prop.    |

### InvoiceDetailsRoute Params

| Property    | Type                                            |
| ----------- | ----------------------------------------------- |
| `invoiceId` | (Required)
  `string`

  The id of the invoice. |

### InvoicesRoute

| Property    | Type                                                                                                                                   |
| ----------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| `name`      | (Required)
  `"invoices"`                                                                                                              |
| `envParams` | (Optional)
  `{     [x: string]: string; } | undefined`

  Query params that are passed to Extension views via the `environment` prop. |

### OnboardingRoute

| Property    | Type                                                                                                                                              |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| `name`      | (Required)
  `"onboarding"`                                                                                                                       |
| `envParams` | (Optional)
  `{     [x: string]: string; } | undefined`

  Query params that are passed to Extension views via the `environment` prop.            |
| `params`    | (Optional)
  `Params | undefined`

  Related types: [Params](https://docs.stripe.com/stripe-apps/components/datatable.md#onboardingroute-params). |

### OnboardingRoute Params

| Property | Type                                                    |
| -------- | ------------------------------------------------------- |
| `appId`  | (Optional)
  `string | undefined`

  The id of the app. |

### PaymentDetailsRoute

| Property    | Type                                                                                                                                      |
| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| `name`      | (Required)
  `"paymentDetails"`                                                                                                           |
| `params`    | (Required)
  `Params`

  Related types: [Params](https://docs.stripe.com/stripe-apps/components/datatable.md#paymentdetailsroute-params). |
| `envParams` | (Optional)
  `{     [x: string]: string; } | undefined`

  Query params that are passed to Extension views via the `environment` prop.    |

### PaymentDetailsRoute Params

| Property    | Type                                            |
| ----------- | ----------------------------------------------- |
| `paymentId` | (Required)
  `string`

  The id of the payment. |

### PaymentReviewDetailsRoute

| Property    | Type                                                                                                                                            |
| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| `name`      | (Required)
  `"paymentReviewDetails"`                                                                                                           |
| `params`    | (Required)
  `Params`

  Related types: [Params](https://docs.stripe.com/stripe-apps/components/datatable.md#paymentreviewdetailsroute-params). |
| `envParams` | (Optional)
  `{     [x: string]: string; } | undefined`

  Query params that are passed to Extension views via the `environment` prop.          |

### PaymentReviewDetailsRoute Params

| Property    | Type                                            |
| ----------- | ----------------------------------------------- |
| `paymentId` | (Required)
  `string`

  The id of the payment. |

### PaymentsRoute

| Property    | Type                                                                                                                                   |
| ----------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| `name`      | (Required)
  `"payments"`                                                                                                              |
| `envParams` | (Optional)
  `{     [x: string]: string; } | undefined`

  Query params that are passed to Extension views via the `environment` prop. |

### ProductDetailsRoute

| Property    | Type                                                                                                                                      |
| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| `name`      | (Required)
  `"productDetails"`                                                                                                           |
| `params`    | (Required)
  `Params`

  Related types: [Params](https://docs.stripe.com/stripe-apps/components/datatable.md#productdetailsroute-params). |
| `envParams` | (Optional)
  `{     [x: string]: string; } | undefined`

  Query params that are passed to Extension views via the `environment` prop.    |

### ProductDetailsRoute Params

| Property    | Type                                            |
| ----------- | ----------------------------------------------- |
| `productId` | (Required)
  `string`

  The id of the product. |

### ProductsRoute

| Property    | Type                                                                                                                                   |
| ----------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| `name`      | (Required)
  `"products"`                                                                                                              |
| `envParams` | (Optional)
  `{     [x: string]: string; } | undefined`

  Query params that are passed to Extension views via the `environment` prop. |

### ReportsHubRoute

| Property    | Type                                                                                                                                   |
| ----------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| `name`      | (Required)
  `"reportsHub"`                                                                                                            |
| `envParams` | (Optional)
  `{     [x: string]: string; } | undefined`

  Query params that are passed to Extension views via the `environment` prop. |

### RevenueRecognitionRoute

| Property    | Type                                                                                                                                   |
| ----------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| `name`      | (Required)
  `"revenueRecognition"`                                                                                                    |
| `envParams` | (Optional)
  `{     [x: string]: string; } | undefined`

  Query params that are passed to Extension views via the `environment` prop. |

### ShippingRateDetailsRoute

| Property    | Type                                                                                                                                           |
| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| `name`      | (Required)
  `"shippingRateDetails"`                                                                                                           |
| `params`    | (Required)
  `Params`

  Related types: [Params](https://docs.stripe.com/stripe-apps/components/datatable.md#shippingratedetailsroute-params). |
| `envParams` | (Optional)
  `{     [x: string]: string; } | undefined`

  Query params that are passed to Extension views via the `environment` prop.         |

### ShippingRateDetailsRoute Params

| Property         | Type                                                  |
| ---------------- | ----------------------------------------------------- |
| `shippingRateId` | (Required)
  `string`

  The id of the shipping rate. |

### ShippingRatesRoute

| Property    | Type                                                                                                                                   |
| ----------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| `name`      | (Required)
  `"shippingRates"`                                                                                                         |
| `envParams` | (Optional)
  `{     [x: string]: string; } | undefined`

  Query params that are passed to Extension views via the `environment` prop. |

### SubscriptionDetailsRoute

| Property    | Type                                                                                                                                           |
| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| `name`      | (Required)
  `"subscriptionDetails"`                                                                                                           |
| `params`    | (Required)
  `Params`

  Related types: [Params](https://docs.stripe.com/stripe-apps/components/datatable.md#subscriptiondetailsroute-params). |
| `envParams` | (Optional)
  `{     [x: string]: string; } | undefined`

  Query params that are passed to Extension views via the `environment` prop.         |

### SubscriptionDetailsRoute Params

| Property         | Type                                                 |
| ---------------- | ---------------------------------------------------- |
| `subscriptionId` | (Required)
  `string`

  The id of the subscription. |

### SubscriptionsRoute

| Property    | Type                                                                                                                                   |
| ----------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| `name`      | (Required)
  `"subscriptions"`                                                                                                         |
| `envParams` | (Optional)
  `{     [x: string]: string; } | undefined`

  Query params that are passed to Extension views via the `environment` prop. |

### TaxReportingLocationsRoute

| Property    | Type                                                                                                                                   |
| ----------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| `name`      | (Required)
  `"taxReportingLocations"`                                                                                                 |
| `envParams` | (Optional)
  `{     [x: string]: string; } | undefined`

  Query params that are passed to Extension views via the `environment` prop. |

### TaxReportingRoute

| Property    | Type                                                                                                                                   |
| ----------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| `name`      | (Required)
  `"taxReporting"`                                                                                                          |
| `envParams` | (Optional)
  `{     [x: string]: string; } | undefined`

  Query params that are passed to Extension views via the `environment` prop. |

### TableRowAction

| 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.                                                                                                                                                    |


## 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)