Table

View source Report an issue

Related components

Datatable


The Table component displays a collection of data grouped into rows. Its structure mirrors that of a regular HTML table, with the smaller Table.Body, Table.Cell, Table.Footer, Table.Header, Table.HeaderCell and Table Row components corresponding to the <tbody>, <td>, <tfoot>, <thead>, <th> and <tr> tags, respectively.

<Table className="w-125 mb-25">
  <Table.Header>
    <Table.Row>
      <Table.HeaderCell>First Name</Table.HeaderCell>
      <Table.HeaderCell>Last Name</Table.HeaderCell>
      <Table.HeaderCell>Age</Table.HeaderCell>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Rakim</Table.Cell>
      <Table.Cell>Jackson</Table.Cell>
      <Table.Cell>35</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Evelyn</Table.Cell>
      <Table.Cell>Smith</Table.Cell>
      <Table.Cell>27</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Miguel</Table.Cell>
      <Table.Cell>Fernandez</Table.Cell>
      <Table.Cell>52</Table.Cell>
    </Table.Row>
  </Table.Body>
  <Table.Footer>
    <Table.Row>
      <Table.FooterCell>Footer 1</Table.FooterCell>
      <Table.FooterCell>Footer 2</Table.FooterCell>
      <Table.FooterCell>Footer 3</Table.FooterCell>
    </Table.Row>
  </Table.Footer>
</Table>

Styling

The default table width is 100% of the parent container, but this and other styles can be overridden with the className prop on all components.

Best practice: Due to rendering issues with some browsers, adding borders to Table.Row is possible by styling the Table component with border-collapse: collapse; however, this practice is generally not recommended. The preferred method for adding borders is applying styles to the Table.Cell and Table.HeaderCell components.

<Table className="w-125 mt-25 ml-25">
  <Table.Header>
    <Table.Row>
      <Table.HeaderCell className="bg-subject-english">
        First Name
      </Table.HeaderCell>
      <Table.HeaderCell className="bg-subject-english">
        Last Name
      </Table.HeaderCell>
      <Table.HeaderCell className="bg-subject-english">Age</Table.HeaderCell>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Rakim</Table.Cell>
      <Table.Cell>Jackson</Table.Cell>
      <Table.Cell>35</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Evelyn</Table.Cell>
      <Table.Cell>Smith</Table.Cell>
      <Table.Cell>27</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Miguel</Table.Cell>
      <Table.Cell>Fernandez</Table.Cell>
      <Table.Cell>52</Table.Cell>
    </Table.Row>
  </Table.Body>
  <Table.Footer>
    <Table.Row>
      <Table.FooterCell className="italic text-subject-english">
        Footer 1
      </Table.FooterCell>
      <Table.FooterCell className="italic text-subject-english">
        Footer 2
      </Table.FooterCell>
      <Table.FooterCell className="italic text-subject-english">
        Footer 3
      </Table.FooterCell>
    </Table.Row>
  </Table.Footer>
</Table>

Variants

The Table component has 3 size variants that control the row height and cells padding. The three available sizes are md(default), lg and xl.

<>
  <Table size="lg" className="w-125 mt-25 ml-25">
    <Table.Header>
      <Table.Row>
        <Table.HeaderCell>First Name</Table.HeaderCell>
        <Table.HeaderCell>Last Name</Table.HeaderCell>
        <Table.HeaderCell>Age</Table.HeaderCell>
      </Table.Row>
    </Table.Header>
    <Table.Body>
      <Table.Row>
        <Table.Cell>Rakim</Table.Cell>
        <Table.Cell>Jackson</Table.Cell>
        <Table.Cell>35</Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.Cell>Evelyn</Table.Cell>
        <Table.Cell>Smith</Table.Cell>
        <Table.Cell>27</Table.Cell>
      </Table.Row>
    </Table.Body>
  </Table>

  <Table size="xl" className="w-125 mt-25 ml-25">
    <Table.Header>
      <Table.Row>
        <Table.HeaderCell>First Name</Table.HeaderCell>
        <Table.HeaderCell>Last Name</Table.HeaderCell>
        <Table.HeaderCell>Age</Table.HeaderCell>
      </Table.Row>
    </Table.Header>
    <Table.Body>
      <Table.Row>
        <Table.Cell>Rakim</Table.Cell>
        <Table.Cell>Jackson</Table.Cell>
        <Table.Cell>35</Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.Cell>Evelyn</Table.Cell>
        <Table.Cell>Smith</Table.Cell>
        <Table.Cell>27</Table.Cell>
      </Table.Row>
    </Table.Body>
  </Table>
</>

The Table component by default renders with a slight border radius. If you want to remove this, for example if you are rendering the Table inside another component that has border radius, you can remove this by setting corners="square". The default is corners="round".

<Table corners="square">...</Table>

Table.Header accepts a theme prop, the current available options are primary, primaryDark, primaryLight, white and light. The default is primaryDark.

<Table>
  <Table.Header theme="light">...</Table.Header>
</Table>

Table.Body accepts an appearance prop, which determines whether the rows will be alternate coloured or not. The current options are striped and simple, and the default is striped.

<Table>
  <Table.Body appearance="simple">...</Table.Body>
</Table>

Sticky headers

If you wish your table had a sticky header that sticks to the top of the viewport when scrolling, you can add an isSticky flag to the Table.Header subcomponent.

<div className="w-full h-30 overflow-y-auto">
  <Table>
    <Table.Header isSticky>
      <Table.Row>
        <Table.HeaderCell>First Name</Table.HeaderCell>
        <Table.HeaderCell>Last Name</Table.HeaderCell>
        <Table.HeaderCell>Age</Table.HeaderCell>
      </Table.Row>
    </Table.Header>
    <Table.Body>
      <Table.Row>
        <Table.Cell>Rakim</Table.Cell>
        <Table.Cell>Jackson</Table.Cell>
        <Table.Cell>35</Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.Cell>Evelyn</Table.Cell>
        <Table.Cell>Smith</Table.Cell>
        <Table.Cell>27</Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.Cell>John</Table.Cell>
        <Table.Cell>Smith</Table.Cell>
        <Table.Cell>21</Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.Cell>Jane</Table.Cell>
        <Table.Cell>Smith</Table.Cell>
        <Table.Cell>15</Table.Cell>
      </Table.Row>
    </Table.Body>
  </Table>
 </div>

Columns with colspan

You can use colspan in the table header to make one header cover multiple columns


  <Table>
    <Table.Header>
      <Table.Row>
        <Table.HeaderCell colSpan="2">Full Name</Table.HeaderCell>
        <Table.HeaderCell>Age</Table.HeaderCell>
      </Table.Row>
    </Table.Header>
    <Table.Body>
      <Table.Row>
        <Table.Cell>Rakim</Table.Cell>
        <Table.Cell>Jackson</Table.Cell>
        <Table.Cell>35</Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.Cell>Evelyn</Table.Cell>
        <Table.Cell>Smith</Table.Cell>
        <Table.Cell>27</Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.Cell>John</Table.Cell>
        <Table.Cell>Smith</Table.Cell>
        <Table.Cell>21</Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.Cell>Jane</Table.Cell>
        <Table.Cell>Smith</Table.Cell>
        <Table.Cell>15</Table.Cell>
      </Table.Row>
    </Table.Body>
  </Table>

You can also use colSpan to group headers by having multiple header rows, in this case some layout adjustments are required for the header

 <Table>
  <Table.Header className="[&_tr:last-child>th]:rounded-none!">
    <Table.Row>
      <Table.HeaderCell />
      <Table.HeaderCell colSpan="3">
        Scores
      </Table.HeaderCell>
    </Table.Row>
    <Table.Row>
      <Table.HeaderCell>Name</Table.HeaderCell>
      <Table.HeaderCell>Attainment</Table.HeaderCell>
      <Table.HeaderCell>Cognitive</Table.HeaderCell>
      <Table.HeaderCell>Wellbeing</Table.HeaderCell>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Rakim Jackson</Table.Cell>
      <Table.Cell>102</Table.Cell>
      <Table.Cell>108</Table.Cell>
      <Table.Cell>3.4</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Evelyn Smith</Table.Cell>
      <Table.Cell>125</Table.Cell>
      <Table.Cell>116</Table.Cell>
      <Table.Cell>3.2</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>John Smith</Table.Cell>
      <Table.Cell>122</Table.Cell>
      <Table.Cell>137</Table.Cell>
      <Table.Cell>3.9</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>

API Reference

Table
PropTypeDefaultRequired
asJSX.IntrinsicElements--
corners
"round" | "square"
round-
maxRowDepth
number
--
numberOfStickyColumns
number
0-
scrollContainerCls
string | string[]
--
scrollContainerkey
string
--
size
"md" | "lg" | "xl"
md-
Table.Body
PropTypeDefaultRequired
asJSX.IntrinsicElements--
striped
boolean
-
Table.Cell
PropTypeDefaultRequired
asJSX.IntrinsicElements--
Table.Footer
PropTypeDefaultRequired
asJSX.IntrinsicElements--
Table.FooterCell
PropTypeDefaultRequired
asJSX.IntrinsicElements--
Table.Header
PropTypeDefaultRequired
asJSX.IntrinsicElements--
isSticky
boolean
-
theme
"primary" | "primaryDark" | "white" | "primaryLight" | "light"
primaryDark-
Table.HeaderCell
PropTypeDefaultRequired
asJSX.IntrinsicElements--
Table.Row
PropTypeDefaultRequired
asJSX.IntrinsicElements--