Fixed width for few columns

[Satheesh Kumar]

Hi

I am using react grid in which I want few columns of fixed width and the remaining columns auto width. Like command column for 30px, name column for 50px, etc and the remaining columns auto width. Grid can have horizontal scroll if required. Also I have these settings enabled "allowResizing={true} clipMode={'EllipsisWithTooltip'}".

Can you help me to achieve this with any sample if possible?

Thanks 

[Rajapandiyan Settu]

Hi Satheesh, 

Thanks for contacting Syncfusion support. 

Before proceeding with your query, we would like to share the behavior EJ2 Grid. 

By default, the horizontal scrollbar of Grid will be shown only when the total Grid columns width exceeds the Grid’s width. 

By using width property, you can define the width to Grid. If we does not provide any width to Grid, then Grid adapts its parent-container width. 

For example, consider the Grid having 500px width, the first two columns having width of 100px &150px and the remaining column’s width is undefined. Now, the first two columns occupy 250px from the Grid’s width. If we didn’t define the width in the column, then default width “auto” is used in that column. So, the remaining 250px is equally shared between all these column and the horizontal scrollbar doesn’t shown in the Grid. Since, this is the behavior of Grid. 

Suppose, if the total columns width exceeds the Grid’s width, then the column contains width as auto is not shown (0px applied to that column) in the Grid. 

Find the below sample for your reference. 

Sample: https://stackblitz.com/edit/react-uwkmhy-ubgmcg?file=index.js  

Screenshot #1: columns with auto width (resizing disabled) 

 

When allowResizing enabled in the Grid, the default width 200px is set to that column if it having undefined width. Please find the sample for your reference. 

Sample: https://stackblitz.com/edit/react-uwkmhy-5o2kcx?file=index.js  

Screenshot #2: columns with 200px width (resizing enabled) 

 

The EllipsisWithTooltip Displays ellipsis when the cell content overflows its area, also it will display the tooltip while hover on ellipsis is applied. 

Please get back to us if you need further assistance with this. 

Regards, 

Rajapandiyan S

[Satheesh Kumar]

Hi

Thank you for the explanation. Will update the code and check and revert for any clarification,

[Rajapandiyan Settu]

Hi Satheesh, 

We will wait to hear from you. 

 

Regards, 

Rajapandiyan S