Data Table Svelte Component

Data Table Components
TableRow Props
TableCell Props
Examples

Data tables display sets of raw data. They usually appear in desktop enterprise products.

Data Table Components

There are following components included:

Table
TableHead
TableBody
TableRow
TableCell

TableRow Props

Name	Type	Default	Description
colors	object		Object with Tailwind CSS colors classes
colors.bgIos	string	'hover:bg-black/5 dark:hover:bg-white/10'	Table Row hover bg color
colors.bgMaterial	string	'hover:bg-md-light-secondary-container dark:hover:bg-md-dark-secondary-container'	Table Row hover bg color
colors.dividerMaterial	string	'border-md-light-outline dark:border-md-dark-outline'	Table Row divider color
header	boolean		Is located inside the TableHead

TableCell Props

Name	Type	Default	Description
colors	object		Object with Tailwind CSS colors classes
colors.textHeaderIos	string	'text-black/45 dark:text-white/55'	Table Cell header text color
colors.textHeaderMaterial	string	'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'	Table Cell header text color
header	boolean		Is located inside the TableHead

Examples

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>