React Grid - Column Resizing

Table columns in the Grid component can be resized programmatically or via the Grid’s UI.

The following plugins implement column resizing features:

The plugin’s order is important.

Basic Setup

Import the plugins listed above to set up a simple Grid with column resizing enabled.

Uncontrolled Mode

In the uncontrolled mode, use the TableColumnResizing plugin’s defaultColumnWidths property to specify the initial column widths. This property must define every column’s width; otherwise, it throws an error.

Controlled Mode

In the controlled mode, pass the column widths to the TableColumnResizing plugin’s columnWidths property, and handle the onColumnWidthsChange event to control the column width state.