Skip to main content

fast-data-grid

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.

Setup

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

provideFASTDesignSystem()
.register(
fastDataGridCell(),
fastDataGridRow(),
fastDataGrid()
);

Usage

<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

DataGridCell

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,
});

DataGridRow

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,
});

DataGrid

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,
});

API

class: DataGridCell

Superclass

NameModulePackage
FoundationElement/src/foundation-element/foundation-element.js

Fields

NamePrivacyTypeDefaultDescriptionInherited From
cellTypepublicDataGridCellTypesThe type of cell
gridColumnpublicstringThe column index of the cell. This will be applied to the css grid-column-index value applied to the cell
rowDatapublicobject or nullnullThe base data for the parent row
columnDefinitionpublicColumnDefinition or nullnullThe base data for the column
$presentationpublicComponentPresentation or nullA property which resolves the ComponentPresentation instance for the current component.FoundationElement
templatepublicElementViewTemplate or void or nullSets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.FoundationElement
stylespublicElementStyles or void or nullSets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition.FoundationElement

Methods

NamePrivacyDescriptionParametersReturnInherited From
handleFocusinpublice: FocusEventvoid
handleFocusoutpublice: FocusEventvoid
handleKeydownpublice: KeyboardEventvoid
templateChangedprotectedvoidFoundationElement
stylesChangedprotectedvoidFoundationElement

Events

NameTypeDescriptionInherited From
cell-focusedFires a custom 'cell-focused' event when focus is on the cell or its contents

Attributes

NameFieldInherited From
cell-typecellType
grid-columngridColumn

Slots

NameDescription
The default slot for cell contents. The "cell contents template" renders here.

class: DataGridRow

Superclass

NameModulePackage
FoundationElement/src/foundation-element/foundation-element.js

Fields

NamePrivacyTypeDefaultDescriptionInherited From
gridTemplateColumnspublicstringString that gets applied to the the css gridTemplateColumns attribute for the row
rowTypepublicDataGridRowTypesThe type of row
rowDatapublicobject or nullnullThe base data for this row
columnDefinitionspublicColumnDefinition[] or nullnullThe column definitions of the row
cellItemTemplatepublicViewTemplate or undefinedThe template used to render cells in generated rows.
headerCellItemTemplatepublicViewTemplate or undefinedThe template used to render header cells in generated rows.
rowIndexpublicnumberThe index of the row in the parent grid. This is typically set programmatically by the parent grid.
$presentationpublicComponentPresentation or nullA property which resolves the ComponentPresentation instance for the current component.FoundationElement
templatepublicElementViewTemplate or void or nullSets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.FoundationElement
stylespublicElementStyles or void or nullSets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition.FoundationElement

Methods

NamePrivacyDescriptionParametersReturnInherited From
handleFocusoutpublice: FocusEventvoid
handleCellFocuspublice: Eventvoid
handleKeydownpublice: KeyboardEventvoid
templateChangedprotectedvoidFoundationElement
stylesChangedprotectedvoidFoundationElement

Events

NameTypeDescriptionInherited From
row-focusedFires a custom 'row-focused' event when focus is on an element (usually a cell or its contents) in the row

Attributes

NameFieldInherited From
grid-template-columnsgridTemplateColumns
row-typerowType

Slots

NameDescription
The default slot for custom cell elements

Variables

NameDescriptionType
GenerateHeaderOptionsEnumerates the data grid auto generated header options default option generates a non-sticky header row{ none: "none", default: "default", sticky: "sticky", }
DataGridCellTypesEnumerates possible data grid cell types.{ default: "default", columnHeader: "columnheader", rowHeader: "rowheader", }
DataGridRowTypesEnumerates possible data grid row types{ default: "default", header: "header", stickyHeader: "sticky-header", }

class: DataGrid

Superclass

NameModulePackage
FoundationElement/src/foundation-element/foundation-element.js

Static Fields

NamePrivacyTypeDefaultDescriptionInherited From
generateColumnspublicgenerates a basic column definition by examining sample row data

Fields

NamePrivacyTypeDefaultDescriptionInherited From
noTabbingpublicbooleanfalseWhen true the component will not add itself to the tab queue. Default is false.
generateHeaderpublicGenerateHeaderOptionsWhether the grid should automatically generate a header row and its type
gridTemplateColumnspublicstringString that gets applied to the the css gridTemplateColumns attribute of child rows
rowsDatapublicobject[][]The data being displayed in the grid
columnDefinitionspublicColumnDefinition[] or nullnullThe column definitions of the grid
rowItemTemplatepublicViewTemplateThe template to use for the programmatic generation of rows
cellItemTemplatepublicViewTemplate or undefinedThe template used to render cells in generated rows.
headerCellItemTemplatepublicViewTemplate or undefinedThe template used to render header cells in generated rows.
focusRowIndexpublicnumber0The index of the row that will receive focus the next time the grid is focused. This value changes as focus moves to different rows within the grid. Changing this value when focus is already within the grid moves focus to the specified row.
focusColumnIndexpublicnumber0The index of the column that will receive focus the next time the grid is focused. This value changes as focus moves to different rows within the grid. Changing this value when focus is already within the grid moves focus to the specified column.
rowElementTagpublicstringSet by the component templates.
$presentationpublicComponentPresentation or nullA property which resolves the ComponentPresentation instance for the current component.FoundationElement
templatepublicElementViewTemplate or void or nullSets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.FoundationElement
stylespublicElementStyles or void or nullSets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition.FoundationElement

Methods

NamePrivacyDescriptionParametersReturnInherited From
templateChangedprotectedvoidFoundationElement
stylesChangedprotectedvoidFoundationElement

Attributes

NameFieldInherited From
no-tabbingnoTabbing
generate-headergenerateHeader
grid-template-columnsgridTemplateColumns

Slots

NameDescription
The default slot for custom row elements

Additional resources