# Table component for Stripe Apps

Display a table using the Table component.

# v8

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

To add the `Table` component to your app:

```js
import {Table, TableBody, TableCell, TableFooter, TableHead, TableHeaderCell, TableRow} from '@stripe/ui-extension-sdk/ui';
```

The following shows a preview of a `Table` component with a header, several rows of data, and a footer:

### Table props

| Property   | Type                                                             |
| ---------- | ---------------------------------------------------------------- |
| `children` | (Required)
  `React.ReactNode`

  The contents of the component. |

## Sub-components

## TableBody

The `TableBody` component contains the rows and cells in a table.

### TableBody props

| Property   | Type                                                             |
| ---------- | ---------------------------------------------------------------- |
| `children` | (Required)
  `React.ReactNode`

  The contents of the component. |

## TableCell

The `TableCell` component contains one unit of information in a table corresponding to a row and column.

### TableCell props

| Property   | Type                                                                     |
| ---------- | ------------------------------------------------------------------------ |
| `children` | (Required)
  `React.ReactNode`

  The contents of the component.         |
| `align`    | (Optional)
  `("center" | "left" | "right") | undefined`                 |
| `colSpan`  | (Optional)
  `number | undefined`                                        |
| `maxWidth` | (Optional)
  `("auto" | "maximized" | "minimized" | number) | undefined` |
| `minWidth` | (Optional)
  `("auto" | "maximized" | "minimized" | number) | undefined` |
| `rowSpan`  | (Optional)
  `number | undefined`                                        |
| `vAlign`   | (Optional)
  `("baseline" | "bottom" | "middle" | "top") | undefined`    |
| `width`    | (Optional)
  `("auto" | "maximized" | "minimized" | number) | undefined` |
| `wrap`     | (Optional)
  `boolean | undefined`                                       |

## TableFooter

The `TableFooter` component summarizes or aggregates the columns of information contained in a table.

### TableFooter props

| Property   | Type                                                             |
| ---------- | ---------------------------------------------------------------- |
| `children` | (Required)
  `React.ReactNode`

  The contents of the component. |

## TableHead

The `TableHead` component describes the columns of information contained in a table.

### TableHead props

| Property   | Type                                                             |
| ---------- | ---------------------------------------------------------------- |
| `children` | (Required)
  `React.ReactNode`

  The contents of the component. |

## TableHeaderCell

The `TableHeaderCell` component describes one column of information in a table.

### TableHeaderCell props

| Property   | Type                                                                     |
| ---------- | ------------------------------------------------------------------------ |
| `children` | (Required)
  `React.ReactNode`

  The contents of the component.         |
| `align`    | (Optional)
  `("center" | "left" | "right") | undefined`                 |
| `colSpan`  | (Optional)
  `number | undefined`                                        |
| `maxWidth` | (Optional)
  `("auto" | "maximized" | "minimized" | number) | undefined` |
| `minWidth` | (Optional)
  `("auto" | "maximized" | "minimized" | number) | undefined` |
| `rowSpan`  | (Optional)
  `number | undefined`                                        |
| `vAlign`   | (Optional)
  `("baseline" | "bottom" | "middle" | "top") | undefined`    |
| `width`    | (Optional)
  `("auto" | "maximized" | "minimized" | number) | undefined` |
| `wrap`     | (Optional)
  `boolean | undefined`                                       |

## TableRow

The `TableRow` component is an entry in a table composed of cells containing information for each column.

### TableRow props

| Property   | Type                                                             |
| ---------- | ---------------------------------------------------------------- |
| `children` | (Required)
  `React.ReactNode`

  The contents of the component. |


# v9

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

To add the `Table` component to your app:

```js
import {Table, TableBody, TableCell, TableFooter, TableHead, TableHeaderCell, TableRow} from '@stripe/ui-extension-sdk/ui';
```

The following shows a preview of a `Table` component with a header, several rows of data, and a footer:

### Table props

| Property   | Type                                                             |
| ---------- | ---------------------------------------------------------------- |
| `children` | (Required)
  `React.ReactNode`

  The contents of the component. |

## Sub-components

## TableBody

The `TableBody` component contains the rows and cells in a table.

### TableBody props

| Property   | Type                                                             |
| ---------- | ---------------------------------------------------------------- |
| `children` | (Required)
  `React.ReactNode`

  The contents of the component. |

## TableCell

The `TableCell` component contains one unit of information in a table corresponding to a row and column.

### TableCell props

| Property   | Type                                                                     |
| ---------- | ------------------------------------------------------------------------ |
| `children` | (Required)
  `React.ReactNode`

  The contents of the component.         |
| `align`    | (Optional)
  `("center" | "left" | "right") | undefined`                 |
| `colSpan`  | (Optional)
  `number | undefined`                                        |
| `maxWidth` | (Optional)
  `("auto" | "maximized" | "minimized" | number) | undefined` |
| `minWidth` | (Optional)
  `("auto" | "maximized" | "minimized" | number) | undefined` |
| `rowSpan`  | (Optional)
  `number | undefined`                                        |
| `vAlign`   | (Optional)
  `("baseline" | "bottom" | "middle" | "top") | undefined`    |
| `width`    | (Optional)
  `("auto" | "maximized" | "minimized" | number) | undefined` |
| `wrap`     | (Optional)
  `boolean | undefined`                                       |

## TableFooter

The `TableFooter` component summarizes or aggregates the columns of information contained in a table.

### TableFooter props

| Property   | Type                                                             |
| ---------- | ---------------------------------------------------------------- |
| `children` | (Required)
  `React.ReactNode`

  The contents of the component. |

## TableHead

The `TableHead` component describes the columns of information contained in a table.

### TableHead props

| Property   | Type                                                             |
| ---------- | ---------------------------------------------------------------- |
| `children` | (Required)
  `React.ReactNode`

  The contents of the component. |

## TableHeaderCell

The `TableHeaderCell` component describes one column of information in a table.

### TableHeaderCell props

| Property   | Type                                                                     |
| ---------- | ------------------------------------------------------------------------ |
| `children` | (Required)
  `React.ReactNode`

  The contents of the component.         |
| `align`    | (Optional)
  `("center" | "left" | "right") | undefined`                 |
| `colSpan`  | (Optional)
  `number | undefined`                                        |
| `maxWidth` | (Optional)
  `("auto" | "maximized" | "minimized" | number) | undefined` |
| `minWidth` | (Optional)
  `("auto" | "maximized" | "minimized" | number) | undefined` |
| `rowSpan`  | (Optional)
  `number | undefined`                                        |
| `vAlign`   | (Optional)
  `("baseline" | "bottom" | "middle" | "top") | undefined`    |
| `width`    | (Optional)
  `("auto" | "maximized" | "minimized" | number) | undefined` |
| `wrap`     | (Optional)
  `boolean | undefined`                                       |

## TableRow

The `TableRow` component is an entry in a table composed of cells containing information for each column.

### TableRow props

| Property   | Type                                                             |
| ---------- | ---------------------------------------------------------------- |
| `children` | (Required)
  `React.ReactNode`

  The contents of the component. |


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