Bryntum Grid 5.0.6

Bryntum Grid

Welcome to the Bryntum Grid, a pure JavaScript grid component which integrates easily with popular frameworks. Click a logo below to open the integration guide for the framework:

This document contains very brief info on the Grid's structure and how to get started. For more information, please view the guides and API Docs (open Grid in API docs).

Here you can try out the Grid and some of its main features. For more demos please refer to the example browser.

Include on your page

Include the distributed bundles using a script tag or as an ES module. Source maps are included so debugging should be a breeze :) For info on other use cases please view the guides found under /docs.

Folder structure

The project has the following folders:

FolderContents
/buildDistribution folder, contains js bundles, css themes, locales and fonts. More info below.
/docsDocumentation, open it in a browser (needs to be on a web server) to view guides & API docs.
/examplesDemos, open it in a browser (needs to be on a web server)
/libSource code, can be included in your ES6+ project using import.
/resourcesSCSS files to build our themes or your own custom theme.
/testsOur complete test suite, including Siesta Lite to allow you to run them in a browser.

Using bundles

The bundles are located in /build. Bundle files are:

FileContents
package.jsonImportable npm package
grid.lite.umd.jsUMD-format bundle without transpilation and WebComponents included
grid.module.jsES module bundle for usage with modern browsers or in build process
grid.lwc.module.jsES module bundle for usage with Lightning Web Components
grid.umd.jsTranspiled (babel -> ES5) bundle in UMD-format

All bundles are also available in minified versions, denoted with a .min.js file extension. Typings for TypeScripts can be found in files with a .d.ts file extension.

Example inclusion of UMD bundle:

<script type="text/javascript" src="build/grid.umd.js"></script>

Using themes

The themes are located in /build. Theme files are:

FileContents
grid.classic-dark.cssClassic-Dark theme
grid.classic.cssClassic theme
grid.classic-light.cssClassic-Light theme
grid.material.cssMaterial theme
grid.stockholm.cssStockholm theme

Each theme also exists in a thin version that only contains product specific styling (Grids full themes include Grid styling + all core styling such as buttons etc). For example grid.stockholm.thin.css. These are intended for when you include multiple Bryntum products on the same page, to avoid loading shared styling multiple times.

All themes are also available in minified versions, denoted with a .min.css file extension.

Example inclusion of Classic-Light theme:

<link rel="stylesheet" href="build/grid.classic-light.css" data-bryntum-theme>

Basic usage

How to create a simple grid with two columns and a couple of rows of data (using umd bundle):

const grid = new bryntum.grid.Grid({
    height: 400,
    columns: [
        { field: 'name', text: 'Name', width: 200 },
        { field: 'city', text: 'City', flex: 1 }
    ],

    data: [
        { name: 'Dan Stevenson', city: 'Los Angeles' },
        { name: 'Talisha Babin', city: 'Paris' }
    ]
});

Some good to know details

Code and technologies

  • The grid is written in ECMAScript 2020 using modules. The modules are built into bundles (as mentioned above) using WebPack + Babel. These bundles work in all supported browsers (Chrome, Firefox, Safari and modern Edge).
  • The grid is internally styled using SASS. During the build it generates CSS themes from the SASS files. In most cases you include one of the themes in your app. For more details on styling, see the guides under guides/styling.

Grids structure

  • A grid can consist of multiple subgrids, each with its own horizontal scroller. All subgrids share a vertical scroller.
  • For performance reasons grid row elements are reused when scrolling, meaning that you should not manipulate row and cell dom elements directly (do it from renderers instead).

External dependencies

The Grid has no external dependencies.

See licenses for our current dependencies in the licenses.md file

Copyright © 2009 - 2022, Bryntum

All rights reserved.

License

Last modified on 2022-06-20 10:58:31