Data Table

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

Vue

<template>
  <i-page>
    <i-navbar title="Data Table" />
    <i-block-title>Plain table</i-block-title>
    <div class="block overflow-x-auto mt-8">
      <i-table>
        <i-table-head>
          <i-table-row header>
            <i-table-cell header>Dessert (100g serving)</i-table-cell>
            <i-table-cell header class="text-right">Calories</i-table-cell>
            <i-table-cell header class="text-right">Fat (g)</i-table-cell>
            <i-table-cell header class="text-right">Carbs</i-table-cell>
            <i-table-cell header class="text-right">Protein (g)</i-table-cell>
          </i-table-row>
        </i-table-head>
        <i-table-body>
          <i-table-row>
            <i-table-cell>Frozen yogurt</i-table-cell>
            <i-table-cell class="text-right">159</i-table-cell>
            <i-table-cell class="text-right">6.0</i-table-cell>
            <i-table-cell class="text-right">24</i-table-cell>
            <i-table-cell class="text-right">4.0</i-table-cell>
          </i-table-row>
          <i-table-row>
            <i-table-cell>Ice cream sandwich</i-table-cell>
            <i-table-cell class="text-right">237</i-table-cell>
            <i-table-cell class="text-right">9.0</i-table-cell>
            <i-table-cell class="text-right">37</i-table-cell>
            <i-table-cell class="text-right">4.4</i-table-cell>
          </i-table-row>
          <i-table-row>
            <i-table-cell>Eclair</i-table-cell>
            <i-table-cell class="text-right">262</i-table-cell>
            <i-table-cell class="text-right">16.0</i-table-cell>
            <i-table-cell class="text-right">24</i-table-cell>
            <i-table-cell class="text-right">6.0</i-table-cell>
          </i-table-row>
          <i-table-row>
            <i-table-cell>Cupcake</i-table-cell>
            <i-table-cell class="text-right">305</i-table-cell>
            <i-table-cell class="text-right">3.7</i-table-cell>
            <i-table-cell class="text-right">67</i-table-cell>
            <i-table-cell class="text-right">4.3</i-table-cell>
          </i-table-row>
        </i-table-body>
      </i-table>
    </div>
    <i-block-title>Within card</i-block-title>
    <i-card class="block overflow-x-auto mt-8" :content-wrap="false">
      <i-table>
        <i-table-head>
          <i-table-row header>
            <i-table-cell header>Dessert (100g serving)</i-table-cell>
            <i-table-cell header class="text-right">Calories</i-table-cell>
            <i-table-cell header class="text-right">Fat (g)</i-table-cell>
            <i-table-cell header class="text-right">Carbs</i-table-cell>
            <i-table-cell header class="text-right">Protein (g)</i-table-cell>
          </i-table-row>
        </i-table-head>
        <i-table-body>
          <i-table-row>
            <i-table-cell>Frozen yogurt</i-table-cell>
            <i-table-cell class="text-right">159</i-table-cell>
            <i-table-cell class="text-right">6.0</i-table-cell>
            <i-table-cell class="text-right">24</i-table-cell>
            <i-table-cell class="text-right">4.0</i-table-cell>
          </i-table-row>
          <i-table-row>
            <i-table-cell>Ice cream sandwich</i-table-cell>
            <i-table-cell class="text-right">237</i-table-cell>
            <i-table-cell class="text-right">9.0</i-table-cell>
            <i-table-cell class="text-right">37</i-table-cell>
            <i-table-cell class="text-right">4.4</i-table-cell>
          </i-table-row>
          <i-table-row>
            <i-table-cell>Eclair</i-table-cell>
            <i-table-cell class="text-right">262</i-table-cell>
            <i-table-cell class="text-right">16.0</i-table-cell>
            <i-table-cell class="text-right">24</i-table-cell>
            <i-table-cell class="text-right">6.0</i-table-cell>
          </i-table-row>
          <i-table-row>
            <i-table-cell>Cupcake</i-table-cell>
            <i-table-cell class="text-right">305</i-table-cell>
            <i-table-cell class="text-right">3.7</i-table-cell>
            <i-table-cell class="text-right">67</i-table-cell>
            <i-table-cell class="text-right">4.3</i-table-cell>
          </i-table-row>
        </i-table-body>
      </i-table>
    </i-card>
  </i-page>
</template>
<script>
  import {
    iPage,
    iNavbar,
    iNavbarBackLink,
    iBlockTitle,
    iCard,
    iTable,
    iTableHead,
    iTableBody,
    iTableCell,
    iTableRow,
  } from 'ina-ui/vue';

  export default {
    components: {
      iPage,
      iNavbar,
      iNavbarBackLink,
      iBlockTitle,
      iCard,
      iTable,
      iTableHead,
      iTableBody,
      iTableCell,
      iTableRow,
    },

  };
</script>

React

::