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

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

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

## 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 `onColumnOrderChange` callback to respond when a user drags columns into a new order. Store the columns array in state and pass the updated order back to `columns`. Reorder columns programmatically by updating the `columns` array directly.

## Async pagination

Provide a `pagination` object with `pageSize`, `currentPage`, `totalItems`, and `onPageChange` to control pagination externally. Use this pattern for server-side data fetching where each page loads asynchronously.

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

## Empty state with action

Pass an `action` inside the `emptyMessage` prop to display a call-to-action button 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)