How to auto-adjust width of columns as per the screen space available?

How to auto-adjust width of columns as per the screen space available?

Posted by: chetan.shetty on 16 June 2019, 11:57 pm EST

• 

  chetan.shetty

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 16 June 2019, 11:57 pm EST

  Hi,

  I have an issue where I’m using flex-sheet and I have a dynamic number of columns that render on load. I want the columns to auto-adjust themselves as much as possible according to the screen space available in order to avoid unnecessary horizontal scrolls in some cases whereas empty whitespace in case of others.

  For example,

  1. If there are 5 columns available, they must occupy the entire width of the div so that empty whitespace is avoided.
  2. If there are 10 columns available and they can fit in the available space, then their widths must be adjusted in such a way that they do fit.
  3. If there are 10+ columns available and they cannot fit in, then a horizontal scroll must appear.

  Basically, all I want is that the columns must auto-adjust their widths as per the content but with some minimum width value beyond which they must not wrap AND if there are lesser columns, then they must auto-adjust their widths to occupy the width of the div completely.

• 

  chetan.shetty

  • Post Options:
  • Link
    Copy

  Posted 17 June 2019, 12:00 am EST - Updated 3 October 2022, 10:59 am EST

  How it is:
  
  

  

  1482×243 45.9 KB

  How it should be:
  
  

  

  1478×244 66.8 KB

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 17 June 2019, 8:09 pm EST

  Hello,

  To auto adjust the width of all the columns, you will need to set the width of all columns to ‘*’. This is known as star-sizing and it tells the column to stretch to fill the available width of the grid so there is no empty space. You may also need to set the minWidth of each of the column because sometimes, star-sizing makes a column very small if the user’s screen is small. Please refer to the sample below:

  https://stackblitz.com/edit/js-xe51um

  Regards,
  
  Manish Gupta