Usually, you can set column width="xx" and the column will take that many pixels of width. However, there are certain features and some nuances that make column widths a rather intriguing topic. The key here is the columnWidthMode property and how it interacts with the horizontalScrollPolicy property.
The columnWidthMode property on the column specifies how the column widths are applied. This property defaults to "none". The Grid provides a rich mechanism to control column widths. Column widths are a complicated topic because there are a number of scenarios and rules that we need to account for
- When there is a horizontal scroll (horizontalScrollPolicy=on or auto): In this case, the columns are free to take as much width as they need. Below is how the column widths should handle in this case:
- When columnWidthMode=none or fixed: The column will basically take the width specified by the width property
- When columnWidthMode=fitToContent The column will take the width calculated by its contents. The grid identifies the longest string to be displayed in this column, and sets the width of the column to this value.
- When columnWidthMode=percent. This is not a valid setting when horizontalScrollPolicy is on or auto. The setting will be ignored and the column will take the width specified by the width property. When horizontalScrollPolicy is set to auto or on, columnWidthMode=percent holds no meaning, since there are no fixed bounds to squish the columns within.
- When there is no horizontal scroll (horizontalScrollPolicy=off - this is the default):
- When columnWidthMode=none: The column will take the width specified by the width property, and adjust for width (see sum of Column Widths exceeds Grid Width below).
- When columnWidthMode=fixed: The column will take the width specified by the width property, and not adjust for width.
- When columnWidthMode=fitToContent: The column will take the width calculated by its contents, and adjust for width (see sum of Column Widths exceeds Grid Width below).
- When columnWidthMode=percent: For these columns, the grid divides the remaining width after allocating all fixed and fitToContent columns, on a percentage basis among all columns that have columnWidthMode set to percent. PLEASE NOTE : If you set columnWidthMode='percent', also set percentWidth. Also, ensure that the percentWidth of the columns adds up to a 100.
Finally, there are the below calculations once the column widths are allocated:
- Grid Width exceeds Sum of Column Widths: The situation where the calculated column widths do not add up-to the grid with is also handled on basis of the horizontalScrollPolicy.
- When there is a horizontal scroll (horizontalScrollPolicy=on or auto): The last column extends to fill up all the remaining space. If you do not want your last column to resize, add a dummy column that has the following property (order is important) minWidth="1" width="1" paddingLeft="0" paddingRight="0"
- When there is no horizontal scroll (horizontalScrollPolicy=off - this is the default): The extra width is divided proportionally between all the columns where columnWidthMode does not equal fixed.
- Sum of Column Widths exceeds Grid Width: Similarly, The situation where the allocated column widths exceed the width of the grid with is also handled on basis of the horizontalScrollPolicy.
- When there is a horizontal scroll (horizontalScrollPolicy=on or auto): We simply show a scroll bar, and no column widths are changed.
- When there is no horizontal scroll (horizontalScrollPolicy=off - this is the default): This excess width is reduced proportionally between columns where columnWidthMode does not equal fixed.
Left and right locked columns do not support column width mode, it is ignored for these.
Finally, with multi level grids, if the hierarchy's columns width in the top level is smaller than the next level's width (and the horizontal scroll policy of the grid is "on"/"auto"), the horizontal scroller will be calculated only by the top level's width, making some columns in the next level unreachable. The recommendation is to give a large column width to the last top level column, which is large enough so that sum of column widths at top level is larger than the sum of column widths at the bottom level.
Values : none,fixed,percent,fitToContent
