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/Table.css";

Props

Use any valid <table> props.

Examples

How to import.
import Table from "device-agnostic-ui/Table.mjs";
With row headers.
import Table from "device-agnostic-ui/Table.mjs";

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/Table.mjs";

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