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>
Fixed columns
Implementing this feature involves setting the FixedPosition attribute to TableColumnFixedPosition.Start for anchoring to the left, or TableColumnFixedPosition.End for anchoring to the right, on a cell. Additionally, you must enable fixed columns on a table with the FixedColumns attribute.
#
Column 1
Fixed heading
Column 2
Column 3
Column 4
Fixed end heading
Fixed end heading
1
Column 1
Fixed column
Column 2
Column 3
Column 4
Fixed end content
Fixed end content
2
Column 1
Fixed column
Column 2
Column 3
Column 4
Fixed end content
Fixed end content
3
Column 1
Fixed column
Column 2
Column 3
Column 4
Fixed end content
Fixed end content
<TableBorderedFixedColumns><TableHeader><TableRow><TableHeaderCellWidth="@Width.Px(50)"FixedPosition="TableColumnFixedPosition.Start">#</TableHeaderCell><TableHeaderCellWidth="@Width.Px(100)">Column 1</TableHeaderCell><TableHeaderCellWidth="@Width.Px(150)"FixedPosition="TableColumnFixedPosition.Start">Fixed heading</TableHeaderCell><TableHeaderCellWidth="@Width.Px(100)">Column 2</TableHeaderCell><TableHeaderCellWidth="@Width.Px(450)">Column 3</TableHeaderCell><TableHeaderCellWidth="@Width.Px(230)">Column 4</TableHeaderCell><TableHeaderCellWidth="@Width.Px(220)"FixedPosition="TableColumnFixedPosition.End">Fixed end heading</TableHeaderCell><TableHeaderCellWidth="@Width.Px(200)"FixedPosition="TableColumnFixedPosition.End">Fixed end heading</TableHeaderCell></TableRow></TableHeader><TableBody>@for ( int i = 1; i <= 3; ++i )
{
var index = i.ToString();
<TableRow@key="@index"><TableRowHeaderWidth="@Width.Px(50)"FixedPosition="TableColumnFixedPosition.Start">@index</TableRowHeader><TableRowCellWidth="@Width.Px(100)">Column 1</TableRowCell><TableRowCellWidth="@Width.Px(150)"FixedPosition="TableColumnFixedPosition.Start">Fixed column</TableRowCell><TableRowCellWidth="@Width.Px(200)">Column 2</TableRowCell><TableRowCellWidth="@Width.Px(450)">Column 3</TableRowCell><TableRowCellWidth="@Width.Px(230)">Column 4</TableRowCell><TableRowCellWidth="@Width.Px(220)"FixedPosition="TableColumnFixedPosition.End">Fixed end content</TableRowCell><TableRowCellWidth="@Width.Px(200)"FixedPosition="TableColumnFixedPosition.End">Fixed end 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.