Table

Displays tabulated data.

It implements the <table> element.

Styles

Import the styles within a Next.js custom app in pages/_app.js.
import 'device-agnostic-ui/public/components/Table.css';

Props

Use any valid <table> props.

Examples

Deep import.
import Table from 'device-agnostic-ui/public/components/Table.js';
Deep require.
const Table = require('device-agnostic-ui/public/components/Table.js');
Index import. Convenient, but technically inferior to a deep import.
import { Table } from 'device-agnostic-ui';
Index require. Convenient, but technically inferior to a deep require.
const { Table } = require('device-agnostic-ui');
With row headers.
import { Table } from 'device-agnostic-ui';

const result = (
  <Table>
    <tbody>
      <tr>
        <th scope="row">Country</th>
        <td>Australia</td>
      </tr>
      <tr>
        <th scope="row">Capital</th>
        <td>Canberra</td>
      </tr>
    </tbody>
  </Table>
);
CountryAustralia
CapitalCanberra
With column headers.
import { Table } from 'device-agnostic-ui';

const result = (
  <Table>
    <thead>
      <tr>
        <th scope="col">Country</th>
        <th scope="col">Capital</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Australia</td>
        <td>Canberra</td>
      </tr>
      <tr>
        <td>New Zealand</td>
        <td>Wellington</td>
      </tr>
    </tbody>
  </Table>
);
CountryCapital
AustraliaCanberra
New ZealandWellington

Tags