Show/Hide Columns in Grid Component
When you have too many columns visible in the Grid, you may want to show only those that are mostly required. For this purpose, some of the columns will remain hidden and should appear only when needed. In IntegralUI Grid component, you can show and hide columns by simply setting the visible field of specified column object to true or false.
A sample code that presents how to show or hide columns in the grid 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 above demo presents, to show or hide a specific column you can use a context menu or dropdown menu. Whenever you right-click on a grid header a context menu will appear displaying the name of each column and a check mark stating whether the column is visible or hidden. In similar why, when column is selected by clicking on its header a command button with dropdown menu will appear from where you can choose which columns will become visible or hidden.
By selecting the column from the menu option, you can change its visibility. The difference is with context menu you can show/hide only one column at time, while with dropdown menu you can check or uncheck any number of columns you want to change their visibility. Clicking again on the dropdown menu button will apply this change.
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 Show or Hide a Grid Column
You can hide columns from code by setting the visible field of each column object to true or false. You can set this initially in your data source, or change it after the grid is populated. In either case, columns that are marked as hidden will not be displayed in the grid.
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.
Use of ContextMenu to Show or Hide Grid Columns
One way to change column visibility is to use a context menu. In this example, the context menu displays a list of all columns and a check mark that states whether the column is currently visible or hidden.
How to Create DropDown Menu and Use it Show/Hide Grid Columns
There is no built-in dropdown menu option available in the Grid component, but you can easily create one but simply modifying the column header template. At first, you need to add a dropdown button that will appear to the right of column header. When this button is clicked, a dropdown menu will pop up with a list of all columns available and whether they are visible or not.
There are also other ways to change column visibility, and all of them require changing the column's visible field to true or false and updating the grid layout.
Conclusion
Having option to hide columns is most useful when you have large data set with many columns. In Grid component that you can use in JavaScript, Angular, React and Vue, this process is simple. Each column object has a visible field that allows you to change the column visibility during run-time. By setting this field to true or false, you can show or hide specific column on demand.
In this case, an example is shown how you can show/hide columns using a context menu and a dropdown menu. However, you can choose any other solution that is best suitable for your application.
The Grid is a native Web Component, part of IntegralUI Web that you can use in Angular, React, Vue and any other JavaScript framework.