資料表格 Svelte 組件

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

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

資料表格組件

包含以下組件

Table
TableHead
TableBody
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.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>