Stripe Apps の Table コンポーネント

Table コンポーネントを使用して表を表示します。

SDK バージョン

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

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

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

サンプルを読み込み中...

<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

プロパティータイプ

children

必須

React.ReactNode

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

サブコンポーネント

TableBody

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

TableBody props

プロパティータイプ

children

必須

React.ReactNode

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

TableCell

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

TableCell props

プロパティー	タイプ
`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 props

プロパティータイプ

children

必須

React.ReactNode

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

TableHead

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

TableHead props

プロパティータイプ

children

必須

React.ReactNode

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

TableHeaderCell

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

TableHeaderCell props

プロパティー	タイプ
`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 props

プロパティータイプ

children

必須

React.ReactNode

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

注

Stripe Apps の Table コンポーネント

Table コンポーネントを使用して表を表示します。

Table props

サブコンポーネント

TableBody

TableBody props

TableCell

TableCell props

TableFooter

TableFooter props

TableHead

TableHead props

TableHeaderCell

TableHeaderCell props

TableRow

TableRow props

参照情報