How to Change Expanding Column in Grid Component
By default, the first column in Grid component contains the expand box, which becomes visible only when there are child rows. In some cases where you need to have columns that show statuses, icons or different set of flags, having an expand box in the first column is unwanted. You can change this easily in IntegralUI TreeGrid component and select any other column to have the expand box.
The sample code below shows how to change the expanding column in Grid component for each JavaScript framework: Angular, React and Vue.
a suite of native Web Components for Angular, React and Vue
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
In this example, using the control panel on right side you can select the column that will contain the expand box. When a new option is selected, the grid view is updated.
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
Grid Column With Expand Box and How to Change It
The Grid component has a property called expandColumnIndex that specifies the index from the column list that will contain the expand box. When columns are reordered, the expand box will appear in the column that has position equal as the index set in column list.
By default, the expandColumnIndex property is set to 0, which means the first column will have the expand box. By changing this property value, the grid will automatically update its layout showing the expand box is corresponding column.
Here is an example on you can set this in code, when a new option is selected from the dropdown list:
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.
Having different alignment for columns is useful in cases when you have different type of values. Usually strings in columns are aligned on left side, decimal numbers on right side, integer numbers or dates are centered etc.
Conclusion
IntegralUI Tree Grid component for JavaScript, Angular, React and Vue comes with built-in feature that allows you to change the column that contains the expand box. This may become useful in situations when you need to have columns in front of the expanding column, for showing checkboxes, statuses, icons etc.
IntegralUI Web is an UI library of native web components that includes the Tree Grid. You can use it to develop web apps in Angular, React, Vue or any other JavaScript framework.