What's new in Grid v7.0.0

New themes & CSS

All products in the Bryntum suite now has new themes:

Svalbard Light & Dark
Stockholm Light & Dark
Visby Light & Dark
Material3 Light & Dark
High Contrast Light & Dark

The new themes are based on CSS variables and are easier to customize than the old themes. The themes only change CSS variable (CSS custom properties) values, there are no custom selectors etc. in them. A single theme file has the custom values for all products.

The structural CSS for each product is separated from the theme CSS, making the theme files much smaller than before.

To for example include the "Material3 Light" theme in your app for Grid, you need to include the following CSS files:

<!-- Structural CSS -->
<link rel="stylesheet" href="build/grid.css">
<!-- Theme CSS -->
<link rel="stylesheet" href="build/material3-light.css">

Also note that none of the new themes applies any font-family. The demo styling does, but the themes themselves do not. Previously the Material theme pulled in Roboto.

No built-in FontAwesome Free

The themes also no longer include FontAwesome Free, so you need to include it yourself if you want to use icons. This change was made to not bloat the CSS files for apps that do not use our default icons.

This also means that we no longer re-scope FontAwesome (there are no b-fa-xx rules). Instead, use FontAwesome classes as you normally would.

There is still a version of FontAwesome Free included in the build folder of the Grid package for your convenience. Include it in your app with something like this:

<!-- Optionally include FontAwesome Free -->
<link rel="stylesheet" href="build/fontawesome/css/fontawesome.css">
<link rel="stylesheet" href="build/fontawesome/css/solid.css">

If you chose to not include it (or your own version of FontAwesome), your app will need to override our b-icon-xx rules to show the icons you are using instead.

CSS variables

As mentioned above, the styling is now based on CSS variables (CSS custom properties). All Bryntum CSS variables are prefixed with --b- to avoid conflicts with other CSS variables in your app. For example, the background of a Panel is set using the --b-panel-background variable:

.my-custom-panel {
  --b-panel-background : #ccc;
}

Available CSS variables are listed in the docs. Make sure to also check the updated customization guides.

Selector normalization

Previously we used a somewhat random mix of single words and kebab-casing for the CSS selectors (for example b-celledit, but b-grid-cell). This has been normalized to use kebab-case. For example the CellEdit features no longer adds the .b-celledit class, but instead correctly kebab cased .b-cell-edit.

This will likely affect any custom styling you have, please check your selectors.

Advanced - Loading from sources

When loading from sources, the CSS is pulled in automatically. Each imported class adds a <link> tag to the head of the document. This should not be used in production, and it might lead to some timing issues. But, it lets you create custom structural CSS files with only the components you need. We will be adding a guide on this later.

New transitions and a new `transition` config

Grid has a bunch of new transitions, for example for expanding and collapsing groups and columns. It also has a new way of turning them on or off use the transition config, which replaces the old individual animation related configs. The new config is an object with properties that controls different kinds of transitions. The following transitions can be configured:

removeRecord - Transition removing rows (replaces animateRemovingRows)
insertRecord - Transition inserting rows (new)
toggleTreeNode - Transition collapsing/expanding tree nodes (replaces animateTreeNodeToggle)
filterRemoval - Transition filters leading to rows being removed (only during specific conditions, replaces animateFilterRemovals)
toggleRegion - Transition collapsing/expanding regions (replaces RegionResize.animateCollapseExpand)
toggleColumn - Transition showing/hiding columns (new)
toggleGroup - Transition collapsing/expanding groups (new)
expandCollapseColumn - Transition expanding/collapsing parent/group columns (new)

All transitions are enabled by default.

Usage:

const grid = new Grid({
    transition : {
        removeRecord : true/false,
        insertRecord : true/false,
        toggleTreeNode : true/false,
        filterRemoval : true/false,
        toggleRegion : true/false,
        toggleColumn : true/false,
        toggleGroup : true/false,
        expandCollapseColumn : true/false
    }
});

New `AIFilter` feature

A new AIFilter feature has been added that lets you filter the grid using natural language. The feature uses a large language model (LLM) such as OpenAI's GPT-4 to interpret the user's input and convert it into filter criteria.

To use the feature, you need to include it in your Grid's features config, and add an aifilterfield to your toolbar (or somewhere else). You also need to provide a URL for the AI prompt, and an API plugin for the LLM you want to use. You also need to provide descriptions for the fields in your store, so the AI knows what data it can filter on.

new Grid({
    features : {
        aiFilter : {
            promptUrl : '/ai/prompt', // Your own endpoint that returns the prompt
            apiPlugin : OpenAIPlugin, // GooglePlugin, AnthropicPlugin is also available (and more is coming)
            model : 'gpt-4-1', // Model to use, not required by all plugins
        }
    },
    tbar : [{
        type        : 'aifilterfield',
        width       : 400,
        placeholder : 'Ask AI to filter…'
    }],
    store : {
        fields : [
            // Descriptions for the fields in your store
            { name : 'name', type : 'string', description : 'The name of the person' },
            { name : 'age', type : 'number', description : 'The age of the person' },
            { name : 'country', type : 'string', description : 'The country the person lives in' }
        ]
    }
})

PinColumns Feature

The new PinColumns feature provides an intuitive way for users to pin columns to either side of the Grid, improving data visibility and navigation in wide datasets. User can pin columns to the start or end of the Grid without needing any additional subGrid configuration. When enabled, the feature adds a Pin columns option to both the column header context menu and cell context menu.

This feature is disabled by default.