React Grid Column Resizing Overview
The Ignite UI for React Column Resizing feature in React Grid allows users to easily adjust the width of the columns of the IgrGrid
. By default, they will see a temporary resize indicator while the drag resizing operation is in effect. There are several resizing options available - Resizing Columns in Pixels/Percentages, Restrict Column Resizing, Auto-Size Columns on Double Click, and Auto-Size Columns on Initialization.
React Grid Column Resizing Example
Column resizing is also enabled per-column level, meaning that the IgrGrid
can have a mix of resizable and non-resizable columns. This is done via the resizable
input of the IgrColumn
.
<IgrColumn field="ID" resizable="true" width="100px"></IgrColumn>
You can subscribe to the ColumnResized
event of the IgrGrid
to implement some custom logic when a column is resized. Both, previous and new column widths, as well as the IgrColumn
object, are exposed through the event arguments.
function onResize(grid: IgrGridBaseDirective, event: IgrColumnResizeEventArgs) {
IgrColumn col = event.detail.column;
string pWidth = event.detail.prevWidth;
string nWidth = event.detail.newWidth;
}
<IgrGrid id="grid" autoGenerate="false" columnResized={onResize}>
<IgrColumn field="ID" width="100px" resizable="true"></IgrColumn>
<IgrColumn field="CompanyName" width="100px" resizable="true"></IgrColumn>
</IgrGrid>
Resizing Columns in Pixels/Percentages
Depending on the user scenario, the column width may be defined in pixels, percentages or a mix of both. All these scenarios are supported by the Column Resizing feature. By default if a column does not have width set, it fits the available space with width set in pixels.
This means that the following configuration is possible:
<IgrGrid id="grid" autoGenerate="false">
<IgrColumn field="ID" width="10%" resizable="true"></IgrColumn>
<IgrColumn field="CompanyName" width="100px" resizable="true"></IgrColumn>
<IgrColumn field="ContactTitle" resizable="true"></IgrColumn>
</IgrGrid>
[!Note] There is a slight difference in the way resizing works for columns set in pixels and percentages.
Pixels
Resizing columns with width in pixels works by directly adding or subtracting the horizontal amount of the mouse movement from the size of the column.
Percentages
When resizing columns with width in percentages, the horizontal amount of the mouse movement in pixels translates roughly to its percentage amount relative to the grid width. The columns remain responsive and any future grid resizing will still reflect on the columns as well.
Restrict Column Resizing
You can also configure the minimum and maximum allowable column widths. This is done via the minWidth
and maxWidth
inputs of the IgrColumn
. In this case the resize indicator drag operation is restricted to notify the user that the column cannot be resized outside the boundaries defined by minWidth
and maxWidth
.
<IgrColumn field="ID" width="100px" resizable="true"
minWidth="60px" maxWidth="230px"></IgrColumn>
Mixing the minimum and maximum column width value types (pixels or percentages) is allowed. If the values set for minimum and maximum are set to percentages, the respective column size will be limited to those exact sizes similar to pixels.
This means the following configurations are possible:
<IgrColumn field="ID" width="10%" resizable="true"
minWidth="60px" maxWidth="230px"></IgrColumn>
or
<IgrColumn field="ID" width="100px" resizable="true"
minWidth="5%" maxWidth="15%"></IgrColumn>
Auto-Size Columns on Double Click
Each column can be auto sized by double clicking the right side of the header - the column will be sized to the longest currently visible cell value, including the header itself. This behavior is enabled by default, no additional configuration is needed. However, the column will not be auto-sized in case maxWidth
is set on that column and the new width exceeds that maxWidth
value. In this case the column will be sized according to preset maxWidth
value.
You can also auto-size a column dynamically using the exposed autosize
method on IgrColumn
.
const column = grid.getColumnByName('ID');
column.autosize();
Auto-Size Columns on Initialization
Each column can be set to auto-size on initialization by setting width
to 'auto':
<IgrColumn width='auto'>
When the column is first initialized in the view it resolves its width to the size of the longest visible cell or header. Note that cells that are outside of the visible rows are not included.
This approach is more performance optimized than auto-sizing post initialization and is recommended especially in cases where you need to auto-size a large number of columns.
Styling
In addition to the predefined themes, the grid could be further customized by setting some of the available CSS properties. In case you would like to change the color of the resize handle, you need to set a class for the grid first:
<IgrGrid className="grid"></IgrGrid>
Then set the related CSS property for that class:
.grid {
--ig-grid-resize-line-color: #f35b04;
}
Demo
API References
Additional Resources
- Virtualization and Performance
- Paging
- Filtering
- Sorting
- Summaries
- Column Moving
- Column Pinning
- Selection
Our community is active and always welcoming to new ideas.