Skip to main content


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


import {    provideFASTDesignSystem,    fastDataGridCell,    fastDataGridRow,    fastDataGrid} from "@microsoft/fast-components";
provideFASTDesignSystem()    .register(        fastDataGridCell(),        fastDataGridRow(),        fastDataGrid()    );


<fast-data-grid id="samplegrid"></fast-data-grid>

Note that data must be provided to the grid by setting 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" },]; 

Create your own design#


import {    dataGridCellTemplate,    DataGridCell,} from "@microsoft/fast-foundation";import { dataGridCellStyles as cellStyles } from "./my-data-grid-cell.styles";
export const myDataGridCell = DataGridCell.compose({    baseName: "data-grid-cell",    template: dataGridCellTemplate,    styles: cellStyles,});


import {    dataGridRowTemplate,    DataGridRow,} from "@microsoft/fast-foundation";import { dataGridRowStyles as rowStyles } from "./my-data-grid-row.styles";
export const myDataGridRow = DataGridRow.compose({    baseName: "data-grid-row",    template: dataGridRowTemplate,    styles: rowStyles,});


import {    dataGridTemplate,    DataGrid,} from "@microsoft/fast-foundation";import { dataGridStyles as gridStyles } from "./my-data-grid.styles";
export const myDataGrid = DataGrid.compose({    baseName: "data-grid",    template: dataGridTemplate,    styles: gridStyles,});

Additional resources#