Reply To: Grid Column Width Based on value of the column

[YavorDashev]

Hi Ronak,
If you set the width property of a column to ‘auto’ and the allowResize(disables changing the width of the column) property to false this way when you have large value the GridColumn width will adjust so that the value inside the cell will not overflow it.
I have prepared a quick code snippet how to set your column:

	behavior = {
        columnResizeMode: 'growAndShrink'
         };
	columns: GridColumn[] =
	[
	  { label: 'Name', dataField: 'name', width: 250 },
	  { label: 'Beverage Type', dataField: 'type', width: 250 },
	  { label: 'Calories', dataField: 'calories', width: 180 },
	  { label: 'Total Fat', dataField: 'totalfat', width: 'auto', allowResize: false},
	  { label: 'Protein', dataField: 'protein' }
	];

Let me know if that works for you!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/