Data Table Vue 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.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>