Resizing Columns
The KendoReact Data Grid enables you to resize its columns by dragging the edges (resize handles) of the header cells.
To enable column resizing, set the resizable property of the Grid to true.
- By default, the column-resizing feature is disabled.
- If the user resizes the Grid columns so that the total width of the columns becomes less than the width of the Grid, the remaining table is filled with whitespace.
The following example demonstrates basic column resizing, where users can drag the edges of header cells to adjust column widths.
Limiting the Resizing
To restrict the resizing of the column within a certain range, set its minWidth and maxWidth
The following example demonstrates how to constrain column resizing using minWidth and maxWidth, where the "Product Name" column is limited to a range of 300–500 pixels.
Auto-Resizing
The KendoReact Data Grid enables you to auto-resize columns to fit their content by double-clicking on the resize handle. To enable column auto-resizing, set the resizable property of the Grid to true.