Getting Started with Bryntum Grid in JavaScript

Try JavaScript demos

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

Create JavaScript application

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

To get started, the broad steps are as follows:

1. Download Bryntum Grid
2. Create Application
3. Bryntum bundles
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 live demo below:

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

Download

Bryntum Grid is a commercial product, but you can access our free trial archive with bundles and examples by downloading it here.

Create Application

You can proceed as usual. The Bryntum Grid Component is compliant with the most popular Javascript Standards.

To create an application, create a new folder and add the following to index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bryntum Grid App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>

Bryntum bundles

The Bryntum Grid distribution provides pre-build JavaScript bundles. All bundles are transpiled with chrome: 88 babel preset.

In distribution zip they are located under the /build folder.

Typings for TypeScripts can be found in files with a .d.ts file extension.

Minified bundles are available for Licensed product version and delivered with .min.js suffix.

Using EcmaScript module bundles

If you choose this option, copy the selected module file onto your application, in the root folder, for instance.

Create a main.js file, you can import the grid JavaScript.

import { Grid } from './grid.module.js';

const grid = new Grid({/*...*/ });

Learn more about how to use EcmaScript modules here.

Using <script> tag and UMD files

Please consider this solution as legacy and use it only for compatibility. If you choose this option, copy the selected UMD file onto your application, in the root folder, for instance.

To include Bryntum Grid on your page using a plain old script tag, add a <script> tag pointing to the UMD bundle file in the <HEAD> of your index.html page. Example:

<script src="grid.umd.js"></script>

In the main.js, you will be able to access Grid classes in the global bryntum namespace as follows:

const grid = new bryntum.grid.Grid({/*...*/ });

Read more on script tag and UMD modules...

Add component to Application

Assuming the use of an EcmaScript module bundle:

import { Grid } from './grid.module.js';

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.

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

Apply styles

Stylesheets

You'll find a complete list of available CSS files in the /build folder of the distribution:

You'll need to copy and 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. Below we assume they are in the root folder.

Add link tags for the structural CSS and a theme to your index.html in the <head>...</head> section:

<!-- Structural CSS -->
<link rel="stylesheet" href="grid.css">
<!-- Bryntum theme of your choice -->    
<link rel="stylesheet" href="svalbard-light.css" data-bryntum-theme>

Make sure to copy the fonts/ folder located in the /build right next to the .css theme.

- my-grid-app/
  - fonts/
  - grid.css
  - svalbard-light.css

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

To see the preview, start a live-server (if you are using one) or open the index.html file in your browser from your local web server.

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.