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.
import React from 'react';
import ReactDOM from 'react-dom';
import { Grid, GridColumn } from '@progress/kendo-react-grid';

import products from './products.json';

class App extends React.Component {
    render() {
        return (
                style={{ height: '400px' }}
                <GridColumn field="ProductID" title="ID" width="45px" minResizableWidth="30" />
                <GridColumn field="ProductName" title="Name" width="250px" />
                <GridColumn field="Category.CategoryName" width="250px" title="CategoryName" />
                <GridColumn field="UnitPrice" title="Price" width="80px" />
                <GridColumn field="UnitsInStock" title="In stock" />

ReactDOM.render(<App />, document.querySelector('my-app'));