@microsoft/fabric-datagrid-angular

Angular 21 component for the Fabric Apps - Analytics DataGrid. This package provides a thin Angular wrapper around the <fabric-data-grid> web component from @microsoft/fabric-datagrid-web-components, offering signal-backed Angular inputs and Angular outputs:

• <fabric-data-grid-ng> — DataGrid component

For the Vega-Lite visualization Angular component, see @microsoft/fabric-visuals-angular.

All rendering logic is handled by the underlying web component, which internally uses React.

Trademarks

This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow Microsoft's Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party's policies.

Architecture

@microsoft/fabric-visuals-core            (framework-agnostic types & tokens)
        ↓
@microsoft/fabric-datagrid                (React DataGrid component)
        ↓
@microsoft/fabric-datagrid-web-components (<fabric-data-grid> custom element, bundles React)
        ↓
@microsoft/fabric-datagrid-angular        (this package — <fabric-data-grid-ng> Angular wrapper)

Installation

npm install @microsoft/fabric-datagrid-angular

Peer dependencies

• @angular/core >= 21.2.0 < 22.0.0
• @angular/common >= 21.2.0 < 22.0.0

Dependencies (installed automatically)

• @microsoft/fabric-datagrid-web-components — the <fabric-data-grid> custom element (bundles React internally)
• @microsoft/fabric-visuals-core — provides DataTable, VisualTheme, and design tokens

Quick Start

import { Component } from '@angular/core';
import { DataGridComponent } from '@microsoft/fabric-datagrid-angular';

@Component({
    selector: 'app-grid',
    standalone: true,
    imports: [DataGridComponent],
    template: `
        <fabric-data-grid-ng
            [columns]="columns"
            [data]="rows"
            [theme]="theme"
            [pageSize]="50"
            (columnsChange)="onColumnsChange($event)"
            [style.height.px]="600"
        />
    `,
})
export class GridComponent {
    columns = [
        { id: 'name', header: 'Name' },
        { id: 'age', header: 'Age', sortable: true },
    ];
    rows = [
        { name: 'Alice', age: 30 },
        { name: 'Bob', age: 25 },
    ];
    theme = { /* ... VisualTheme ... */ };

    onColumnsChange(cols: any[]): void {
        console.log('Columns changed:', cols);
    }
}

Public API

DataGridComponent (<fabric-data-grid-ng>)

Inputs

| Input | Type | Required | Description | |-------|------|----------|-------------| | columns | GridColumnDef[] | no | Column definitions. Auto-derived from DataTable data when omitted. | | data | DataTable \| Row[] \| string | no | Data source. | | defaultSort | SortConfig[] | no | Initial sort configuration (first mount only). | | rowHeight | number | no | Row height in pixels. Defaults to 40. | | theme | VisualTheme | no | Semantic color theme from @microsoft/fabric-visuals-core. | | pageSize | number | no | Rows per page. When set, pagination controls are shown. | | visualFraming | VisualFramingProps | no | Header, Copy action, chromeless mode and frame CSS class. |

Outputs

| Output | Type | Description | |--------|------|-------------| | columnsChange | GridColumnDef[] | Fired when columns are resized or reordered. | | rowToggle | string | Fired when a tree row is expanded/collapsed. | | filterChange | FilterChangeDetail | Fired when a column filter selection changes. |

Re-exported Types

• DataGridProps, GridColumnDef, Row, CellValue, SortConfig, SortDirection, CellRange, FilterChangeDetail
• HeaderProps, VisualContainerCapabilities, VisualFramingProps