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>

Fixed Header

<Table>
  <TableHeader FixedHeader="true" FixedHeaderTableHeight="300px">
     ...
  </TableHeader>
    ...
</Table>

Scroll To a Row Or Pixel Offset

<Table>
  <TableHeader @ref="@tableRef" FixedHeader="true" FixedHeaderTableHeight="300px">
     ...
  </TableHeader>
    ...
</Table>

private Task ScrollToRow()
    => tableRef.ScrollToRow( 1 ).AsTask();

private Task ScrollToPixels()
    => tableRef.ScrollToPixels( 250 ).AsTask();

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.
Responsive	boolean	false	Makes table responsive by adding the horizontal scroll bar.
FixedHeader	boolean	false	Makes table have a fixed header and enables a scrollbar in the table body.
FixedHeaderTableHeight	string	300px	Sets the table height when FixedHeader feature is enabled (defaults to 300px).
Resizable	boolean	false	Defines whether users can resize Table’s columns.
ResizeMode	TableResizeMode	Header	Defines the resize mode of the Table’s columns.