資料表格 React 組件

資料表格元件
TableRow 屬性
TableCell 屬性
範例

資料表格顯示原始資料集。它們通常出現在桌面企業產品中。

資料表格元件

包含以下元件

Table（表格）
TableHead（表格標頭）
TableBody（表格主體）
TableRow（表格列）
TableCell（表格儲存格）

TableRow 屬性

名稱	類型	預設值	描述
colors（色彩）	物件		包含 Tailwind CSS 色彩類別的物件
colors.bgIos	字串	'hover:bg-black/5 dark:hover:bg-white/10'	表格列 hover 時的背景顏色
colors.bgMaterial	字串	'hover:bg-md-light-secondary-container dark:hover:bg-md-dark-secondary-container'	表格列 hover 時的背景顏色
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>
  );
}