数据表 React 组件

数据表组件
TableRow 属性
TableCell 属性
示例

数据表显示一组原始数据。它们通常出现在桌面企业产品中。

数据表组件

以下组件已包含

表格
TableHead
TableBody
TableRow
TableCell

TableRow 属性

名称	类型	默认值	描述
colors	object		包含 Tailwind CSS 颜色类的对象
colors.bgIos	string	'hover:bg-black/5 dark:hover:bg-white/10'	表格行悬停背景颜色
colors.bgMaterial	string	'hover:bg-md-light-secondary-container dark:hover:bg-md-dark-secondary-container'	表格行悬停背景颜色
colors.dividerMaterial	string	'border-md-light-outline dark:border-md-dark-outline'	表格行分隔线颜色
header	boolean		位于 TableHead 内

TableCell 属性

名称	类型	默认值	描述
colors	object		包含 Tailwind CSS 颜色类的对象
colors.textHeaderIos	string	'text-black/45 dark:text-white/55'	表格单元格标题文本颜色
colors.textHeaderMaterial	string	'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'	表格单元格标题文本颜色
header	boolean		位于 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>
  );
}