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.
Import the plugins listed above to set up a simple Grid with column resizing enabled.
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.
import React, { useState } from 'react';
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.
import React, { useState } from 'react';
Columns can be resized in the following modes:
nextColumn
widget
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:
import React, { useState } from 'react';