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 IsStriped="true">
    ...
</Table>

Hoverable

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

Bordered

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

Borderless

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

Small table

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

Light header

<Table Theme="Theme.Light">
    ...
</Table>

Dark header

<Table Theme="Theme.Dark">
    ...
</Table>

Attributes

Name Type Default Description
IsFullWidth boolean false Makes the table to fill entire horizontal space.
IsStriped boolean false Adds stripes to the table.
IsBordered boolean false Adds borders to all the cells.
IsHoverable boolean false Adds a hover effect on each row.
IsBorderless boolean false Table without any borders.
IsNarrow boolean false Makes the table more compact by cutting cell padding in half.