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 manage the column width state.

Resizing Modes

Columns can be resized in the following modes:

  • nextColumn
    When a user resizes a column, the width of the next column changes.

  • widget
    When a user resizes a column, columns on the right shift but retain their widths. In this mode, auto and percentage values cannot be used to specify column widths.

To specify the resizing mode, use the TableColumnResizing plugin’s columnResizingMode property.

The following example demonstrates the resizing modes: