# Tabellenkomponente für Stripe-Apps

Zeigen Sie eine mithilfe der Table-Komponente eine Tabelle an.

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

So fügen Sie Ihrer App die `Table` Komponente hinzu:

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

Nachfolgend sehen Sie eine Vorschau einer `Table`-Komponente mit einer Kopfzeile, mehreren Datenzeilen und einer Fußzeile:

### Tabelleneigenschaften

| Eigenschaft | Typ                                                             |
| ----------- | --------------------------------------------------------------- |
| `children`  | (Pflichtfeld)
  `React.ReactNode`

  Der Inhalt der Komponente. |

## Unter-Komponenten

## TableBody

Die Komponente `TableBody` enthält die Zeilen und Zellen einer Tabelle.

### TableBody-Eigenschaften

| Eigenschaft | Typ                                                             |
| ----------- | --------------------------------------------------------------- |
| `children`  | (Pflichtfeld)
  `React.ReactNode`

  Der Inhalt der Komponente. |

## TableCell

Die Komponente `TableCell` enthält eine Informationseinheit in einer Tabelle, die einer Zeile und Spalte entspricht.

### TableCell-Eigenschaften

| Eigenschaft | Typ                                                                      |
| ----------- | ------------------------------------------------------------------------ |
| `children`  | (Pflichtfeld)
  `React.ReactNode`

  Der Inhalt der Komponente.          |
| `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

Die Komponente `TableFooter` fasst die in einer Tabelle enthaltenen Informationsspalten zusammen oder aggregiert sie.

### TableFooter-Eigenschaften

| Eigenschaft | Typ                                                             |
| ----------- | --------------------------------------------------------------- |
| `children`  | (Pflichtfeld)
  `React.ReactNode`

  Der Inhalt der Komponente. |

## TableHead

Die Komponente `TableHead` beschreibt die Informationsspalten, die in einer Tabelle enthalten sind.

### TableHead-Eigenschaften

| Eigenschaft | Typ                                                             |
| ----------- | --------------------------------------------------------------- |
| `children`  | (Pflichtfeld)
  `React.ReactNode`

  Der Inhalt der Komponente. |

## TableHeaderCell

Die Komponente `TableHeaderCell` beschreibt eine Spalte mit Informationen in einer Tabelle enthalten.

### TableHeaderCell-Eigenschaften

| Eigenschaft | Typ                                                                      |
| ----------- | ------------------------------------------------------------------------ |
| `children`  | (Pflichtfeld)
  `React.ReactNode`

  Der Inhalt der Komponente.          |
| `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

Die Komponente `TableRow` ist ein Eintrag in einer Tabelle, die aus Zellen besteht, welche Informationen für jede Spalte enthalten.

### TableRow-Eigenschaften

| Eigenschaft | Typ                                                             |
| ----------- | --------------------------------------------------------------- |
| `children`  | (Pflichtfeld)
  `React.ReactNode`

  Der Inhalt der Komponente. |


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

So fügen Sie Ihrer App die `Table` Komponente hinzu:

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

Nachfolgend sehen Sie eine Vorschau einer `Table`-Komponente mit einer Kopfzeile, mehreren Datenzeilen und einer Fußzeile:

### Tabelleneigenschaften

| Eigenschaft | Typ                                                             |
| ----------- | --------------------------------------------------------------- |
| `children`  | (Pflichtfeld)
  `React.ReactNode`

  Der Inhalt der Komponente. |

## Unter-Komponenten

## TableBody

Die Komponente `TableBody` enthält die Zeilen und Zellen einer Tabelle.

### TableBody-Eigenschaften

| Eigenschaft | Typ                                                             |
| ----------- | --------------------------------------------------------------- |
| `children`  | (Pflichtfeld)
  `React.ReactNode`

  Der Inhalt der Komponente. |

## TableCell

Die Komponente `TableCell` enthält eine Informationseinheit in einer Tabelle, die einer Zeile und Spalte entspricht.

### TableCell-Eigenschaften

| Eigenschaft | Typ                                                                      |
| ----------- | ------------------------------------------------------------------------ |
| `children`  | (Pflichtfeld)
  `React.ReactNode`

  Der Inhalt der Komponente.          |
| `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

Die Komponente `TableFooter` fasst die in einer Tabelle enthaltenen Informationsspalten zusammen oder aggregiert sie.

### TableFooter-Eigenschaften

| Eigenschaft | Typ                                                             |
| ----------- | --------------------------------------------------------------- |
| `children`  | (Pflichtfeld)
  `React.ReactNode`

  Der Inhalt der Komponente. |

## TableHead

Die Komponente `TableHead` beschreibt die Informationsspalten, die in einer Tabelle enthalten sind.

### TableHead-Eigenschaften

| Eigenschaft | Typ                                                             |
| ----------- | --------------------------------------------------------------- |
| `children`  | (Pflichtfeld)
  `React.ReactNode`

  Der Inhalt der Komponente. |

## TableHeaderCell

Die Komponente `TableHeaderCell` beschreibt eine Spalte mit Informationen in einer Tabelle enthalten.

### TableHeaderCell-Eigenschaften

| Eigenschaft | Typ                                                                      |
| ----------- | ------------------------------------------------------------------------ |
| `children`  | (Pflichtfeld)
  `React.ReactNode`

  Der Inhalt der Komponente.          |
| `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

Die Komponente `TableRow` ist ein Eintrag in einer Tabelle, die aus Zellen besteht, welche Informationen für jede Spalte enthalten.

### TableRow-Eigenschaften

| Eigenschaft | Typ                                                             |
| ----------- | --------------------------------------------------------------- |
| `children`  | (Pflichtfeld)
  `React.ReactNode`

  Der Inhalt der Komponente. |


## See also

- [Entwurfsmuster als Orientierung](https://docs.stripe.com/stripe-apps/patterns.md)
- [App gestalten](https://docs.stripe.com/stripe-apps/style.md)
- [Test der Nutzeroberfläche](https://docs.stripe.com/stripe-apps/ui-testing.md)