Table

A Table used to organize and display data efficiently. It renders a <table> element by default.

Gutter	Length	Sections
Group 1	190'	7
Group 2	14'	1
Group 3	4'	4
Total	204'	8

React

Hover Design System exports the following components for rendering menus:

import {
  Table,
  Thead,
  Tbody,
  Tfoot,
  Th,
  Tr,
  Td,
  TableCaption,
} from '@hoverinc/design-system-react-web';

Table The table wrapper (required)
Thead The header rows wrapper
Tbody The content rows wrapper
Tfoot The footer rows wrapper
Tr A table row
Td A table cell. Must be a direct child of a Tr.
Th A table header cell. Must be a direct child of a Tr.

Usage

<Table>
  <Thead>
    <Tr>
      <Th>Gutter</Th>
      <Th>Length</Th>
      <Th>Sections</Th>
    </Tr>
  </Thead>
  <Tbody>
    <Tr>
      <Td>Group 1</Td>
      <Td>190'</Td>
      <Td>7</Td>
    </Tr>
    <Tr>
      <Td>Group 2</Td>
      <Td>14'</Td>
      <Td>1</Td>
    </Tr>
  </Tbody>
  <Tfoot>
    <Tr>
      <Td>Total</Td>
      <Td>204'</Td>
      <Td>8</Td>
    </Tr>
  </Tfoot>
</Table>

Example with nested columns and rows

Sometimes a title needs to apply to more than one column or row. The Td component can be spanned accross rows and columns. (This is part of the html <table/> props)

the colSpan prop spans accross columns
the rowSpan prop spans accross rows

<Table variant="simple" size="md" colorScheme="primary">
  <Thead>
    <Tr>
      <Td></Td>
      <Td colSpan={2}>Group 1</Td>
      <Td colSpan={2}>Group 2</Td>
    </Tr>
    <Tr>
      <Td>Depth</Td>
      <Td>Type</Td>
      <Td isNumeric>Count</Td>
      <Td>Total Length</Td>
      <Td>Total Area</Td>
    </Tr>
  </Thead>
  <Tbody>
    <Tr>
      <Td rowSpan={2}>1" - 6"</Td>
      <Td>rakes</Td>
      <Td isNumeric>24</Td>
      <Td>7' 6"</Td>
      <Td>2 ft²</Td>
    </Tr>
    <Tr>
      <Td>eaves</Td>
      <Td isNumeric>4</Td>
      <Td>9' 10"</Td>
      <Td>3 ft²</Td>
    </Tr>
    <Tr>
      <Td rowSpan={2}>6" - 12"</Td>
      <Td>rakes</Td>
      <Td isNumeric>6</Td>
      <Td>58' 6"</Td>
      <Td>19 ft²</Td>
    </Tr>
    <Tr>
      <Td>eaves</Td>
      <Td isNumeric>2</Td>
      <Td>20' 5"</Td>
      <Td>3 ft²</Td>
    </Tr>
  </Tbody>
  <Tfoot>
    <Tr>
      <Td isNumeric colSpan={3}>
        <strong>Total</strong>
      </Td>
      <Td>204'</Td>
      <Td>718 ft2</Td>
    </Tr>
  </Tfoot>
</Table>

API

Table

variant default | striped | simple The overall theming of the Table

colorScheme Scheme Update only the colors of the table

size sm | md | lg The size of the table font and padding

Td

isNumeric boolean Aligns content to the right, like the spreadsheet convention.

Stack

Tabs