Table

Basics

Table displays information in a way that’s easy to scan, so that users can look for patterns and insights. They can be embedded in primary content, such as cards.

Structure

  • <Table> the main container
    • <TableHeader> the optional top part of the table
      • <TableRow> header row
        • <TableHeaderCell> a header cell
    • <TableFooter> the optional bottom part of the table
    • <TableBody> the main content of the table
      • <TableRow> each table row
        • <TableRowHeader> a table cell heading
        • <TableRowCell> a table cell

Example

Simple

<Table>
    <TableHeader>
        <TableRow>
            <TableHeaderCell>#</TableHeaderCell>
            <TableHeaderCell>First Name</TableHeaderCell>
            <TableHeaderCell>Last Name</TableHeaderCell>
            <TableHeaderCell>Username</TableHeaderCell>
        </TableRow>
    </TableHeader>
    <TableBody>
        <TableRow>
            <TableRowHeader>1</TableRowHeader>
            <TableRowCell>Mark</TableRowCell>
            <TableRowCell>Otto</TableRowCell>
            <TableRowCell>@@mdo</TableRowCell>
        </TableRow>
        <TableRow>
            <TableRowHeader>2</TableRowHeader>
            <TableRowCell>Jacob</TableRowCell>
            <TableRowCell>Thornton</TableRowCell>
            <TableRowCell>@@fat</TableRowCell>
        </TableRow>
        <TableRow>
            <TableRowHeader>3</TableRowHeader>
            <TableRowCell>Larry</TableRowCell>
            <TableRowCell>the Bird</TableRowCell>
            <TableRowCell>@@twitter</TableRowCell>
        </TableRow>
    </TableBody>
</Table>

Striped

<Table Striped="true">
    ...
</Table>

Hoverable

<Table Hoverable="true">
    ...
</Table>

Bordered

<Table Bordered="true">
    ...
</Table>

Borderless

<Table Borderless="true">
    ...
</Table>

Small table

<Table Narrow="true">
    ...
</Table>

Light header

<Table>
  <TableHeader ThemeContrast="ThemeContrast.Light">
     ...
  </TableHeader>
    ...
</Table>

Dark header

<Table>
  <TableHeader ThemeContrast="ThemeContrast.Dark">
     ...
  </TableHeader>
    ...
</Table>

Attributes

Name Type Default Description
FullWidth boolean false Makes the table to fill entire horizontal space.
Striped boolean false Adds stripes to the table.
Bordered boolean false Adds borders to all the cells.
Hoverable boolean false Adds a hover effect on each row.
Borderless boolean false Table without any borders.
Narrow boolean false Makes the table more compact by cutting cell padding in half.