Getting Started with Bryntum Grid in JavaScript with npm package manager

Try JavaScript demos

Bryntum Grid is delivered with a variety of JavaScript demo applications showing its functionality.

View online JS demos View local JS demos

Version requirements

Minimum supported:

  • JavaScript: `` or higher
  • TypeScript: 3.6.0 or higher (for TypeScript application)
  • Vite 4.0.0 or higher (for application build with Vite)

Recommended:

  • JavaScript: `` or higher
  • TypeScript: 4.0.0 or higher (for TypeScript application)
  • Vite 5.0.0 or higher (for application build with Vite)

Create JavaScript application

In this guide we will explain how to get started using the npm CLI. If you prefer to not use npm, please visit the dedicated Quick Start here.

To get started, the broad steps are as follows:

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

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

Basic grid setup
//<code-header>
fiddle.title = 'Basic grid setup';
//</code-header>
const grid = new Grid({
    appendTo : targetElement,

    autoHeight : true,

    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     : 'color',
            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' }
    ]
});

Access to npm registry

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

Create Application

To create an application, we will use Vitejs and choose vanilla JavaScript.

First, execute the vite command:

npm create vite@latest my-grid-app -- --template vanilla

For npm 7+, extra double-dash is needed.

It will generate a vanilla JavaScript boilerplate. Next, install dependencies:

cd my-grid-app
npm install

Open the project folder and delete counter.js, we don't need it in our case.

Install component

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

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

Ensure that you have configured your npm properly to get access to the Bryntum packages. If not, refer to this guide.

Add component to Application

Once you have project set up, you can proceed with configuring your Grid.

Delete the counter.js and replace your main.js with the following code:

import { Grid } from '@bryntum/grid';
import './style.css';

const grid = new Grid({
    appendTo : 'app',
    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     : 'color',
            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' }
    ]

});

Here we are providing inline data, you can learn more about how we manage data using Store in this guide.

Learn more about how to use EcmaScript modules here.

If you want to discover how flexible the Bryntum Grid Component is, please explore the API documentation.

Apply styles

Stylesheets

The following CSS files are provided with the Bryntum npm packages:

FileContents
grid.cssStructural CSS
svalbard-light.cssSvalbard Light theme
svalbard-dark.cssSvalbard Dark theme
visby-light.cssVisby Light theme
visby-dark.cssVisby Dark theme
stockholm-light.cssStockholm Light theme
stockholm-dark.cssStockholm Dark theme
material3-light.cssMaterial3 Light theme
material3-dark.cssMaterial3 Dark theme
fluent2-light.cssFluent2 Light theme
fluent2-dark.cssFluent2 Dark theme
fontawesome/css/fontawesome.cssFont Awesome Free base CSS
fontawesome/css/solid.cssFont Awesome Free solid icons

You'll need to import the structural CSS and the preferred theme into your project for the Bryntum Grid to render correctly, and if you are not replacing the icons used by the component, you will also need to include Font Awesome.

Remove the content of style.css and replace it with the following:

/* 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/svalbard-light.css";

We have referenced the CSS file directly from the node_modules folder for simplicity in this code example. Consider using your preferred build tool instead.

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.

#app {
    margin         : 0;
    display        : flex;
    flex-direction : column;
    height         : 100vh;
    font-size      : 14px;
}

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

Run the application by executing:

npm run dev

What to do next?

Tutorial

Now it is time to customize your application. To get familiar with the most common tasks developers perform, we have designed an engaging tutorial that we are excited to see you follow.

Learn about Data

Bryntum components often use multiple collections and entities.

The Data guide explains how they all fit together.

Enabling features

Please refer to the enabling extra features guide to learn how to enhance your Grid chart with additional functionality (such as displaying labels for the tasks).

Responsiveness

Grid can be configured to work well on many different screen sizes. This is achieved by specifying different responsive "levels" (breakpoints) on Grid and then having per level configurations on the columns.

If this is a concern now, visit the responsive guide to learn how to configure responsiveness.

Localization

Bryntum Grid uses locales for translations of texts, date formats and such. This localization guide shows you how to use one of the locales that Bryntum Grid ships with and how to create your own.