React Grid - Can we auto adjust columns like in the older non-react grid

Hello, Ryan,

A similar result to auto size the columns based on the content can be achieved with the KendoReact Grid as well.

I can suggest using a method to calculate with width of the rendered text(I used a third-party library called calculate size). Then set the width of the column to a functional which will calculate the width of the longest text and set it. I made an example showcasing this:

https://stackblitz.com/edit/react-2jlahu?file=app/main.jsx

I have opened a feature request for double click auto size on the column:

https://feedback.telerik.com/kendo-react-ui/1416456-autowidth-column-on-header-double-click

Regards,
Stefan
Progress Telerik

Stefan,

Thanks as always for the quick response. I was trying to wire up your code so that a single click to the header would fire your resize logic and it works fine until after dragging the columns to resize them. Is there something other than updating `Column.width` that you have to do to get the column to resize itself?

Here's a demo: https://stackblitz.com/edit/react-2jlahu-sibxfg

I'm basically setting the width on state after the user clicks on the header and setting state to width

```javascript
<Column field="ProductName" title="Name" width={this.state.maxWidth} headerCell={() => <HeaderCell onHeaderClicked={() => this.calculateWidth("ProductName")} />}/>
```

Hello, Ryan,

Thank you for the example.

Based on the description I assume that the issue is that after resizing the columns by dragging, the auto-width functionality does not work?

If this is the case, it occurs because when the Grid is resize it changes the widths of the columns, but the maxWidth value in the state stays the same. Then once we click the column we set the same value, and React checks that the values are the same and does not re-render the component. 

I can suggest on the onColumnResize event to get the real value for the column width and set it in the state, so once the column is clicked, the new value will be applied:

https://stackblitz.com/edit/react-2jlahu-qtas88?file=index.js

Also, if this will be done for multiple columns, we suggest keeping all of the columns configuration in the state, to keep the columns configurations and values after the resize event the same.

Regards,
Stefan
Progress Telerik