# DetailPageTable component for Stripe Apps

Use DetailPageTable to render your app in Stripe dashboard pages.

# v8

> This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/detailpagetable?app-sdk-version=8.

The `DetailPageTable` 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/detailpagetable?app-sdk-version=9.

To add the `DetailPageTable` component to your app:

```js
import {DetailPageTable} from '@stripe/ui-extension-sdk/ui';
```

The `DetailPageTable` component provides a standardized way to display and organize content within the Stripe Dashboard. It creates a consistent UI section that seamlessly integrates with Stripe’s design system. It’s specifically designed for displaying tabular data in a format that matches the surrounding Dashboard experience. It provides a consistent way to show data within the Stripe Dashboard that aligns with Stripe’s design system.

### DetailPageTable props

| Property            | Type                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `columns`           | (Required)
  `DetailPageModuleTableColumn[]`

  The columns to display in the table.

  Related types: [DetailPageModuleTableColumn](https://docs.stripe.com/stripe-apps/components/detailpagetable.md#detailpagemoduletablecolumn).                                                                                                                                                                                                      |
| `pending`           | (Required)
  `boolean`

  Sets the visual style to pending.                                                                                                                                                                                                                                                                                                                                                                               |
| `createAction`      | (Optional)
  `(() => void) | undefined`

  An event handler to create a new item.                                                                                                                                                                                                                                                                                                                                                         |
| `emptyMessage`      | (Optional)
  `(string | DetailPageModuleEmptyActionMessage) | undefined`

  The message to display when the table is empty.

  Related types: [DetailPageModuleEmptyActionMessage](https://docs.stripe.com/stripe-apps/components/detailpagetable.md#detailpagemoduleemptyactionmessage).                                                                                                                                                 |
| `error`             | (Optional)
  `DetailPageModuleDisplayError | undefined`

  Sets the visual style to `error`, displaying an error message.

  Related types: [DetailPageModuleDisplayError](https://docs.stripe.com/stripe-apps/components/detailpagetable.md#detailpagemoduledisplayerror).                                                                                                                                                               |
| `extraActions`      | (Optional)
  `DetailPageModuleAction[] | undefined`

  An array of extra actions to display in the module.

  Related types: [DetailPageModuleAction](https://docs.stripe.com/stripe-apps/components/detailpagetable.md#detailpagemoduleaction).                                                                                                                                                                                          |
| `items`             | (Optional)
  `DetailPageModuleTableItem[] | undefined`

  The items to display in the table.                                                                                                                                                                                                                                                                                                                                              |
| `onItemPress`       | (Optional)
  `((item: DetailPageModuleTableItem) => void) | undefined`

  An event handler for when the user clicks an item.                                                                                                                                                                                                                                                                                                              |
| `rowActions`        | (Optional)
  `(DetailPageModuleTableRowAction | DetailPageModuleTableRowActionGroup)[] | undefined`

  Actions to display in the row.

  Related types: [DetailPageModuleTableRowActionGroup](https://docs.stripe.com/stripe-apps/components/detailpagetable.md#detailpagemoduletablerowactiongroup), [DetailPageModuleTableRowAction](https://docs.stripe.com/stripe-apps/components/detailpagetable.md#detailpagemoduletablerowaction). |
| `showOpenAppAction` | (Optional)
  `boolean | undefined`                                                                                                                                                                                                                                                                                                                                                                                                        |

### DetailPageModuleTableColumn

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

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

  The label to display for the column.                                                                                                                                                                              |
| `cell`            | (Optional)
  `DetailPageModuleTableCellFormat | undefined`

  Cell format options.

  Related types: [DetailPageModuleTableCellFormat](https://docs.stripe.com/stripe-apps/components/detailpagetable.md#detailpagemoduletablecellformat). |
| `hideHeaderLabel` | (Optional)
  `boolean | undefined`

  Sets the column label to be hidden.                                                                                                                                                                  |
| `pinned`          | (Optional)
  `boolean | undefined`

  Whether the column is pinned.                                                                                                                                                                        |

### DetailPageModuleTableCellFormat

This is a union type. It can be one of: [TextTableCell](https://docs.stripe.com/stripe-apps/components/detailpagetable.md#texttablecell), [LinkTableCell](https://docs.stripe.com/stripe-apps/components/detailpagetable.md#linktablecell), [DateTableCell](https://docs.stripe.com/stripe-apps/components/detailpagetable.md#datetablecell), [IdTableCell](https://docs.stripe.com/stripe-apps/components/detailpagetable.md#idtablecell), [StatusTableCell](https://docs.stripe.com/stripe-apps/components/detailpagetable.md#statustablecell), [CurrencyTableCell](https://docs.stripe.com/stripe-apps/components/detailpagetable.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/detailpagetable.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. |

### DetailPageModuleEmptyActionMessage

| Property  | Type                                                                                                                                                                                                             |
| --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `action`  | (Required)
  `Action`

  An call to action displayed below the message.

  Related types: [Action](https://docs.stripe.com/stripe-apps/components/detailpagetable.md#detailpagemoduleemptyactionmessage-action). |
| `message` | (Required)
  `string`

  A custom message to display when the table is empty.                                                                                                                                    |

### DetailPageModuleEmptyActionMessage Action

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

  The link of the action.  |
| `label`  | (Required)
  `string`

  The label of the action. |

### DetailPageModuleDisplayError

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

  The error message to display.                                                                                                                                                                |
| `errorAction` | (Optional)
  `ErrorAction | undefined`

  An action to handle the error.

  Related types: [ErrorAction](https://docs.stripe.com/stripe-apps/components/detailpagetable.md#detailpagemoduledisplayerror-erroraction). |

### DetailPageModuleDisplayError ErrorAction

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

  Native `href` attribute.       |
| `title`  | (Required)
  `string`

  The title of the error action. |

### DetailPageModuleAction

This is a union type. It can be one of: [DetailPageModuleLink](https://docs.stripe.com/stripe-apps/components/detailpagetable.md#detailpagemodulelink), [DetailPageModuleEvent](https://docs.stripe.com/stripe-apps/components/detailpagetable.md#detailpagemoduleevent), [DetailPageModuleActionLegacy](https://docs.stripe.com/stripe-apps/components/detailpagetable.md#detailpagemoduleactionlegacy).

### DetailPageModuleLink

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

  The href of the link.

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

  The label of the link.                                                                                                                                          |
| `type`   | (Required)
  `"link"`

  The type of the action.                                                                                                                                         |

### RouteDescriptor

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

### DetailPageModuleEvent

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

  The label of the action.             |
| `onPress` | (Required)
  `() => void`

  An event handler for the action. |
| `type`    | (Required)
  `"action"`

  The type of the action.            |

### DetailPageModuleActionLegacy

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

  The label of the action.             |
| `onPress` | (Required)
  `() => void`

  An event handler for the action. |

### DetailPageModuleTableRowAction

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

### TableRowLink

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

  The href of the link.

  Related types: [RouteDescriptor](https://docs.stripe.com/stripe-apps/components/detailpagetable.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.                                                                                                        |

### TableRowAction

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

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

  The label of the action.                                            |
| `onPress` | (Required)
  `(item: DetailPageModuleTableItem) => void`

  An event handler for the action. |
| `type`    | (Optional)
  `("default" | "destructive") | undefined`

  The type of the action.            |

### DetailPageModuleTableRowActionGroup

| Property  | Type                                                                                                                                                                                                                                                 |
| --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `actions` | (Required)
  `DetailPageModuleTableRowAction[]`

  The actions to display in the action group.

  Related types: [DetailPageModuleTableRowAction](https://docs.stripe.com/stripe-apps/components/detailpagetable.md#detailpagemoduletablerowaction). |
| `id`      | (Required)
  `string`

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

  The label of the action group.                                                                                                                                                                                              |

## Row item press

Add interactivity to your Detail Page table by defining an `onItemPress` handler. This allows you to respond when users click individual rows.

## Row actions

Add actions to individual rows by using the `rowActions` prop. This displays an overflow menu at the end of the row with the specified actions.

## Pending

Display a loading state while your content is being fetched or processed by using the `pending` prop. This is useful for async operations where the UI needs to indicate that data is loading.

## Error state

Display an error state when your app fails to load content by using the `error` prop as shown below.

## Extra actions

You can add extra actions to to your Detail Page Module by providing the `extraActions` prop.


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