🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool! 🔥

Data Table Svelte Component

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

NameTypeDefaultDescription
colorsobject

Object with Tailwind CSS colors classes

colors.bgIosstring'hover:bg-black/5 dark:hover:bg-white/10'

Table Row hover bg color

colors.bgMaterialstring'hover:bg-md-light-secondary-container dark:hover:bg-md-dark-secondary-container'

Table Row hover bg color

colors.dividerMaterialstring'border-md-light-outline dark:border-md-dark-outline'

Table Row divider color

headerboolean

Is located inside the TableHead

TableCell Props

NameTypeDefaultDescription
colorsobject

Object with Tailwind CSS colors classes

colors.textHeaderIosstring'text-black/45 dark:text-white/55'

Table Cell header text color

colors.textHeaderMaterialstring'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'

Table Cell header text color

headerboolean

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>
Code licensed under MIT.
2022 © Konsta UI by nolimits4web.