Using Bryntum Grid with React

Version requirements

Minimum supported:

Vite 4.0.0 or higher (for application build with Vite)

Recommended:

Vite 5.0.0 or higher (for application build with Vite)

Bryntum npm repository access

Bryntum components are commercial products, hosted in a private Bryntum repository.

Please refer to the Bryntum npm repository guide for complete access information.

Use Bryntum Grid with React

While Bryntum Grid is designed to work with any framework, it ships with demos and wrappers to simplify integration with popular frameworks like React.

This guide provides a basic introduction to using Bryntum Grid with React.

The React wrappers

The wrappers encapsulate Bryntum Grid and other Bryntum widgets as React components, exposing configuration options, properties, features, and events. The wrapped Bryntum components are used the standard React way.

View online demos

Visit our online example browser to view demos of Bryntum Grid with React.

Build and run local demos

Follow this guide to download the distribution zip.

Find the React demos in the distribution zip in the examples/frameworks/react folder.

Bryntum demos are created using the latest version of React Vite.

Each demo folder includes a bundled README.md file containing build and run instructions.

You can run the demos in either development mode or production build.

In the Bryntum examples, the start script is used to launch the local development server:

npm install
npm start

The default package.json generated by Vite does not include a start script, so you can use the existing dev script instead:

npm install
npm run dev

These commands start a local server accessible at http://localhost:5173.

If you modify the example code while running it locally, changes are automatically rebuilt and updated in the browser, allowing you to see them immediately.

To build the production version of an example or your application, run:

npm install
npm run build

The built version is stored in the build sub-folder, which contains the compiled code ready for deployment to your production server.

TypeScript and typings

Bryntum bundles include class typings that you can use in TypeScript applications. Find these typings in the grid*.d.ts files located in the build folder in the distribution zip.

The grid*.d.ts files contain a special config type that can be passed to the class constructor. Config-specific types are accepted by various properties and functions, such as the Store.data config, which accepts the ModelConfig[] type.

Below is an example of creating a tree store using the ModelConfig and StoreConfig classes:

import { Store, StoreConfig, ModelConfig } from '@bryntum/grid';

const storeConfig: StoreConfig = {
    tree : true,
    data : [
        {
            id       : 1,
            children : [
                {
                    id : 2
                }
            ] as ModelConfig[]
        }
    ] as ModelConfig[]
};

new Store(storeConfig);

Using React wrappers with Bryntum Grid

Wrappers are React components that provide full access to Bryntum API, including widget class configs, properties, events, and features. Each wrapper has a unique tag that can be used in React JSX code.

Here is a list of the available wrappers for the Bryntum Grid React package.

Wrapper tag name	API widget reference
<BryntumAIFilterField/>	AIFilterField
<BryntumBooleanCombo/>	BooleanCombo
<BryntumButton/>	Button
<BryntumButtonGroup/>	ButtonGroup
<BryntumChatPanel/>	ChatPanel
<BryntumCheckbox/>	Checkbox
<BryntumCheckboxGroup/>	CheckboxGroup
<BryntumChecklistFilterCombo/>	ChecklistFilterCombo
<BryntumChipView/>	ChipView
<BryntumCodeEditor/>	CodeEditor
<BryntumColorField/>	ColorField
<BryntumCombo/>	Combo
<BryntumContainer/>	Container
<BryntumDateField/>	DateField
<BryntumDatePicker/>	DatePicker
<BryntumDateRangeField/>	DateRangeField
<BryntumDateTimeField/>	DateTimeField
<BryntumDemoCodeEditor/>	DemoCodeEditor
<BryntumDisplayField/>	DisplayField
<BryntumDurationField/>	DurationField
<BryntumEditor/>	Editor
<BryntumFieldFilterPicker/>	FieldFilterPicker
<BryntumFieldFilterPickerGroup/>	FieldFilterPickerGroup
<BryntumFieldSet/>	FieldSet
<BryntumFileField/>	FileField
<BryntumFilePicker/>	FilePicker
<BryntumFilterField/>	FilterField
<BryntumGrid/>	Grid
<BryntumGridBase/>	GridBase
<BryntumGridChartDesigner/>	GridChartDesigner
<BryntumGridFieldFilterPicker/>	GridFieldFilterPicker
<BryntumGridFieldFilterPickerGroup/>	GridFieldFilterPickerGroup
<BryntumGroupBar/>	GroupBar
<BryntumHint/>	Hint
<BryntumLabel/>	Label
<BryntumList/>	List
<BryntumMenu/>	Menu
<BryntumMonthPicker/>	MonthPicker
<BryntumNumberField/>	NumberField
<BryntumPagingToolbar/>	PagingToolbar
<BryntumPanel/>	Panel
<BryntumPasswordField/>	PasswordField
<BryntumProgressBar/>	ProgressBar
<BryntumRadio/>	Radio
<BryntumRadioGroup/>	RadioGroup
<BryntumSlider/>	Slider
<BryntumSlideToggle/>	SlideToggle
<BryntumSplitter/>	Splitter
<BryntumTabPanel/>	TabPanel
<BryntumTextAreaField/>	TextAreaField
<BryntumTextAreaPickerField/>	TextAreaPickerField
<BryntumTextField/>	TextField
<BryntumTimeField/>	TimeField
<BryntumTimePicker/>	TimePicker
<BryntumToolbar/>	Toolbar
<BryntumTreeCombo/>	TreeCombo
<BryntumTreeGrid/>	TreeGrid
<BryntumWidget/>	Widget
<BryntumYearPicker/>	YearPicker

Installing the wrappers package

The wrappers are provided in the @bryntum/grid-react package, which you can install using your preferred package manager. Refer to the guide to accessing the Bryntum npm repository for more details.

To use native API package classes with the wrappers, import them from @bryntum/grid:

import { Grid } from '@bryntum/grid';

Using the React wrappers in your application

The Bryntum Grid React wrapper defines a component named BryntumGrid, which can be used like any other React component.

For example, include the wrapper in your application in the App.js file:

import React from 'react';
import { BryntumGrid } from '@bryntum/grid-react';
import { gridProps } from './AppConfig'

export const App = () => {
    return (
        <BryntumGrid
            {...gridProps}
            // other props, event handlers, etc
        />
    );
}

Then set configuration options in AppConfig.js:

export const gridProps = {
    tooltip : "My cool Bryntum Grid component",
    // Bryntum Grid config options
};

Using the React wrappers in a TypeScript application

Bryntum React wrappers for Bryntum Grid are bundled with TypeScript definitions that you can use in TypeScript-based React applications.

Each wrapper includes property definitions stored in a class named after the wrapper, suffixed with Props.

For example, define the typed wrapper configuration for BryntumGrid in AppConfig.ts:

import { BryntumGridProps } from '@bryntum/grid-react';

const gridProps: BryntumGridProps = {
    // Wrapper configuration
    ...
};

Then import the configuration in App.tsx

import React, { FunctionComponent, useRef } from 'react';
import { BryntumGrid } from '@bryntum/grid-react';
import { Grid } from '@bryntum/grid';
import { gridProps } from './AppConfig';

const App: FunctionComponent = () => {
    const gridRef      = useRef<BryntumGrid>(null);
    const gridInstance = () => gridRef.current?.instance as Grid;

    return (
        <>
            <BryntumGrid
                ref = { gridRef }
                { ...gridProps }
            />
        </>
    );
};

export default App

Embedding widgets inside wrappers

Wrappers are designed to allow Bryntum widgets to be used as React components, but they cannot contain other Bryntum wrappers within their tags. Instead of nesting wrappers, use a widget's available configuration options to embed Bryntum widgets in a wrapper. However, not all widgets can contain inner widgets. Refer to the API documentation to verify the available configuration options.

The following example shows how to configure a Toolbar widget in the Bryntum Grid wrapper in AppConfig.js:

export const gridProps = {
    // Toolbar (tbar) config
    tbar : {
       items : {
          myButton : {
             type : 'button',
             text : 'My button'
          }
       }
    }
    // Bryntum Grid config options
};

Syncing data changes in wrappers

By default, the stores used by the Bryntum Grid React wrapper have syncDataOnLoad enabled, while stores not used by the wrapper have it disabled. This allows two-way binding to work out of the box.

Without syncDataOnLoad, each state change replaces the bound data with a completely new dataset. With syncDataOnLoad enabled, the new state is compared to the previous state, and only the differences are applied.

Rendering React components in column cells

Columns in Bryntum Grid support a renderer configuration option, which is a function that takes parameters as inputs to generate HTML content. You can use any kind of conditional or complex logic to create visually rich cell content.

If you have a React component for the desired cell visualization, you can use it by referencing the component in the cell renderer with regular JSX. Support for JSX renderers is implemented in the BryntumGrid wrapper, so the wrapper must be used for them to work.

JSX cell renderers and editors are implemented as React portals, which allow React components to be rendered outside of their parent trees, anywhere in the DOM.

Implementing inline JSX for custom cell rendering

The following example demonstrates how to use inline JSX for rendering custom content:

renderer: ({ value }) => <CustomComponent>{value}</CustomComponent>

If you need to access additional data fields or pass them to the React component, you can do so as follows:

renderer: (renderData) => {
    return (
        <CustomComponent dataProperty={renderData}><b>{renderData.value}</b>/{renderData.record.city}
        </CustomComponent>
    );
}

Note that the functions above return HTML-like markup without quotes, which is understood and processed as JSX. If you enclose the markup in quotes, the functions won't work.

Creating custom React components for cell rendering

You can create custom React components to be rendered in Bryntum Grid cells.

For example, define a simple, reusable React component:

import React from 'react';

const DemoButton = props => {
    return <button {...props}>{props.text}</button>;
};

Then render it like this:

import DemoButton from '../components/DemoButton';

handleCellButtonClick = (record) => {
    alert('Go ' + record.team + '!');
};

return (
    <BryntumGrid
        // Columns
        columns={[
            {
                // Using custom React component
                renderer : ({ record }) =>
                    <DemoButton
                        text={'Go ' + record.team + '!'}
                        onClick={() => handleCellButtonClick(record)}
                    />,
                // other column props,
            },
            // ... other columns
        ]}
        // ... other BryntumGrid props
    />
);

In this example, the column renderer function returns the imported DemoButton component and passes the required props down to ensure it renders in the correct row context.

State changes in custom React components

When rendering custom React components inside Bryntum columns, React state changes (e.g., useState) do not automatically trigger the renderer to re-execute. This means that state updates within your custom component will not cause the cell to re-render.

To make your component respond to state changes, use global state management. By placing state in a global store or provider at a higher level in your component tree, you can ensure that state changes propagate correctly to the rendered components.

You can use various state management solutions such as:

React Context
Zustand
Redux
Other React state management libraries

See the Using React Context with renderers demo for a complete implementation example.

Using a React component as a cell editor

You can use a React component as a cell editor that activates by default when a cell is double-clicked. Take a look at the Basic Bryntum Grid demo for detailed guidance on implementing this type of cell editor.

Custom cell editors with pickers

By default, editing is finalized when a cell editor loses focus. This behavior may cause problems with components like pickers, popups, or custom date selectors, as clicking outside the cell editor closes the picker and ends editing. To prevent this, set managedCellEditing to false.

{
    text               : 'Start',
    type               : 'date',
    field              : 'start',
    width              : '11em',
    editor             : (ref : any) => <DateEditor ref={ref} />,
    managedCellEditing : false
},

Passing ref to the React editor is essential for the editor to work.

You can see the custom date editor implementation in this demo.

Using popups as cell editors

The editor is aligned and resized to the cell being edited by the CellEdit feature. This behavior is useful in majority of cases because no code has to be written in the React application. However, in some circumstances we might want to use richer editors, selectors or tables that do not fit into the cell but need to overlay the grid in a popup.

This is done by configuring the cellEditor to be floating. It is also recommended to provide a minHeight and/or a minWidth to the align config to ensure nice alignment and containment functionality.

import ColorEditor from './components/ColorEditor';

export const gridProps : BryntumGridProps = {
    columns: [
        {
            text       : 'Color',
            field      : 'color',
            editor     : (ref : any) => <ColorEditor ref={ref} />,
            cellEditor : {
                floating : true,
                align    : {
                   minHeight : 300    
                }
            }          
        }
    ]
    // other configuration options
}

And, you will probably also need to style the editor. For example, if we want a color selector in a popup we could have this render code:

render() {
    return (
        <div className="color-editor-container">
        // rest of the editor
        </div>
    )
}

and add the following CSS rules:

.color-editor-container {
    // Popup-like editor styling
    max-width     : 21em;
    padding       : 0.8em;
    background    : #fff;
    border        : 1px solid #ddd;
    border-radius : 4px;
}

No other code changes or special handling like showing, hiding and aligning the "popup" are needed.

Passing ref to the React editor is essential for the editor to work. Also, the editor has to implement getValue, setValue, isValid and focus methods. See editor config option for more details.

You can see the React color editor in action in Cell edit demo (React + Vite) demo.

Using React components in tooltips and widgets

Please note that support for React components is implemented in the Bryntum Grid React wrapper. Applications that create the Bryntum Grid instance directly instead of using the wrapper cannot use JSX in tooltips and widgets.

Additionally, React components can only be used in tooltips and widgets that are children of Grid, not in standalone tooltips or widgets. For standalone tooltips and widgets, you can use JSX directly without needing to "wrap" it in a Bryntum widget. This behavior is not a limitation, but should be a consideration for application design.

Using React components in tooltips

Tooltips are typically configured to render JSX generated by a feature renderer or template, as illustrated in the following examples.

Configuring a custom cell tooltip:

const gridProps = {
    cellTooltipFeature : {
        tooltipRenderer : ({ record }) => (
            <React.StrictMode>
                <DemoTooltip record={record}/>
            </React.StrictMode>
        )
    }
}

return <BryntumGrid {...gridProps} />

Using the custom cell tooltip:

import React from 'react';

const DemoTooltip = props => {
    const { record } = props;
    return (<div>React component:
        <b>{record.name}</b>
    </div>)
}

export default DemoTooltip

Using React components in widgets

You can use a React component as the html content for a Bryntum widget.

For example, you can configure a custom widget to include a React component:

const gridProps = {
    bbar : {
        items : {
            demoWidget : {
                type : 'widget',
                html : <DemoWidget/>
            }
        }
    },

Then define the behavior and content of the React component:

import React from 'react';

const DemoWidget = props => {
    const title = 'Click me and watch the console output';
    const style = {
        cursor : 'pointer'
    };
    const handleClick = event => {
        console.log(event);
    }

    return <div title={title} style={style} onClick={handleClick}>React Demo Widget</div>
}

export default DemoWidget;

Rendering React components in Grid column headers

React components can be rendered in column headers using headerWidgets or headerRenderer. Both methods are demonstrated in the Using React context with renderers demo.

Using `headerWidgets`

Here's how to configure headerWidgets for a column:

const gridProps = {
    columns : [{
        field         : 'name',
        text          : 'Name',
        headerWidgets : [{
            type : 'widget',
            html : <Component />
        }]
    }
}

Using `headerRenderer`

Here's how to return JSX from headerRenderer:

const gridProps = {
    columns : [{
        type           : 'column',
        text           : 'Name',
        field          : 'name',
        headerRenderer : ({ column }) => <Component column={column} />
    }]
}

Configs, properties and events

Bryntum React wrappers support the full set of public configs, properties, and events of a component.

Features

Features act as both configs and properties for BryntumGridComponent and are mapped to the corresponding API features of the instance.

Feature names are suffixed with Feature.

Here is a comprehensive list of Bryntum Grid features:

Wrapper feature name	API feature reference
aiFeature	AI
aiFilterFeature	AIFilter
cellCopyPasteFeature	CellCopyPaste
cellEditFeature	CellEdit
cellMenuFeature	CellMenu
cellTooltipFeature	CellTooltip
chartsFeature	Charts
columnAutoWidthFeature	ColumnAutoWidth
columnDragToolbarFeature	ColumnDragToolbar
columnPickerFeature	ColumnPicker
columnRenameFeature	ColumnRename
columnReorderFeature	ColumnReorder
columnResizeFeature	ColumnResize
excelExporterFeature	ExcelExporter
fileDropFeature	FileDrop
fillHandleFeature	FillHandle
filterFeature	Filter
filterBarFeature	FilterBar
groupFeature	Group
groupSummaryFeature	GroupSummary
headerMenuFeature	HeaderMenu
lockRowsFeature	LockRows
mergeCellsFeature	MergeCells
pdfExportFeature	PdfExport
pinColumnsFeature	PinColumns
printFeature	Print
quickFindFeature	QuickFind
regionResizeFeature	RegionResize
rowCopyPasteFeature	RowCopyPaste
rowEditFeature	RowEdit
rowExpanderFeature	RowExpander
rowReorderFeature	RowReorder
rowResizeFeature	RowResize
searchFeature	Search
sortFeature	Sort
splitFeature	Split
stickyCellsFeature	StickyCells
stripeFeature	Stripe
summaryFeature	Summary
treeFeature	Tree
treeGroupFeature	TreeGroup

Configuring features

Most features are enabled by default, in which case you can disable them like this:

const gridProps = {
    // other config
   cellEditFeature : false,
   groupFeature    : false,
};

Others require you to enable them:

const gridProps = {
    // other config
    sortFeature     : 'name', // enabled by default but configured to be sorted by name field.
    filterFeature   : true,
};

To learn more about configuration, visit the feature page from the API Feature reference table above.

The native Bryntum Grid instance

Note that the React BryntumGrid component is not the native Bryntum Grid instance. It serves as a wrapper or interface between the React application and the Bryntum Grid.

While all available properties and features are propagated from the wrapper to the underlying Bryntum Grid instance, you can access the Bryntum Grid directly if necessary.

Accessing the Bryntum Grid instance

You can access the Bryntum Grid instance like this:

const gridRef = useRef();

useEffect(() => {
    // the instance is available as
    console.log(gridRef.current.instance);
}, [])

return <BryntumGrid ref={gridRef} {...gridProps} />

Using Bryntum Grid themes

To style the Bryntum Grid component, you can import a CSS file containing one of the Grid themes or enable theme switching with the <BryntumThemeCombo /> component.

Using a single theme

The easiest way to style the Bryntum Grid component is to import the CSS file in App.js or App.scss.

In App.js, import one of 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';
// Pick one of these
import '@bryntum/grid/svalbard-light.css';
import '@bryntum/grid/svalbard-dark.css';
import '@bryntum/grid/visby-light.css';
import '@bryntum/grid/visby-dark.css';
import '@bryntum/grid/stockholm-light.css';
import '@bryntum/grid/stockholm-dark.css';
import '@bryntum/grid/material3-light.css';
import '@bryntum/grid/material3-dark.css';

In App.scss, import one of the following (note the different syntax):

// 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';
// Pick one of these
@import '@bryntum/grid/svalbard-light.css';
@import '@bryntum/grid/svalbard-dark.css';
@import '@bryntum/grid/visby-light.css';
@import '@bryntum/grid/visby-dark.css';
@import '@bryntum/grid/stockholm-light.css';
@import '@bryntum/grid/stockholm-dark.css';
@import '@bryntum/grid/material3-light.css';
@import '@bryntum/grid/material3-dark.css';

Note: We recommend importing a theme in App.scss to keep all style-related code in a single file.

Selecting from multiple themes

You can implement theme switching using the <BryntumThemeCombo /> component.

First, import <BryntumThemeCombo /> as you would any other component:

import { BryntumThemeCombo, ... } from '@bryntum/grid-react';
// ... other code

return (
    // ... other components
    <BryntumThemeCombo/>
    // ... other components
);

The theme CSS and font files must be stored in themes and themes/fonts subdirectories, accessible from the public server root. The easiest way to do this is to automate the process using the postinstall script in package.json:

{
  "scripts"         : {
    "postinstall" : "postinstall"
  },
  "postinstall"     : {
    "node_modules/@bryntum/grid/*.css*" : "copy public/themes/",
    "node_modules/@bryntum/grid/fonts"  : "copy public/themes/fonts"
  },
  "devDependencies" : {
    "postinstall" : "~0.7.0"
  }
}

You can use the npm install --save-dev --save-prefix=~ postinstall command to install the required postinstall package, or add it manually to the package.json file.

Finally, add the default theme link to the head of public/index.html:

<head>
    <!-- Font Awesome is used for icons -->
    <link rel="stylesheet" href="%PUBLIC_URL%/themes/fontawesome/css/fontawesome.css" />
    <link rel="stylesheet" href="%PUBLIC_URL%/themes/fontawesome/css/solid.css" />
    <!-- Structural CSS -->
    <link rel="stylesheet" href="%PUBLIC_URL%/themes/grid.css" />
    <!-- Bryntum theme -->
    <link rel="stylesheet" href="%PUBLIC_URL%/themes/svalbard-light.css" data-bryntum-theme />
</head>

The data-bryntum-theme custom attribute is required by the BryntumThemeCombo component.

If you change the location of themes and fonts, update the paths in both the package.json and index.html files, for example, changing them to my-resources/themes/ and my-resources/themes/fonts. No other configuration is needed.

Dynamically loading the Bryntum Grid component with Next.js

Bryntum components are designed for client-side rendering and do not support server-side rendering (SSR). To use them in a Next.js application, you must disable SSR by setting ssr to false.

Because the lifecycle of dynamically loaded components differs from standard React components, additional steps are required to dynamically load the Bryntum Grid component.

First, create a wrapper component for BryntumGrid to ensure React refs function correctly.

Create a folder, such as components, outside the Next.js pages directory, and save the wrapper component there.

Sample code for components/Grid.js:

/**
 * A simple wrap around BryntumGrid for ref to work
 */
import { BryntumGrid } from '@bryntum/grid-react';

export default function Grid({ gridRef, ...props }) {
    return <BryntumGrid {...props} ref={gridRef}/>
}

The component can then be loaded dynamically:

import dynamic from "next/dynamic";
import { useRef } from 'react';

const Grid = dynamic(
    () => import("../components/Grid.js"), { ssr : false }
);

const MyComponent = () => {
    const gridRef = useRef();

    const clickHandler = function(e) {
        // This will log the Bryntum Grid native instance after it has been loaded
        console.log(gridRef.current?.instance);
    }

    return (
        <>
            <button onClick={clickHandler}>ref test</button>
            <Grid
                gridRef={gridRef}
                // other props
            />
        </>
    )
}

Best practices for using Bryntum Grid with React

While there are many tools for creating and building React applications, we use Vite to create our React examples because it offers greater efficiency and improved performance during development.

We recommend setting up a React application with Vite from scratch. However, if you use one of our demos as a starting point, be sure to clean up any unnecessary imports, CSS files, rules, and resources. For example, Bryntum demos use resources from @bryntum/demo-resources, such as the scss/example-vite.scss file and the fonts and images used in the demo header, that you don't need in your application.

We also recommend against copying the downloaded and unzipped Bryntum Grid files into your project tree, as this can bloat the project size and cause the IDE to suggest incorrect auto-import paths.

If you choose to copy files from the Bryntum download into your project, only copy the specific source files you need, rather than the entire distribution.

Refer to the quick start guide on integrating Bryntum Grid with React to get started creating your application.

Managing configuration for Bryntum Grid React wrappers

You can configure the wrapper component by passing options as React props.

There are two approaches to managing the configuration in Bryntum Grid React wrappers. You can combine these approaches, but ensure that the same configuration is not defined in multiple places.

External configuration for static settings

Define configurations that remain constant, such as column setups or widget options, outside of your React component to minimize re-rendering overhead and keep components tidy.

For example, in App.js:

import React from 'react';
import { BryntumGrid } from '@bryntum/grid-react';
import { gridConfig } from './AppConfig'

export const App = () => {
    return (
        <BryntumGrid
            {...gridConfig}
            // other props, event handlers, etc
        />
    );
}

Then define configuration options in AppConfig.js:

export const gridProps = {
    tooltip : "My cool Bryntum Grid component",
    // Bryntum Grid config options
};

State-managed configuration for dynamic settings

Configuration that needs to adapt depending on the component's state or props should be encapsulated in the component using the React useState hook to maintain reference across re-renders and prevent unnecessary calculations.

For example, in App.js:

import React, { useState } from 'react';
import { BryntumGrid } from '@bryntum/grid-react';

export const App = () => {

    const [start, setStart] = useState(new Date());

    const [gridConfig] = useState({
        startDate: start
        // Bryntum Grid config options
    })

    return (
        <BryntumGrid
            {...gridConfig}
            // other props, event handlers, etc
        />
    );
}

React 18+ development mode behavior

React 18 and above provides a mount-unmount-mount cycle in the development mode as part of the Strict mode, which aims to help developers catch and fix bugs related to side effects, memory leaks, and other component lifecycle issues.

React mounts a component, triggering the component's lifecycle hook (useEffect) when it is first rendered.
React immediately unmounts the component. This triggers the component's cleanup function returned by the useEffect hook.
React mounts the component again. This second mount simulates a remount scenario, which can happen in real-world applications (e.g., due to routing changes, state updates, etc.).

Please note that this behavior might lead to data loading issues, if so it might help to wait for the data to load before rendering the component. Learn more about StrictMode.

Troubleshooting

Take a look at the troubleshooting guide if you run into any issues setting up Bryntum Grid with React.

Useful links

Learn more about configuration options, features, events, and methods in the Bryntum Grid API docs
Visit the React homepage
Post your questions to the Bryntum support forum
Contact us

Using Bryntum Grid with React

Version requirements

Bryntum npm repository access

Use Bryntum Grid with React

The React wrappers

View online demos

Build and run local demos

TypeScript and typings

Using React wrappers with Bryntum Grid

Installing the wrappers package

Using the React wrappers in your application

Using the React wrappers in a TypeScript application

Embedding widgets inside wrappers

Syncing data changes in wrappers

Rendering React components in column cells

Implementing inline JSX for custom cell rendering

Creating custom React components for cell rendering

State changes in custom React components

Using a React component as a cell editor

Custom cell editors with pickers

Using popups as cell editors

Using React components in tooltips and widgets

Using React components in tooltips

Using React components in widgets

Rendering React components in Grid column headers

Using headerWidgets

Using headerRenderer

Configs, properties and events

Features

Configuring features

The native Bryntum Grid instance

Accessing the Bryntum Grid instance

Using Bryntum Grid themes

Using a single theme

Selecting from multiple themes

Dynamically loading the Bryntum Grid component with Next.js

Best practices for using Bryntum Grid with React

Managing configuration for Bryntum Grid React wrappers

External configuration for static settings

State-managed configuration for dynamic settings

React 18+ development mode behavior

Troubleshooting

Useful links

Contents

Using `headerWidgets`

Using `headerRenderer`