# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Blazorise Table component
Basic table is just for data display.
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.
<Table>
the maincontainer
<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
Examples
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
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<Table Striped> <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>
Hoverable
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<Table Hoverable> <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>
Bordered
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<Table Bordered> <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>
Borderless
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<Table Borderless> <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>
Small table
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<Table Narrow> <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>
Light header
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<Table> <TableHeader ThemeContrast="ThemeContrast.Light"> <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>
Dark header
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<Table> <TableHeader ThemeContrast="ThemeContrast.Dark"> <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>
Fixed header
# | First Name | Last Name | Username |
---|---|---|---|
1 | Column content | Column content | Column content |
2 | Column content | Column content | Column content |
3 | Column content | Column content | Column content |
4 | Column content | Column content | Column content |
5 | Column content | Column content | Column content |
6 | Column content | Column content | Column content |
7 | Column content | Column content | Column content |
8 | Column content | Column content | Column content |
9 | Column content | Column content | Column content |
10 | Column content | Column content | Column content |
<Table FixedHeader FixedHeaderTableHeight="300px"> <TableHeader> <TableRow> <TableHeaderCell>#</TableHeaderCell> <TableHeaderCell>First Name</TableHeaderCell> <TableHeaderCell>Last Name</TableHeaderCell> <TableHeaderCell>Username</TableHeaderCell> </TableRow> </TableHeader> <TableBody> @for ( int i = 1; i <= 10; ++i ) { var index = i.ToString(); <TableRow @key=""> <TableRowHeader>@index</TableRowHeader> <TableRowCell>Column content</TableRowCell> <TableRowCell>Column content</TableRowCell> <TableRowCell>Column content</TableRowCell> </TableRow> } </TableBody> </Table>
Scroll To a Row Or Pixel Offset
# | First Name | Last Name | Username |
---|---|---|---|
1 | Column content | Column content | Column content |
2 | Column content | Column content | Column content |
3 | Column content | Column content | Column content |
4 | Column content | Column content | Column content |
5 | Column content | Column content | Column content |
6 | Column content | Column content | Column content |
7 | Column content | Column content | Column content |
8 | Column content | Column content | Column content |
9 | Column content | Column content | Column content |
10 | Column content | Column content | Column content |
<Button Size="Size.Small" Color="Color.Primary" Clicked="">Scroll To Row</Button> <Button Size="Size.Small" Color="Color.Primary" Clicked="">Scroll To Pixels</Button> <Table @ref="" FixedHeader FixedHeaderTableHeight="300px"> <TableHeader> <TableRow> <TableHeaderCell>#</TableHeaderCell> <TableHeaderCell>First Name</TableHeaderCell> <TableHeaderCell>Last Name</TableHeaderCell> <TableHeaderCell>Username</TableHeaderCell> </TableRow> </TableHeader> <TableBody> @for ( int i = 1; i <= 10; ++i ) { var index = i.ToString(); <TableRow @key=""> <TableRowHeader>@index</TableRowHeader> <TableRowCell>Column content</TableRowCell> <TableRowCell>Column content</TableRowCell> <TableRowCell>Column content</TableRowCell> </TableRow> } </TableBody> </Table>
@code { Table tableRef; private Task ScrollToRow() => tableRef.ScrollToRow( 1 ).AsTask(); private Task ScrollToPixels() => tableRef.ScrollToPixels( 250 ).AsTask(); }
Resizable
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<Table Bordered Resizable ResizeMode="TableResizeMode.Columns"> <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>
Attributes
Table
Name | Description | Type | Default |
---|---|---|---|
FullWidth |
Makes the table to fill entire horizontal space. | bool |
false |
Striped |
Adds stripes to the table. | bool |
false |
Bordered |
Adds borders to all the cells. | bool |
false |
Hoverable |
Adds a hover effect on each row. | bool |
false |
Borderless |
Table without any borders. | bool |
false |
Narrow |
Makes the table more compact by cutting cell padding in half. | bool |
false |
Responsive |
Makes table responsive by adding the horizontal scroll bar. | bool |
false |
FixedHeader |
Makes table have a fixed header and enables a scrollbar in the table body. | bool |
false |
FixedHeaderTableHeight |
Sets the table height when FixedHeader feature is enabled (defaults to 300px). | string |
300px |
FixedHeaderTableMaxHeight |
Sets the table max height when FixedHeader feature is enabled.
|
string |
300px |
Resizable |
Defines whether users can resize Table’s columns. | bool |
false |
ResizeMode |
Defines the resize mode of the Table’s columns. | TableResizeMode |
Header |