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

Data Table Vue 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.vue
<template>
<k-page>
<k-navbar title="Data Table" />
<k-block-title>Plain table</k-block-title>
<div class="block overflow-x-auto mt-8">
<k-table>
<k-table-head>
<k-table-row header>
<k-table-cell header>Dessert (100g serving)</k-table-cell>
<k-table-cell header class="text-right">Calories</k-table-cell>
<k-table-cell header class="text-right">Fat (g)</k-table-cell>
<k-table-cell header class="text-right">Carbs</k-table-cell>
<k-table-cell header class="text-right">Protein (g)</k-table-cell>
</k-table-row>
</k-table-head>
<k-table-body>
<k-table-row>
<k-table-cell>Frozen yogurt</k-table-cell>
<k-table-cell class="text-right">159</k-table-cell>
<k-table-cell class="text-right">6.0</k-table-cell>
<k-table-cell class="text-right">24</k-table-cell>
<k-table-cell class="text-right">4.0</k-table-cell>
</k-table-row>
<k-table-row>
<k-table-cell>Ice cream sandwich</k-table-cell>
<k-table-cell class="text-right">237</k-table-cell>
<k-table-cell class="text-right">9.0</k-table-cell>
<k-table-cell class="text-right">37</k-table-cell>
<k-table-cell class="text-right">4.4</k-table-cell>
</k-table-row>
<k-table-row>
<k-table-cell>Eclair</k-table-cell>
<k-table-cell class="text-right">262</k-table-cell>
<k-table-cell class="text-right">16.0</k-table-cell>
<k-table-cell class="text-right">24</k-table-cell>
<k-table-cell class="text-right">6.0</k-table-cell>
</k-table-row>
<k-table-row>
<k-table-cell>Cupcake</k-table-cell>
<k-table-cell class="text-right">305</k-table-cell>
<k-table-cell class="text-right">3.7</k-table-cell>
<k-table-cell class="text-right">67</k-table-cell>
<k-table-cell class="text-right">4.3</k-table-cell>
</k-table-row>
</k-table-body>
</k-table>
</div>
<k-block-title>Within card</k-block-title>
<k-card class="block overflow-x-auto mt-8" :content-wrap="false">
<k-table>
<k-table-head>
<k-table-row header>
<k-table-cell header>Dessert (100g serving)</k-table-cell>
<k-table-cell header class="text-right">Calories</k-table-cell>
<k-table-cell header class="text-right">Fat (g)</k-table-cell>
<k-table-cell header class="text-right">Carbs</k-table-cell>
<k-table-cell header class="text-right">Protein (g)</k-table-cell>
</k-table-row>
</k-table-head>
<k-table-body>
<k-table-row>
<k-table-cell>Frozen yogurt</k-table-cell>
<k-table-cell class="text-right">159</k-table-cell>
<k-table-cell class="text-right">6.0</k-table-cell>
<k-table-cell class="text-right">24</k-table-cell>
<k-table-cell class="text-right">4.0</k-table-cell>
</k-table-row>
<k-table-row>
<k-table-cell>Ice cream sandwich</k-table-cell>
<k-table-cell class="text-right">237</k-table-cell>
<k-table-cell class="text-right">9.0</k-table-cell>
<k-table-cell class="text-right">37</k-table-cell>
<k-table-cell class="text-right">4.4</k-table-cell>
</k-table-row>
<k-table-row>
<k-table-cell>Eclair</k-table-cell>
<k-table-cell class="text-right">262</k-table-cell>
<k-table-cell class="text-right">16.0</k-table-cell>
<k-table-cell class="text-right">24</k-table-cell>
<k-table-cell class="text-right">6.0</k-table-cell>
</k-table-row>
<k-table-row>
<k-table-cell>Cupcake</k-table-cell>
<k-table-cell class="text-right">305</k-table-cell>
<k-table-cell class="text-right">3.7</k-table-cell>
<k-table-cell class="text-right">67</k-table-cell>
<k-table-cell class="text-right">4.3</k-table-cell>
</k-table-row>
</k-table-body>
</k-table>
</k-card>
</k-page>
</template>
<script>
import {
kPage,
kNavbar,
kNavbarBackLink,
kBlockTitle,
kCard,
kTable,
kTableHead,
kTableBody,
kTableCell,
kTableRow,
} from 'konsta/vue';
export default {
components: {
kPage,
kNavbar,
kNavbarBackLink,
kBlockTitle,
kCard,
kTable,
kTableHead,
kTableBody,
kTableCell,
kTableRow,
},
};
</script>
Code licensed under MIT.
2022 © Konsta UI by nolimits4web.