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

  • <TableContainer> 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

Note: TableContainer will be renamed to Table once the Razor issue is resolved.

Example

Simple

<TableContainer>
    <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>
</TableContainer>

Striped

<TableContainer IsStriped="true">
    ...
</TableContainer>

Hoverable

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

Bordered

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

Borderless

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

Small table

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

Light header

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

Dark header

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

Attributes

Name Type Default Description
IsFullWidth boolean false You can have a full width table.
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 Cutta the cell padding in half.