数据表格 Svelte 组件

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

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

数据表格组件

包含以下组件

表格
表格头
表格体
表格行
表格单元格

TableRow 属性

名称	类型	默认值	描述
颜色	对象		带有 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'	表格行分隔符颜色
标题	布尔值		位于 TableHead 内

TableCell 属性

名称	类型	默认值	描述
颜色	对象		带有 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'	表格单元格标题文本颜色
标题	布尔值		位于 TableHead 内

示例

DataTable.svelte

<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    BlockTitle,
    Card,
    Table,
    TableHead,
    TableBody,
    TableCell,
    TableRow,
  } from 'konsta/svelte';

</script>

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