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

import React from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  BlockTitle,
  Card,
  Table,
  TableHead,
  TableBody,
  TableCell,
  TableRow,
} from 'ina-ui/react';

export default function DataTablePage() {
  return (
    <Page>
      <Navbar
        title="Data Table"
        />
      <BlockTitle>Plain table</BlockTitle>
      <div className="block overflow-x-auto mt-8">
        <Table>
          <TableHead>
            <TableRow header>
              <TableCell header>Dessert (100g serving)</TableCell>
              <TableCell header className="text-right">
                Calories
              </TableCell>
              <TableCell header className="text-right">
                Fat (g)
              </TableCell>
              <TableCell header className="text-right">
                Carbs
              </TableCell>
              <TableCell header className="text-right">
                Protein (g)
              </TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            <TableRow>
              <TableCell>Frozen yogurt</TableCell>
              <TableCell className="text-right">159</TableCell>
              <TableCell className="text-right">6.0</TableCell>
              <TableCell className="text-right">24</TableCell>
              <TableCell className="text-right">4.0</TableCell>
            </TableRow>
            <TableRow>
              <TableCell>Ice cream sandwich</TableCell>
              <TableCell className="text-right">237</TableCell>
              <TableCell className="text-right">9.0</TableCell>
              <TableCell className="text-right">37</TableCell>
              <TableCell className="text-right">4.4</TableCell>
            </TableRow>
            <TableRow>
              <TableCell>Eclair</TableCell>
              <TableCell className="text-right">262</TableCell>
              <TableCell className="text-right">16.0</TableCell>
              <TableCell className="text-right">24</TableCell>
              <TableCell className="text-right">6.0</TableCell>
            </TableRow>
            <TableRow>
              <TableCell>Cupcake</TableCell>
              <TableCell className="text-right">305</TableCell>
              <TableCell className="text-right">3.7</TableCell>
              <TableCell className="text-right">67</TableCell>
              <TableCell className="text-right">4.3</TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </div>
      <BlockTitle>Within card</BlockTitle>
      <Card className="block overflow-x-auto mt-8" contentWrap={false}>
        <Table>
          <TableHead>
            <TableRow header>
              <TableCell header>Dessert (100g serving)</TableCell>
              <TableCell header className="text-right">
                Calories
              </TableCell>
              <TableCell header className="text-right">
                Fat (g)
              </TableCell>
              <TableCell header className="text-right">
                Carbs
              </TableCell>
              <TableCell header className="text-right">
                Protein (g)
              </TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            <TableRow>
              <TableCell>Frozen yogurt</TableCell>
              <TableCell className="text-right">159</TableCell>
              <TableCell className="text-right">6.0</TableCell>
              <TableCell className="text-right">24</TableCell>
              <TableCell className="text-right">4.0</TableCell>
            </TableRow>
            <TableRow>
              <TableCell>Ice cream sandwich</TableCell>
              <TableCell className="text-right">237</TableCell>
              <TableCell className="text-right">9.0</TableCell>
              <TableCell className="text-right">37</TableCell>
              <TableCell className="text-right">4.4</TableCell>
            </TableRow>
            <TableRow>
              <TableCell>Eclair</TableCell>
              <TableCell className="text-right">262</TableCell>
              <TableCell className="text-right">16.0</TableCell>
              <TableCell className="text-right">24</TableCell>
              <TableCell className="text-right">6.0</TableCell>
            </TableRow>
            <TableRow>
              <TableCell>Cupcake</TableCell>
              <TableCell className="text-right">305</TableCell>
              <TableCell className="text-right">3.7</TableCell>
              <TableCell className="text-right">67</TableCell>
              <TableCell className="text-right">4.3</TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </Card>
    </Page>
  );
}

::