# Stripe Apps の Table コンポーネント

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.

`Table` コンポーネントをアプリに追加するには、以下のようにします。

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

以下に、ヘッダー、数行のデータ、およびフッターを含む `Table` コンポーネントのプレビューを示します。

### Table プロパティ

| プロパティー     | タイプ                                        |
| ---------- | ------------------------------------------ |
| `children` | (必須)
  `React.ReactNode`

  コンポーネントのコンテンツ。 |

## サブコンポーネント

## TableBody

`TableBody` コンポーネントには、表の行とセルが格納されます。

### TableBody プロパティ

| プロパティー     | タイプ                                        |
| ---------- | ------------------------------------------ |
| `children` | (必須)
  `React.ReactNode`

  コンポーネントのコンテンツ。 |

## TableCell

`TableCell` コンポーネントには、表の行と列に対応する 1 単位の情報が格納されます。

### TableCell プロパティ

| プロパティー     | タイプ                                                                   |
| ---------- | --------------------------------------------------------------------- |
| `children` | (必須)
  `React.ReactNode`

  コンポーネントのコンテンツ。                            |
| `align`    | (オプション)
  `("center" | "left" | "right") | undefined`                 |
| `colSpan`  | (オプション)
  `number | undefined`                                        |
| `maxWidth` | (オプション)
  `("auto" | "maximized" | "minimized" | number) | undefined` |
| `minWidth` | (オプション)
  `("auto" | "maximized" | "minimized" | number) | undefined` |
| `rowSpan`  | (オプション)
  `number | undefined`                                        |
| `vAlign`   | (オプション)
  `("baseline" | "bottom" | "middle" | "top") | undefined`    |
| `width`    | (オプション)
  `("auto" | "maximized" | "minimized" | number) | undefined` |
| `wrap`     | (オプション)
  `boolean | undefined`                                       |

## TableFooter

`TableFooter` コンポーネントは、テーブルに含まれている情報の列を要約または集計します。

### TableFooter プロパティ

| プロパティー     | タイプ                                        |
| ---------- | ------------------------------------------ |
| `children` | (必須)
  `React.ReactNode`

  コンポーネントのコンテンツ。 |

## TableHead

`TableHead` コンポーネントは、表に格納されている情報の列の説明です。

### TableHead プロパティ

| プロパティー     | タイプ                                        |
| ---------- | ------------------------------------------ |
| `children` | (必須)
  `React.ReactNode`

  コンポーネントのコンテンツ。 |

## TableHeaderCell

`TableHeaderCell` コンポーネントは、表に含まれている情報の特定の 1 列の説明です。

### TableHeaderCell プロパティ

| プロパティー     | タイプ                                                                   |
| ---------- | --------------------------------------------------------------------- |
| `children` | (必須)
  `React.ReactNode`

  コンポーネントのコンテンツ。                            |
| `align`    | (オプション)
  `("center" | "left" | "right") | undefined`                 |
| `colSpan`  | (オプション)
  `number | undefined`                                        |
| `maxWidth` | (オプション)
  `("auto" | "maximized" | "minimized" | number) | undefined` |
| `minWidth` | (オプション)
  `("auto" | "maximized" | "minimized" | number) | undefined` |
| `rowSpan`  | (オプション)
  `number | undefined`                                        |
| `vAlign`   | (オプション)
  `("baseline" | "bottom" | "middle" | "top") | undefined`    |
| `width`    | (オプション)
  `("auto" | "maximized" | "minimized" | number) | undefined` |
| `wrap`     | (オプション)
  `boolean | undefined`                                       |

## TableRow

`TableRow` コンポーネントは、各列に情報が含まれるセルで構成された表の項目です。

### TableRow プロパティ

| プロパティー     | タイプ                                        |
| ---------- | ------------------------------------------ |
| `children` | (必須)
  `React.ReactNode`

  コンポーネントのコンテンツ。 |


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

`Table` コンポーネントをアプリに追加するには、以下のようにします。

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

以下に、ヘッダー、数行のデータ、およびフッターを含む `Table` コンポーネントのプレビューを示します。

### Table プロパティ

| プロパティー     | タイプ                                        |
| ---------- | ------------------------------------------ |
| `children` | (必須)
  `React.ReactNode`

  コンポーネントのコンテンツ。 |

## サブコンポーネント

## TableBody

`TableBody` コンポーネントには、表の行とセルが格納されます。

### TableBody プロパティ

| プロパティー     | タイプ                                        |
| ---------- | ------------------------------------------ |
| `children` | (必須)
  `React.ReactNode`

  コンポーネントのコンテンツ。 |

## TableCell

`TableCell` コンポーネントには、表の行と列に対応する 1 単位の情報が格納されます。

### TableCell プロパティ

| プロパティー     | タイプ                                                                   |
| ---------- | --------------------------------------------------------------------- |
| `children` | (必須)
  `React.ReactNode`

  コンポーネントのコンテンツ。                            |
| `align`    | (オプション)
  `("center" | "left" | "right") | undefined`                 |
| `colSpan`  | (オプション)
  `number | undefined`                                        |
| `maxWidth` | (オプション)
  `("auto" | "maximized" | "minimized" | number) | undefined` |
| `minWidth` | (オプション)
  `("auto" | "maximized" | "minimized" | number) | undefined` |
| `rowSpan`  | (オプション)
  `number | undefined`                                        |
| `vAlign`   | (オプション)
  `("baseline" | "bottom" | "middle" | "top") | undefined`    |
| `width`    | (オプション)
  `("auto" | "maximized" | "minimized" | number) | undefined` |
| `wrap`     | (オプション)
  `boolean | undefined`                                       |

## TableFooter

`TableFooter` コンポーネントは、テーブルに含まれている情報の列を要約または集計します。

### TableFooter プロパティ

| プロパティー     | タイプ                                        |
| ---------- | ------------------------------------------ |
| `children` | (必須)
  `React.ReactNode`

  コンポーネントのコンテンツ。 |

## TableHead

`TableHead` コンポーネントは、表に格納されている情報の列の説明です。

### TableHead プロパティ

| プロパティー     | タイプ                                        |
| ---------- | ------------------------------------------ |
| `children` | (必須)
  `React.ReactNode`

  コンポーネントのコンテンツ。 |

## TableHeaderCell

`TableHeaderCell` コンポーネントは、表に含まれている情報の特定の 1 列の説明です。

### TableHeaderCell プロパティ

| プロパティー     | タイプ                                                                   |
| ---------- | --------------------------------------------------------------------- |
| `children` | (必須)
  `React.ReactNode`

  コンポーネントのコンテンツ。                            |
| `align`    | (オプション)
  `("center" | "left" | "right") | undefined`                 |
| `colSpan`  | (オプション)
  `number | undefined`                                        |
| `maxWidth` | (オプション)
  `("auto" | "maximized" | "minimized" | number) | undefined` |
| `minWidth` | (オプション)
  `("auto" | "maximized" | "minimized" | number) | undefined` |
| `rowSpan`  | (オプション)
  `number | undefined`                                        |
| `vAlign`   | (オプション)
  `("baseline" | "bottom" | "middle" | "top") | undefined`    |
| `width`    | (オプション)
  `("auto" | "maximized" | "minimized" | number) | undefined` |
| `wrap`     | (オプション)
  `boolean | undefined`                                       |

## TableRow

`TableRow` コンポーネントは、各列に情報が含まれるセルで構成された表の項目です。

### TableRow プロパティ

| プロパティー     | タイプ                                        |
| ---------- | ------------------------------------------ |
| `children` | (必須)
  `React.ReactNode`

  コンポーネントのコンテンツ。 |


## See also

- [従うべき設計パターン](https://docs.stripe.com/stripe-apps/patterns.md)
- [アプリのスタイル設定](https://docs.stripe.com/stripe-apps/style.md)
- [UI テスト](https://docs.stripe.com/stripe-apps/ui-testing.md)