Table element.

    <Table>
      <Table.Caption>Caption</Table.Caption>
      <tbody>
        <tr>
          <Table.Th>Table header</Table.Th>
          <Table.Td>Table data</Table.Td>
        </tr>
        <tr>
          <Table.Th>Table header</Table.Th>
          <Table.Td>Table data</Table.Td>
        </tr>
      </tbody>
    </Table>

Can be small.

    <Table small>
      <Table.Caption>Caption</Table.Caption>
      <tbody>
        <tr>
          <Table.Th>Table header</Table.Th>
          <Table.Td>Table data</Table.Td>
        </tr>
        <tr>
          <Table.Th>Table header</Table.Th>
          <Table.Td>Table data</Table.Td>
        </tr>
      </tbody>
    </Table>

Table header and data elements can be text aligned

    <Table small>
      <Table.Caption>Caption</Table.Caption>
      <tbody>
        <tr>
          <Table.Th>Table header</Table.Th>
          <Table.Td textAlign="right">Table data</Table.Td>
        </tr>
        <tr>
          <Table.Th>Table header</Table.Th>
          <Table.Td textAlign="right">Table data</Table.Td>
        </tr>
      </tbody>
    </Table>

Table with a lot of data

    const TableExample = require('./_TableExample').default;
    <TableExample rows={20} />