• What is KendoReact
  • Getting Started
  • Server Components
  • Components
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting

Set the Width of the Column Based on the Content


Product Version3.0.0
ProductProgress® KendoReact


How can I set the width of the Grid column based on the content. I want the column width to be set based on the longest value in the column.


Using HTML canvas measureText()

In order to automatically calculate the column width, we can suggest using the Canvas API measureText function that can calculate the text width based on the font weight, size, and family. Then we can use that information to dynamically set the width of the column.

View Source
Change Theme:

Using calculate-size

Another approach would be to use a package called calculate-size or similar which will calculate the size of the text based on the font.

View Source
Change Theme: