テーブル
Table コンポーネントを使用して表を表示します。
Table コンポーネントをアプリに追加するには、以下のようにします。
import {Table, TableBody, TableCell, TableFooter, TableHead, TableHeaderCell, TableRow} from '@stripe/ui-extension-sdk/ui';
以下に、ヘッダー、数行のデータ、およびフッターを含む Table コンポーネントのプレビューを示します。
<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>
Table props
| プロパティー | タイプ |
|---|---|
| 必須
コンポーネントのコンテンツ。 |
サブコンポーネント
TableBody
TableBody コンポーネントには、表の行とセルが格納されます。
TableBody props
| プロパティー | タイプ |
|---|---|
| 必須
コンポーネントのコンテンツ。 |
TableCell
TableCell コンポーネントには、表の行と列に対応する 1 単位の情報が格納されます。
TableCell props
| プロパティー | タイプ |
|---|---|
| 必須
コンポーネントのコンテンツ。 |
| オプション
|
| オプション
|
| オプション
|
| オプション
|
| オプション
|
| オプション
|
| オプション
|
| オプション
|
TableFooter
TableFooter コンポーネントは、テーブルに含まれている情報の列を要約または集計します。
TableFooter props
| プロパティー | タイプ |
|---|---|
| 必須
コンポーネントのコンテンツ。 |
TableHead
TableHead コンポーネントは、表に格納されている情報の列の説明です。
TableHead props
| プロパティー | タイプ |
|---|---|
| 必須
コンポーネントのコンテンツ。 |
TableHeaderCell
TableHeaderCell コンポーネントは、表に含まれている情報の特定の 1 列の説明です。
TableHeaderCell props
| プロパティー | タイプ |
|---|---|
| 必須
コンポーネントのコンテンツ。 |
| オプション
|
| オプション
|
| オプション
|
| オプション
|
| オプション
|
| オプション
|
| オプション
|
| オプション
|
TableRow
TableRow コンポーネントは、各列に情報が含まれるセルで構成された表の項目です。
TableRow props
| プロパティー | タイプ |
|---|---|
| 必須
コンポーネントのコンテンツ。 |