Getting Started with Bryntum Grid in Angular

Try Angular demos

Bryntum Grid is delivered with a variety of Angular demo applications showing its functionality. All demo applications have been verified to be compatible with Node.js 20.

Version requirements

Minimum supported:

• Angular: 9.0.0 or higher
• TypeScript: 3.6.0 or higher (for TypeScript application)
• Vite 4.0.0 or higher (for application build with Vite)

Recommended:

• Angular: 12.0.0 or higher
• TypeScript: 4.0.0 or higher (for TypeScript application)
• Vite 5.0.0 or higher (for application build with Vite)

Create Angular application

To get started, the broad steps are as follows:

1. Access to npm registry
2. Create Application
3. Install component
4. Add component to Application
5. Apply styles
6. Run the application

The application we are about to build together is pretty simple, and will look like the illustration below:

Access to npm registry

Bryntum components are commercial products, hosted in a private Bryntum repository. Please refer to our Npm Repository Guide for complete access information.

Create Application

Similarly to all the examples shipped with the distribution, we will be using Angular CLI to build Angular applications.

Type the following command to install Angular CLI:

npm install -g @angular/cli

We will then create a basic application with Angular CLI using Typescript:

ng new grid-app --no-standalone --no-routing --ssr=false

When you run the command, you will be prompted to select a stylesheet format. We suggest choosing either CSS or SCSS. This guide provides information on both options.

You can then move to your application folder:

cd grid-app

Install component

From your terminal, update project dependencies using the following commands:

npm install @bryntum/grid@npm:@bryntum/[email protected] @bryntum/[email protected]

Add component to Application

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
    ]
})

Then, edit the src/app/app.ts file and replace the content with the following:

/**
 * 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;
}

If you prefer using SCSS styling then replace './app.css' with './app.scss'.

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' }
    ]
};

And finally, 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>

Apply styles

Including a theme + structural CSS is required to render the Bryntum Grid correctly, and if you are not replacing the icons used by the component, you will also need to include Font Awesome.

The following CSS files are provided with the Bryntum npm packages or in the /build folder of the distribution:

You'll need to reference the selected CSS file into your project.

styleUrls : [
    './app.css',
    './fontawesome/css/fontawesome.css',
    './fontawesome/css/solid.css',
    './grid.css',
    './material3-light.css'
]

import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  standalone: false,
  styleUrl: './app.scss',
  encapsulation: ViewEncapsulation.None
})

Sizing the component

By Default, the Component is configured to take 100% of the parent DOM element with a min-height of 10em.

For your application to show the Component with the appropriate size, you can for example make parent components take the full height of the screen.

body,
html {
    margin         : 0;
    display        : flex;
    flex-direction : column;
    height         : 100vh;
    font-family    : sans-serif;
    font-size      : 14px;
}

app-root {
    flex : 1 1 100%;
}

There are many other solutions depending on the situation. Feel free to adapt the code above regarding your application layout. For more information on the topic, see this guide Sizing the component.

Run the application

From your terminal:

ng serve

Your application is now available under http://localhost:4200.

Troubleshooting

Please refer to this Troubleshooting guide.

What to do next?

Further on integration with Angular

Do you want to know more about how Bryntum Grid integrates with Angular and starts to customize your application? We provide you with a complete Angular guide here.

Learn about Data

Bryntum components often use multiple collections and entities.

The Data guide explains how they all fit together.