Angular wrapper for Bryntum Grid

This package provides a wrapper that turns Bryntum Grid into an Angular component, exposing configuration options, properties, features, and events.

Version Requirement

Wrapper is compiled for the Angular Ivy rendering engine (Angular 12+).

• Angular: 12 with Ivy support or higher
• TypeScript: 4.2 or higher
• Vite 5 or higher (starting with Angular 17)

Package Contents

| Path | Description | |------------|----------------------------------| | bundles/ | UMD bundles with source maps | | lib/ | Component type definitions | | src/ | Original TypeScript source files |

Installation

Angular Wrapper

npm install @bryntum/grid-angular@latest

Component Package (Required)

npm install @bryntum/grid@latest

Try Bryntum Online Demos

• View Online Angular Demos

Quick Start

Edit the src/app/app-module.ts file and add the following import:

import { BryntumGridModule } from '@bryntum/grid-angular';

Next, add BryntumGridModule to imports[] :

@NgModule({
    imports : [
        BryntumGridModule
    ]
})

Create src/app/app.config.ts file with the following content:

import { BryntumGridProps } from '@bryntum/grid-angular';

export const gridProps: BryntumGridProps = {
    columns : [
        {
            text   : 'Name',
            field  : 'name',
            flex   : 1,
            editor : {
                type     : 'textfield',
                required : true
            }
        }, {
            text  : 'Age',
            field : 'age',
            width : 100,
            type  : 'number'
        }, {
            text  : 'City',
            field : 'city',
            flex  : 1
        }, {
            text  : 'Food',
            field : 'food',
            flex  : 1
        }, {
            text     : 'Color',
            field    : 'color',
            width    : 80,
            type     : 'column',
            renderer : ({ cellElement, value }) => {
                cellElement.style.color = value;
                cellElement.style.fontWeight = '700';
                return value;
            }
        }
    ],

    data : [
        { id : 1, name : 'Don A Taylor', age : 30, city : 'Moscow', food : 'Salad', color : 'Black' },
        { id : 2, name : 'John B Adams', age : 65, city : 'Paris', food : 'Bolognese', color : 'Orange' },
        { id : 3, name : 'John Doe', age : 40, city : 'London', food : 'Fish and Chips', color : 'Blue' },
        { id : 4, name : 'Maria Garcia', age : 28, city : 'Madrid', food : 'Paella', color : 'Green' },
        { id : 5, name : 'Li Wei', age : 35, city : 'Beijing', food : 'Dumplings', color : 'Yellow' },
        { id : 6, name : 'Sara Johnson', age : 32, city : 'Sydney', food : 'Sushi', color : 'Purple' },
        { id : 7, name : 'Lucas Brown', age : 22, city : 'Toronto', food : 'Poutine', color : 'Orange' },
        { id : 8, name : 'Emma Wilson', age : 27, city : 'Paris', food : 'Croissant', color : 'Pink' },
        { id : 9, name : 'Ivan Petrov', age : 45, city : 'St. Petersburg', food : 'Borscht', color : 'Grey' },
        { id : 10, name : 'Zhang Ming', age : 50, city : 'Shanghai', food : 'Hot Pot', color : 'Purple' },
        { id : 11, name : 'Sophia Martinez', age : 20, city : 'Mexico City', food : 'Tacos', color : 'Crimson' },
        { id : 12, name : 'Noah Smith', age : 55, city : 'Cape Town', food : 'Biltong', color : 'Turquoise' },
        { id : 13, name : 'Isabella Jones', age : 33, city : 'Rio de Janeiro', food : 'Feijoada', color : 'Magenta' },
        { id : 14, name : 'Ethan Taylor', age : 29, city : 'Chicago', food : 'Deep-Dish Pizza', color : 'Cyan' },
        { id : 15, name : 'Olivia Brown', age : 37, city : 'Berlin', food : 'Schnitzel', color : 'Maroon' },
        { id : 16, name : 'Mia Wilson', age : 26, city : 'Rome', food : 'Pasta', color : 'Olive' },
        { id : 17, name : 'Jacob Miller', age : 60, city : 'Amsterdam', food : 'Stroopwafel', color : 'Lime' },
        { id : 18, name : 'Chloe Davis', age : 23, city : 'Los Angeles', food : 'Burger', color : 'Teal' },
        { id : 19, name : 'Aiden Martinez', age : 48, city : 'Buenos Aires', food : 'Asado', color : 'Violet' },
        { id : 20, name : 'Liam Lee', age : 38, city : 'Seoul', food : 'Kimchi', color : 'Indigo' },
        { id : 21, name : 'Sophie Kim', age : 21, city : 'Tokyo', food : 'Ramen', color : 'Pink' },
        { id : 22, name : 'Alexander Nguyen', age : 41, city : 'Hanoi', food : 'Pho', color : 'Coral' },
        { id : 23, name : 'Ella Patel', age : 19, city : 'Mumbai', food : 'Curry', color : 'Amber' },
        { id : 24, name : 'James O Connor', age : 34, city : 'Dublin', food : 'Irish Stew', color : 'Green' },
        { id : 25, name : 'Isabelle Chen', age : 31, city : 'Hong Kong', food : 'Dim Sum', color : 'Brown' }
    ]
};

Update the src/app/app.ts file with the following content:

/**
 * App component script
 */
import { Component, ViewChild } from '@angular/core';
import { BryntumGridComponent } from '@bryntum/grid-angular';
import { gridProps } from './app.config';

@Component({
    selector    : 'app-root',
    standalone  : false,
    templateUrl : './app.html',
    styleUrl    : './app.css',
})
export class App {

    gridProps = gridProps;

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

Edit the src/app/app.html file and replace the content with the following:

<bryntum-grid
    #grid
    [data] = "gridProps.data!"
    [columns] = "gridProps.columns!"
></bryntum-grid>

Lastly, add some styling to your styles.css :

/* FontAwesome is used for icons */
@import '@bryntum/grid/fontawesome/css/fontawesome.css';
@import '@bryntum/grid/fontawesome/css/solid.css';
/* Structural CSS */
@import "@bryntum/grid/grid.css";
/* Bryntum theme of your choice */
@import "@bryntum/grid/material3-light.css";

Integration Guide

For details on installing and using this package, see the Angular Integration Guide.

Wrappers

Angular wrappers encapsulate Bryntum components as native Angular components, exposing all configuration options, properties, features, and events through Angular-familiar patterns like inputs, outputs, and templates.

Visit Wrappers documentation for the complete list of available wrapper components.

Features

Features are optional modules that extend Bryntum Grid functionality. Each feature is suffixed with Feature and can be enabled and configured through standard Angular inputs.

Visit Features documentation for the complete list of available features and their configuration options.

Explore All Bryntum Products

• Bryntum Grid - High-performance data grid
• Bryntum Scheduler - Resource scheduling component
• Bryntum Scheduler Pro - Advanced scheduling with dependencies
• Bryntum Gantt - Project planning and management
• Bryntum Calendar - Full-featured calendar component
• Bryntum TaskBoard - Kanban-style task management

Explore our comprehensive collection of demos:

| Product | JavaScript | React | Vue | Angular | |-------------------|:------------------------------------------------------------------------------------:|:--------------------------------------------------------------------------:|:----------------------------------------------------------------------:|:------------------------------------------------------------------------------:| | Grid | Grid JavaScript demos | Grid React demos | Grid Vue demos | Grid Angular demos | | Scheduler | Scheduler JavaScript demos | Scheduler React demos | Scheduler Vue demos | Scheduler Angular demos | | Scheduler Pro | Scheduler Pro JavaScript demos | Scheduler Pro React demos | Scheduler Pro Vue demos | Scheduler Pro Angular demos | | Gantt | Gantt JavaScript demos | Gantt React demos | Gantt Vue demos | Gantt Angular demos | | Calendar | Calendar JavaScript demos | Calendar React demos | Calendar Vue demos | Calendar Angular demos | | TaskBoard | TaskBoard JavaScript demos | TaskBoard React demos | TaskBoard Vue demos | TaskBoard Angular demos |

Online references

• Bryntum Grid documentation

• Bryntum Grid examples

• Bryntum Support Forum

• Contact us

License and copyright

This wrapper depends on Bryntum Grid, which is commercial software and requires a paid license. Please visit the Bryntum Grid End User License for the full text of the license.

Copyright © 2009-2026, Bryntum All rights reserved.