Angular

High-Performance Angular Data Grid

A professional data table engineered for performance. Featureful and easy to configure, Bryntum Angular Grid delivers a top-notch user experience, for simple and complex data tables.

View Examples

Download Trial

Quickly set up a data table for Angular

Feature-rich data table library for Angular

Bryntum Angular Grid comes with selecting, editing, filtering, sorting, file exporting, and printing features, and so much more! Display and manage data as a tree or nested grid, or in multiple grid instances. Browse our interactive demos:

View all features

Grid component for Angular code example

The following code example shows the setup for an Angular Grid project with example data in app.component.ts.

import { Component, ViewChild } from '@angular/core';
import { BryntumGridComponent } from '@bryntum/grid-angular';
import { gridConfig } from './app.config'; 

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    data = [
        { name: 'Dan Stevenson', city: 'Los Angeles' },
        { name: 'Talisha Babin', city: 'Paris' }
    ];

    gridConfig = gridConfig; // Assigning gridConfig directly here

    @ViewChild('grid') gridComponent!: BryntumGridComponent;
}

Exceptional Angular Grid performance

Bryntum Angular Grid uses several techniques for peak rendering and scrolling performance:

Virtual rendering
Minimal DOM interactions
Extensive element reuse
Modern CSS optimizations

Test the Bryntum Angular Grid performance with our big data set demo.

Performance Review

Dynamic rendering with Angular template syntax

Render custom columns, headers, and tooltips using Angular components in the Bryntum Angular Grid. Easily use Angular HTML-based template syntax in components and keep rendering logic and markup in sync.

But our Bryntum renderer efficiently implements conditional logic and outputs visually rich cell content, so you don’t have to use Angular templating to render content.

View docs

columns : [
    {
        text: 'Angular Component',
        field: 'color',
        htmlEncode: false,
        renderer(data: any) {
            const { record, value } = data;
            // Use Custom Element with attributes
            return `<color-renderer value="${value.toLowerCase()}" name="${record.name}"></color-renderer>`;
        }
    }
]

Themed, customizable, and responsive

Whether you prefer ready-made styles or have your own vision, we’ve got you covered. Bryntum Angular Grid ships with five elegant themes you can effortlessly adapt, or create a custom theme.