Data Grid

fluent-data-grid

The fluent-data-grid component is used to display tabular data. The fluent-data-grid-row and fluent-data-grid-cell components are typically created programmatically by the parent grid but some authors may find it useful to create them manually.

Setup

import {
    provideFluentDesignSystem,
    fluentDataGridCell,
    fluentDataGridRow,
    fluentDataGrid
} from "@fluentui/web-components";

provideFluentDesignSystem()
    .register(
        fluentDataGridCell(),
        fluentDataGridRow(),
        fluentDataGrid()
    );

Example

Note: data must be provided to the grid via a property.

document.getElementById("samplegrid").rowsData = [
    { item1: "value 1-1", item2: "value 2-1" },
    { item1: "value 1-2", item2: "value 2-2" },
    { item1: "value 1-3", item2: "value 2-3" },
]; 

Please see the Blazor documentation and demo site for more information.