Pro Version Pro

The contents of this page concern the Pro version of react-bootstrap-data-grid. Using the Pro version in production requires a commercial license, which is not yet available.

A commercial license for the Pro version is expected to be available around June 1, 2026. In the meantime (or even after release), feel free to use the Pro version for evaluation purposes without a license.

The Pro version of react-bootstrap-data-grid:

includes advanced features not found in the Community version.
requires a license to use in production, but can be freely used for evaluation purposes.
comes in an NPM package that is separate from the Community version. It is named @absreim/react-bootstrap-data-grid-pro.

Setup

The Pro version is designed to contain all the features of the Community version. The API is very similar between the two versions, but not entirely the same. Note the following differences when setting up the Pro version versus the Community version.

Installation

The name of the NPM package for the pro version is different and should be installed as follows:

npm install @absreim/react-bootstrap-data-grid-pro

Styling

Styles specific to react-bootstrap-data-grid-pro are exposed in the file style.css. Unlike the Community version, the styles are not available for import as an SCSS file. Import the CSS file as follows so that the grid is styled properly.

import "@absreim/react-bootstrap-data-grid-pro/style.css"

API Differences

the name of the grid component is GridPro rather than Grid
the name of the type that represents the props for the GridPro component is GridProProps rather than GridProps
the name of the column definition type ProColDef rather than ColDef and contains additional fields

See more details on each specific point below.

GridPro

This component is the default export of the Pro version NPM package and be imported as follows:

import GridPro from "@absreim/react-bootstrap-data-grid-pro";

GridProProps

This type contains the props for GridPro. The only difference compared to the Community version's GridProps is that the column definitions in the cols prop are of type ProColDef[] instead of ColDef[].

ProColDef

Compared to ColDef, the width property can be WidthModel in addition to number or undefined, allowing for external control of column widths.

Several other additional optional properties are included to allow resizing of columns. See the resize article for a discussion and usage examples.

The additional and changed fields for ProColDef are defined in the below table. All other properties are the same as ColDef.

Property name	Type definition	Required/Optional	Description
resizeable	boolean	Optional	Enables resizing for the column. Note that the `displayMode` prop for the `GridPro` component must be set to `block`for resizing to work.
width	number \| WidthModel	Optional	Causes the grid to set `min-width` and `max-width` CSS styles for each cell in the column. In all cases, if a `WidthModel` is specified, the values set are based on the `width` property of the `WidthModel`. Otherwise, if the column is not resizeable, either because `resizeable` is falsy or `displayMode` is not `block`: If the value is omitted or undefined, no `min-width` or `max-width` style will be applied. If the value is a number, that number will be used to set `min-width` and `max-width`. If column is resizable: If the value is omitted or undefined, a value of `100` be chosen as the starting size of the column. If the value is a number, that number will be used as the starting width of the column.
minResizeWidth	number	Optional	The minimum width to which the column can be resized. Only applicable if the column and table are resizeable. A default value of `32` or `64` is applied depending on whether sorting is enabled for the column.
maxResizeWidth	number	Optional	The maximum width to which the column can be resized. Only applicable if the column and table are resizeable.
keyboardResizeStep	number	Optional	The number of pixels to resize the column far each keypress when resizing via keyboard arrow keys. Defaults to `10`.

WidthModel

The WidthModel interface consists of a value and setter for column widths. It can be passed down as part of a ProColDef object to let the parent component programmatically control the widths of columns. The type specification of WidthModel is as follows.

Property name	Type definition	Required/Optional	Description
width	number	Required	The current value for the width of a column. Often used as the source of truth for the width of column where resizing is enabled, but can also be used to programmatically control the width of a non-resizeable column.
setWidth	(width: number) => void	Required	Function used to set the value for the `width` property. Generally, when this function called, the value of the `width` property in the same object should be updated with the value passed into the function.