Auto Size Columns to Fit Grid Width
When there are few columns in Grid component, an empty space may appear on the right side if total column's width is less than the grid width. By changing the column width (either from code or by resizing), you can fill the remaining grid space. However, if you want to have a Grid where columns are auto sized to fill the grid width so that there is no empty space, a better way is to set this initially. This is handled by a autoSizeColumns property that determines the way columns are resized.
A sample code that shows how to auto size columns to fir the grid width in whole is available in JavaScript, Angular, React and Vue, in following sections below.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
As you can see in above sample, columns occupy the grid width in full. The horizontal scrollbar will remain hidden, and whenever a column resizes, it only changes its width and the width of neighboring column.
The complete sample code is available in Quick Start application as part of IntegralUI Web library.
IntegralUI Web
Native Web Components for Angular, React and Vue
How to Auto Size Columns to Fit Available Grid Width
In general, auto size of columns is disabled. This means, that whenever column width changes, if the total width of all columns exceeds the grid width, a horizontal scrollbar will appear. This is good when grid has many columns. However, in cases when you have few columns it is better to set for columns to fit the grid width automatically.
By setting the autoSizeColumns property to true, the grid layout will automatically update its layout based on column width settings, and if there is available space, it will adjust the width of each column, so that they all fit in place. If there are multiple columns and their total width is greater than the grid width, each column width will be reduced accordingly.
Currently ReactJS doesn't have full support for Web Components. Mainly because of the way data is passed to the component via attributes and their own synthetic event system. For this reason, you can use available wrappers located under /integralui/wrappers directory, which are ReactJS components that provide all public API from specific IntegralUI component.
When this mode is active, column resizing also works in different way. Now when column resizes, it changes its width and the width of its neighboring column. This prevents appearance of the horizontal scrollbar.
Grid Columns with Fixed, Minimal and Maximum Width
Some columns are better to have a fixed width, or to resize only in specific range. For this purpose, you can use the following fields of column object:
- allowResize - (true or false) determines whether column can resize during run-time
- fixedWidth - (true or false) determines whether the column width is fixed or not
- minWidth - (number) specifies the lowest width the column can have
- maxWidth - (number) specifies the highest width the column can have
Using above fields, you can set the way column resizes during run-time, on individual level.
From above demo, you can see that column with check boxes has a fixed width. When mouse cursor is moved over this column header, the resize cursor will never appear. In addition, when next column is resizing, it will change the width of the previous or next column in line, skipping the checkbox column.
The 'Ratings' has minimum width set to 90, which means that it can't resize past that value.
Conclusion
In cases when you have a Grid with few columns, it is better to make them appear so that there is no empty space in the grid. IntegralUI Grid component for JavaScript, Angular, React and Vue comes with built-in feature that auto size columns so that they all fit in available space of the grid. In addition, there are few options to choose from on how column will resize during run-time or whether column width is fixed or not.
Grid is a native Web Component, part of IntegralUI Web that you can use in Angular, React, Vue and any other JavaScript framework.