# Composant de tableau pour les applications Stripe

Affichez un tableau en utilisant le composant Table.

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

Pour ajouter le composant `Table` à votre application :

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

Voici un aperçu d’un composant `Table` avec un en-tête, plusieurs lignes de données et un bas de page :

### Propriétés du tableau

| Propriété  | Type                                                          |
| ---------- | ------------------------------------------------------------- |
| `children` | (Obligatoire)
  `React.ReactNode`

  Le contenu du composant. |

## Sous-composants

## TableBody

Le composant `TableBody` contient les lignes et les cellules d’un tableau.

### Propriétés TableBody

| Propriété  | Type                                                          |
| ---------- | ------------------------------------------------------------- |
| `children` | (Obligatoire)
  `React.ReactNode`

  Le contenu du composant. |

## TableCell

Le composant `TableCell` correspond aux données affichées dans l’une des cellules du tableau (à l’intersection entre une ligne et une colonne).

### Propriétés TableCell

| Propriété  | Type                                                                       |
| ---------- | -------------------------------------------------------------------------- |
| `children` | (Obligatoire)
  `React.ReactNode`

  Le contenu du composant.              |
| `align`    | (Facultatif)
  `("center" | "left" | "right") | undefined`                 |
| `colSpan`  | (Facultatif)
  `number | undefined`                                        |
| `maxWidth` | (Facultatif)
  `("auto" | "maximized" | "minimized" | number) | undefined` |
| `minWidth` | (Facultatif)
  `("auto" | "maximized" | "minimized" | number) | undefined` |
| `rowSpan`  | (Facultatif)
  `number | undefined`                                        |
| `vAlign`   | (Facultatif)
  `("baseline" | "bottom" | "middle" | "top") | undefined`    |
| `width`    | (Facultatif)
  `("auto" | "maximized" | "minimized" | number) | undefined` |
| `wrap`     | (Facultatif)
  `boolean | undefined`                                       |

## TableFooter

Le composant `TableFooter` résume ou agrège les colonnes de données contenues dans un tableau.

### Propriétés TableFooter

| Propriété  | Type                                                          |
| ---------- | ------------------------------------------------------------- |
| `children` | (Obligatoire)
  `React.ReactNode`

  Le contenu du composant. |

## TableHead

Le composant `TableHead` décrit les colonnes de données contenues dans un tableau.

### Propriétés TableHead

| Propriété  | Type                                                          |
| ---------- | ------------------------------------------------------------- |
| `children` | (Obligatoire)
  `React.ReactNode`

  Le contenu du composant. |

## TableHeaderCell

Le composant `TableHeaderCell` décrit une colonne de données au sein d’un tableau.

### Propriétés TableHeaderCell

| Propriété  | Type                                                                       |
| ---------- | -------------------------------------------------------------------------- |
| `children` | (Obligatoire)
  `React.ReactNode`

  Le contenu du composant.              |
| `align`    | (Facultatif)
  `("center" | "left" | "right") | undefined`                 |
| `colSpan`  | (Facultatif)
  `number | undefined`                                        |
| `maxWidth` | (Facultatif)
  `("auto" | "maximized" | "minimized" | number) | undefined` |
| `minWidth` | (Facultatif)
  `("auto" | "maximized" | "minimized" | number) | undefined` |
| `rowSpan`  | (Facultatif)
  `number | undefined`                                        |
| `vAlign`   | (Facultatif)
  `("baseline" | "bottom" | "middle" | "top") | undefined`    |
| `width`    | (Facultatif)
  `("auto" | "maximized" | "minimized" | number) | undefined` |
| `wrap`     | (Facultatif)
  `boolean | undefined`                                       |

## TableRow

Le composant `TableRow` correspond à une entrée d’un tableau composé de cellules contenant des données pour chaque colonne.

### Propriétés TableRow

| Propriété  | Type                                                          |
| ---------- | ------------------------------------------------------------- |
| `children` | (Obligatoire)
  `React.ReactNode`

  Le contenu du composant. |


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

Pour ajouter le composant `Table` à votre application :

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

Voici un aperçu d’un composant `Table` avec un en-tête, plusieurs lignes de données et un bas de page :

### Propriétés du tableau

| Propriété  | Type                                                          |
| ---------- | ------------------------------------------------------------- |
| `children` | (Obligatoire)
  `React.ReactNode`

  Le contenu du composant. |

## Sous-composants

## TableBody

Le composant `TableBody` contient les lignes et les cellules d’un tableau.

### Propriétés TableBody

| Propriété  | Type                                                          |
| ---------- | ------------------------------------------------------------- |
| `children` | (Obligatoire)
  `React.ReactNode`

  Le contenu du composant. |

## TableCell

Le composant `TableCell` correspond aux données affichées dans l’une des cellules du tableau (à l’intersection entre une ligne et une colonne).

### Propriétés TableCell

| Propriété  | Type                                                                       |
| ---------- | -------------------------------------------------------------------------- |
| `children` | (Obligatoire)
  `React.ReactNode`

  Le contenu du composant.              |
| `align`    | (Facultatif)
  `("center" | "left" | "right") | undefined`                 |
| `colSpan`  | (Facultatif)
  `number | undefined`                                        |
| `maxWidth` | (Facultatif)
  `("auto" | "maximized" | "minimized" | number) | undefined` |
| `minWidth` | (Facultatif)
  `("auto" | "maximized" | "minimized" | number) | undefined` |
| `rowSpan`  | (Facultatif)
  `number | undefined`                                        |
| `vAlign`   | (Facultatif)
  `("baseline" | "bottom" | "middle" | "top") | undefined`    |
| `width`    | (Facultatif)
  `("auto" | "maximized" | "minimized" | number) | undefined` |
| `wrap`     | (Facultatif)
  `boolean | undefined`                                       |

## TableFooter

Le composant `TableFooter` résume ou agrège les colonnes de données contenues dans un tableau.

### Propriétés TableFooter

| Propriété  | Type                                                          |
| ---------- | ------------------------------------------------------------- |
| `children` | (Obligatoire)
  `React.ReactNode`

  Le contenu du composant. |

## TableHead

Le composant `TableHead` décrit les colonnes de données contenues dans un tableau.

### Propriétés TableHead

| Propriété  | Type                                                          |
| ---------- | ------------------------------------------------------------- |
| `children` | (Obligatoire)
  `React.ReactNode`

  Le contenu du composant. |

## TableHeaderCell

Le composant `TableHeaderCell` décrit une colonne de données au sein d’un tableau.

### Propriétés TableHeaderCell

| Propriété  | Type                                                                       |
| ---------- | -------------------------------------------------------------------------- |
| `children` | (Obligatoire)
  `React.ReactNode`

  Le contenu du composant.              |
| `align`    | (Facultatif)
  `("center" | "left" | "right") | undefined`                 |
| `colSpan`  | (Facultatif)
  `number | undefined`                                        |
| `maxWidth` | (Facultatif)
  `("auto" | "maximized" | "minimized" | number) | undefined` |
| `minWidth` | (Facultatif)
  `("auto" | "maximized" | "minimized" | number) | undefined` |
| `rowSpan`  | (Facultatif)
  `number | undefined`                                        |
| `vAlign`   | (Facultatif)
  `("baseline" | "bottom" | "middle" | "top") | undefined`    |
| `width`    | (Facultatif)
  `("auto" | "maximized" | "minimized" | number) | undefined` |
| `wrap`     | (Facultatif)
  `boolean | undefined`                                       |

## TableRow

Le composant `TableRow` correspond à une entrée d’un tableau composé de cellules contenant des données pour chaque colonne.

### Propriétés TableRow

| Propriété  | Type                                                          |
| ---------- | ------------------------------------------------------------- |
| `children` | (Obligatoire)
  `React.ReactNode`

  Le contenu du composant. |


## See also

- [Modèles de conception](https://docs.stripe.com/stripe-apps/patterns.md)
- [Styliser votre application](https://docs.stripe.com/stripe-apps/style.md)
- [Tests d’interface utilisateur](https://docs.stripe.com/stripe-apps/ui-testing.md)