Data grid

The <FluentDataGrid> component is used to display tabular data. The <FluentDataGridRow> and <FluentDataGridCell> components are typically created programmatically by the parent grid but some authors may find it useful to create them manually.

Do not use the RowStyle parameter to dynamically update a row style after rendering (for example to highlight a row which was clicked on) as this will interfere with the DataGrid scripts that use this attribute as well. Use the RowClass instead.

Accessibility

You can use the Arrow keys to navigate through a DataGrid. When a header cell is focused and the column is sortable, you can use the Tab key to select the sort button. Pressing the Enter key will toggle the sorting direction. Pressing Ctrl+Enter removes the column sorting and restores the default/start situation with regards to sorting. You cannot remove the default grid sorting with this key combination.

When a header cell is focused and the column allows setting options, you can use the Tab key to select the options button. Pressing the Enter key then will toggle the options popover. Pressing Esc closes the popover .

When a grid allows resizing of the columns, you can use the + and - keys to resize the column the focused header belongs to. Incrementing/decrementing width is done in steps of 10 pixels at a time. You can reset to the original initial column widths by pressing Shift + r.

When a row cell is focused and the grid contains a SelectColumn column, you can use the Enter key to select or unselect the current row.

Sorting

The DataGrid supports sorting by clicking on the column headers. The default sort direction is ascending. Clicking on the same column header again will toggle the sort direction. A sort can be removed by right clicking (or by pressing Shift+R) on the header column (with exception of the default sort).

Row size

As of v4.11.0, the Datagrid offers a RowSize parameter which allows you to use different preset row heights. The value uses the DataGridRowSize enumeration for its type. When using Virtualize, the ItemSize value is used is still used to indicate the row height.

Resizing columns

The DataGrid supports resizing columns by both dragging and through column option popups in exact or discrete mode. As of v4.12.0, the default behavior is to initiate a resize action by dragging the column edge on every row. In earlier versions this could only be done on the header column edge. To go back to the previous behavior, the new (as of v4.12.1) ResizeColumnOnAllRows parameter can be set to false.

The following parameters can be used to tweak the resize handle appearance:

.fluent-data-grid {
        --fluent-data-grid-resize-handle-color: var(--accent-fill-rest);
        --fluent-data-grid-resize-handle-width: 1px;
        --fluent-data-grid-header-opacity: 0.5;
        

DisplayMode

The DataGrid supports 2 different display modes through the DisplayMode parameter: DataGridDisplayMode.Grid (default) and DataGridDisplayMode.Table. When set to Grid, the GridTableColumns parameter cam be used set specify column widths in fractions. It basically provides an HTML table element with a display: grid; style. The Table mode uses standard HTML table elements and rendering. Column widths in that mode are best specified through the Width parameter of the columns.

Specifically when using Virtualize, it is higly recommended to use the Table display mode as the Grid mode can exhibit some odd behaviour when scrolling.

Change strings used in the UI

The DataGrid has a number of strings that are used in the UI. These can be changed by setting the ColumnOptionLabels, ColumnResizeLabels and ColumnSortLabels parameters. Each of these parameters is a record that contains properties for the strings that that specific piece of UI is using. There is a default implementation for each record. See below for a simplified example on how you can change these strings.

private ColumnResizeLabels _resizeLabels = ColumnResizeLabels.Default;
:
:
 protected override async Task OnInitializedAsync()
 {
     _resizeLabels = ColumnResizeLabels.Default with
     {
         ExactLabel = "...",
         ResizeMenu = "..."

     };
:
:

You only need to override the values that you actually want to change.

Using the DataGrid component with EF Core

If you want to use the FluentDataGrid with data provided through EF Core, you need to install an additional package so the grid knows how to resolve queries asynchronously for efficiency.

Installation

dotnet add package Microsoft.FluentUI.AspNetCore.Components.DataGrid.EntityFrameworkAdapter

Usage

builder.Services.AddDataGridEntityFrameworkAdapter();

Using the DataGrid component with OData

Added in 4.11.0

If you want to use the FluentDataGrid with data provided through OData, you need to install an additional package so the grid knows how to resolve queries asynchronously for efficiency.

Installation

dotnet add package Microsoft.FluentUI.AspNetCore.Components.DataGrid.ODataAdapter

Usage

builder.Services.AddDataGridODataAdapter();

Examples

See the following pages for examples and additional documentation on the situations that ech example shows.

Documentation

Column menu labels and icons

For customizing/translating the labels and icons used in the column menus, the following records are available. They can be applied to a grid by setting the respective parameters to an instance of these records. If you do not want to use an icon for a menu item, supply a null value to the Icon property in a record:

        ColumnResizeLabels resizeLabels = ColumnResizeLabels.Default with
        {
            DiscreteLabel = "Abcd efg",
            ResetAriaLabel = "hij klm",
            Icon = null
        };
    

Refreshing data programmatically

Sometimes you might know that the data source's contents will have changed. For example, the user may have saved some changes that will affect the data, or they might have changed the current query parameters. In any such case, you can call the grid's RefreshDataAsync method:

    <FluentDataGrid ... @ref="myGrid">
    ...
    </FluentDataGrid>

    @code {
    FluentDataGrid<MyDataType> myGrid;

    async Task HandleSomeEvent()
    {
    ...

    // We can force the grid to reload the current data
    await myGrid.RefreshDataAsync();
    }
    }