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 September 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 the react-bootstrap-data-grid table:
- 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-proStyling
The names of style sheets for the table component are slightly different. See the relevant section in the installation documentation for details on how to import style sheets for the pro edition.
API Differences
- the name of the grid component is
TableProrather thanTable - the name of the type that represents the props for the
TableProcomponent isTableProPropsrather thanTableProps - the name of the column definition type
ProColDefrather thanColDefand contains additional fields
See more details on each specific point below.
TablePro
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";TableProProps
This type contains the props for TablePro. The props are largely the same as TableProProps but with a few differences.
- The column definitions in the
colsprop are of typeProColDef[]instead ofColDef[]. - The
styleModelprop is of typeProStyleModel.ProStyleModelcontains all the properties ofStyleModelbut additionally containsreorderModelproperty for customizing style of the row reordering feature. GridProPropscontains areorderModelprop to enable row reordering whileTablePropsdoes not.
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 |
| width | number | WidthModel | Optional | Causes the grid to set In all cases, if a Otherwise, if the column is not resizeable, either because
If column is resizable:
|
| 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 |
| 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 |
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 |