## Table Component

Use the `Table` component to display tabular data in your Stripe app.

### SDK Version

8.x, 9.x

### Install Skills

To add the `Table` component to your app:

```javascript
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:

```jsx
<Box css={{ backgroundColor: 'surface', padding: 'medium', borderRadius: 'medium', }} >
  <Table>
    <TableHead>
      <TableRow>
        <TableHeaderCell>Charge type</TableHeaderCell>
        <TableHeaderCell>Amount</TableHeaderCell>
      </TableRow>
    </TableHead>
    <TableBody>
      <TableRow>
        <TableCell>Setup fee</TableCell>
        <TableCell>$95.00</TableCell>
      </TableRow>
      <TableRow>
        <TableCell>Maintenance fee</TableCell>
        <TableCell>$50.45</TableCell>
      </TableRow>
      <TableRow>
        <TableCell>Extra storage space (per GB)</TableCell>
        <TableCell>$5.95</TableCell>
      </TableRow>
      <TableRow>
        <TableCell>Premium features</TableCell>
        <TableCell>$109.00</TableCell>
      </TableRow>
    </TableBody>
    <TableFooter>
      <TableRow>
        <TableCell>
          <Inline css={{font: 'heading'}}>Total</Inline>
        </TableCell>
        <TableCell>
          <Inline css={{font: 'heading'}}>$260.40</Inline>
        </TableCell>
      </TableRow>
    </TableFooter>
  </Table>
</Box>
```

### Table Props

| Property | Type | Required | Description |
|---|---|---|---|
| `children` | `React.ReactNode` | Yes | The contents of the component. |

### Sub-components

#### TableBody

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

##### TableBody Props

| Property | Type | Required | Description |
|---|---|---|---|
| `children` | `React.ReactNode` | Yes | 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 | Required | Description |
|---|---|---|---|
| `children` | `React.ReactNode` | Yes | The contents of the component. |
| `align` | `"center" | "left"` | Optional | Alignment of the cell content. |

### See also

*   [Design patterns to follow](/stripe-apps/patterns)
*   [Style your app](/stripe-apps/style)
*   [UI testing](/stripe-apps/ui-testing)