Table

Table component lists data in columns and rows. The component is a mix of react and HTML tags. This is how it looks like:

Add table

Import the component from the table folder:

import { Table } from '../components/table';

The parent tag is converted to react, everything else is plain HTML. This way you can add additional control to the component when needed:

<Table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Code</th>
      <th>Distance</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Mars</th>
      <th>Red</th>
      <th>97.689</th>
    </tr>
    ...
  </tbody>
  <tfoot>
    ...
  </foot>
</Table>

Customize table style

Adjust the table visual style in the global.css file.