データテーブルReactコンポーネント

データテーブルコンポーネント
TableRowプロパティ
TableCellプロパティ
例

データテーブルは生のデータの集合を表示します。通常、デスクトップエンタープライズ製品で使用されます。

データテーブルコンポーネント

以下のコンポーネントが含まれています。

テーブル
テーブルヘッダー
テーブルボディ
テーブル行
テーブルセル

TableRowプロパティ

名前	型	デフォルト	説明
colors	オブジェクト		Tailwind CSSカラークラスを含むオブジェクト
colors.bgIos	文字列	'hover:bg-black/5 dark:hover:bg-white/10'	テーブル行のホバー時の背景色
colors.bgMaterial	文字列	'hover:bg-md-light-secondary-container dark:hover:bg-md-dark-secondary-container'	テーブル行のホバー時の背景色
colors.dividerMaterial	文字列	'border-md-light-outline dark:border-md-dark-outline'	テーブル行の区切り線の色
header	ブール値		TableHead内にある場合

TableCellプロパティ

名前	型	デフォルト	説明
colors	オブジェクト		Tailwind CSSカラークラスを含むオブジェクト
colors.textHeaderIos	文字列	'text-black/45 dark:text-white/55'	テーブルセルのヘッダーテキストの色
colors.textHeaderMaterial	文字列	'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'	テーブルセルのヘッダーテキストの色
header	ブール値		TableHead内にある場合

例

DataTable.jsx

import React from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  BlockTitle,
  Card,
  Table,
  TableHead,
  TableBody,
  TableCell,
  TableRow,
} from 'konsta/react';

export default function DataTablePage() {
  return (
    <Page>
      <Navbar
        title="Data Table"
        />
      <BlockTitle>Plain table</BlockTitle>
      <div className="block overflow-x-auto mt-8">
        <Table>
          <TableHead>
            <TableRow header>
              <TableCell header>Dessert (100g serving)</TableCell>
              <TableCell header className="text-right">
                Calories
              </TableCell>
              <TableCell header className="text-right">
                Fat (g)
              </TableCell>
              <TableCell header className="text-right">
                Carbs
              </TableCell>
              <TableCell header className="text-right">
                Protein (g)
              </TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            <TableRow>
              <TableCell>Frozen yogurt</TableCell>
              <TableCell className="text-right">159</TableCell>
              <TableCell className="text-right">6.0</TableCell>
              <TableCell className="text-right">24</TableCell>
              <TableCell className="text-right">4.0</TableCell>
            </TableRow>
            <TableRow>
              <TableCell>Ice cream sandwich</TableCell>
              <TableCell className="text-right">237</TableCell>
              <TableCell className="text-right">9.0</TableCell>
              <TableCell className="text-right">37</TableCell>
              <TableCell className="text-right">4.4</TableCell>
            </TableRow>
            <TableRow>
              <TableCell>Eclair</TableCell>
              <TableCell className="text-right">262</TableCell>
              <TableCell className="text-right">16.0</TableCell>
              <TableCell className="text-right">24</TableCell>
              <TableCell className="text-right">6.0</TableCell>
            </TableRow>
            <TableRow>
              <TableCell>Cupcake</TableCell>
              <TableCell className="text-right">305</TableCell>
              <TableCell className="text-right">3.7</TableCell>
              <TableCell className="text-right">67</TableCell>
              <TableCell className="text-right">4.3</TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </div>
      <BlockTitle>Within card</BlockTitle>
      <Card className="block overflow-x-auto mt-8" contentWrap={false}>
        <Table>
          <TableHead>
            <TableRow header>
              <TableCell header>Dessert (100g serving)</TableCell>
              <TableCell header className="text-right">
                Calories
              </TableCell>
              <TableCell header className="text-right">
                Fat (g)
              </TableCell>
              <TableCell header className="text-right">
                Carbs
              </TableCell>
              <TableCell header className="text-right">
                Protein (g)
              </TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            <TableRow>
              <TableCell>Frozen yogurt</TableCell>
              <TableCell className="text-right">159</TableCell>
              <TableCell className="text-right">6.0</TableCell>
              <TableCell className="text-right">24</TableCell>
              <TableCell className="text-right">4.0</TableCell>
            </TableRow>
            <TableRow>
              <TableCell>Ice cream sandwich</TableCell>
              <TableCell className="text-right">237</TableCell>
              <TableCell className="text-right">9.0</TableCell>
              <TableCell className="text-right">37</TableCell>
              <TableCell className="text-right">4.4</TableCell>
            </TableRow>
            <TableRow>
              <TableCell>Eclair</TableCell>
              <TableCell className="text-right">262</TableCell>
              <TableCell className="text-right">16.0</TableCell>
              <TableCell className="text-right">24</TableCell>
              <TableCell className="text-right">6.0</TableCell>
            </TableRow>
            <TableRow>
              <TableCell>Cupcake</TableCell>
              <TableCell className="text-right">305</TableCell>
              <TableCell className="text-right">3.7</TableCell>
              <TableCell className="text-right">67</TableCell>
              <TableCell className="text-right">4.3</TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </Card>
    </Page>
  );
}