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

Examples

Simple

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<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 @twitter
<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 @twitter
<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 @twitter
<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 @twitter
<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 @twitter
<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 @twitter
<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 @twitter
<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="@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
<Table Bordered FixedColumns>
    <TableHeader>
        <TableRow>
            <TableHeaderCell Width="@Width.Px(50)" FixedPosition="TableColumnFixedPosition.Start">#</TableHeaderCell>
            <TableHeaderCell Width="@Width.Px(100)">Column 1</TableHeaderCell>
            <TableHeaderCell Width="@Width.Px(150)" FixedPosition="TableColumnFixedPosition.Start">Fixed heading</TableHeaderCell>
            <TableHeaderCell Width="@Width.Px(100)">Column 2</TableHeaderCell>
            <TableHeaderCell Width="@Width.Px(450)">Column 3</TableHeaderCell>
            <TableHeaderCell Width="@Width.Px(230)">Column 4</TableHeaderCell>
            <TableHeaderCell Width="@Width.Px(220)" FixedPosition="TableColumnFixedPosition.End">Fixed end heading</TableHeaderCell>
            <TableHeaderCell Width="@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">
                <TableRowHeader Width="@Width.Px(50)" FixedPosition="TableColumnFixedPosition.Start">@index</TableRowHeader>
                <TableRowCell Width="@Width.Px(100)">Column 1</TableRowCell>
                <TableRowCell Width="@Width.Px(150)" FixedPosition="TableColumnFixedPosition.Start">Fixed column</TableRowCell>
                <TableRowCell Width="@Width.Px(200)">Column 2</TableRowCell>
                <TableRowCell Width="@Width.Px(450)">Column 3</TableRowCell>
                <TableRowCell Width="@Width.Px(230)">Column 4</TableRowCell>
                <TableRowCell Width="@Width.Px(220)" FixedPosition="TableColumnFixedPosition.End">Fixed end content</TableRowCell>
                <TableRowCell Width="@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
<Button Size="Size.Small" Color="Color.Primary" Clicked="@ScrollToRow">Scroll To Row</Button>
<Button Size="Size.Small" Color="Color.Primary" Clicked="@ScrollToPixels">Scroll To Pixels</Button>

<Table @ref="@tableRef" 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="@index">
                <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

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:

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<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>

Grouping

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.

Name Color
Fruits
Vegetables
<Table>
    <TableHeader>
        <TableRow>
            <TableHeaderCell>Name</TableHeaderCell>
            <TableHeaderCell>Color</TableHeaderCell>
        </TableRow>
    </TableHeader>
    <TableBody>
        <TableRowGroup Title="Fruits">
            <TableRow>
                <TableRowCell>Apple</TableRowCell>
                <TableRowCell>Red</TableRowCell>
            </TableRow>
            <TableRow>
                <TableRowCell>Banana</TableRowCell>
                <TableRowCell>Yellow</TableRowCell>
            </TableRow>
        </TableRowGroup>
        <TableRowGroup Title="Vegetables">
            <TableRow>
                <TableRowCell>Carrot</TableRowCell>
                <TableRowCell>Orange</TableRowCell>
            </TableRow>
            <TableRow>
                <TableRowCell>Pepper</TableRowCell>
                <TableRowCell>Green</TableRowCell>
            </TableRow>
        </TableRowGroup>
    </TableBody>
</Table>

API

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
FixedColumns Makes table have a fixed set of columns. This will make it so that the table columns could be fixed to the side of the table. 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

TableRowGroup

Name Description Type Default
Expanded Defines if the group is expanded. bool false
Toggleable Defines if the group Expanded property can be toggled by clicking. It is still possible to toggle it programatically. bool true
ColumnSpan Determines the column span for the inner table cell. int 1000
Clicked Occurs when the row is clicked. EventCallback<BLMouseEventArgs>
DoubleClicked Occurs when the row is double clicked. EventCallback<BLMouseEventArgs>
Title Specifies the title to be rendered inside the TableRowGroup. string null
TitleTemplate Specifies the custom title content to be rendered inside the TableRowGroup. It has higher priority over the Title parameter. RenderFragment null

TableRowcell

Name Description Type Default
Color Gets or sets the cell variant color. Color
RowSpan Number of rows a cell should span. int? null
ColumnSpan Number of columns a cell should span. int? null
FixedPosition Defines the fixed position of the row cell within the table. TableColumnFixedPosition TableColumnFixedPosition.None
Clicked Occurs when the row cell is clicked. EventCallback<BLMouseEventArgs>
ChildContent Specifies the content to be rendered inside this TableRowCell. RenderFragment null
ClickPreventDefault Used to prevent the default action for an OnClickHandler. bool false
ClickStopPropagation Used to stop progation of the click action event. bool false
On this page