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 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
<TableFixedHeaderFixedHeaderTableHeight="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="@index"><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
<ButtonSize="Size.Small"Color="Color.Primary"Clicked="@ScrollToRow">Scroll To Row</Button><ButtonSize="Size.Small"Color="Color.Primary"Clicked="@ScrollToPixels">Scroll To Pixels</Button><Table@ref="@tableRef"FixedHeaderFixedHeaderTableHeight="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="@index"><TableRowHeader>@index</TableRowHeader><TableRowCell>Column content</TableRowCell><TableRowCell>Column content</TableRowCell><TableRowCell>Column content</TableRowCell></TableRow>
}
</TableBody></Table>
The Resizable property of the Blazorise Table component determines whether the columns of the table can be resized by the user. When Resizable is set to true, the user can click and drag the edges of the column headers to adjust the width of the columns. When Resizable is set to false, the columns are fixed in size and cannot be resized by the user.
The ResizeMode property of the Table component in Blazorise can have two modes: Header and Columns.
Header: When ResizeMode is set to Header, the user can resize the columns by dragging the edges of the column headers. This means that the user can only adjust the width of the columns by interacting with the header row of the table.
Columns: When ResizeMode is set to Columns, the user can resize the columns by dragging the edges of the entire column, including the header and the body cells. This means that the user can adjust the width of the columns by interacting with any part of the column, not just the header.
To set the Resizable property of a Table component in Blazorise, you can use the following syntax:
To use the grouping feature in the Table component from Blazorise, you must manually define the groups using the TableRowGroup component. This component wraps the rows that belong to a specific group and allows you to customize the appearance and behavior of the group.
In this example, the Table component is grouped by the "Category" column, and the rows are organized into two groups: "Fruits" and "Vegetables". The TableRowGroup component specifies the value of the grouped column (e.g. "Fruits" or "Vegetables") and wraps the rows that belong to that group.