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 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 controlled mode, pass the column widths to the TableColumnResizing plugin’s columnWidths property, and handle the onColumnWidthsChange event to control the column width state.