Show or Hide Grid Header and Footer
In general, the column header and footer in Grid component are visible. In some cases, you may need to hide the footer and in more rare situations, you may need to hide column header and footer. In later case, the grid will appear and act as a list box, showing data in multiple columns.
There is a sample code below written in JavaScript, Angular, React and Vue that shows how to show or hide grid header and footer.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
As the demo shows, by clicking on check boxes in control panel below the grid, you can set whether grid header or footer are visible or not.
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/Hide Column Header in Grid Component
Showing or hiding the column header is very easy in IntegralUI Grid component. There is a property called showHeader that determines whether the grid header is visible or not. By default, this property is set to true, which means that the header is visible.
By changing this property value to false in HTML declaration of the Grid component, the header will disappear:
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.
How to Hide Grid Footer
In similar way as above, there is a property called showFooter that determines whether the grid footer is visible or not. By default, this property is also set to true, which means that the footer is visible.
When both of these properties are set to false, and if you set the gridLines property to None, the Grid will appear like a List. Because the ListBox component only shows data in single column, the Grid may be better of use here to show data in multiple columns without using a header or footer. It will allow you to easily present data in more uniform way.
Conclusion
Setting the visibility of column header and footer in IntegralUI Grid component for JavaScript, Angular, React and Vue is straightforward. You only need to change the values of two properties and you can have a grid without header, footer or both.
IntegralUI Web is a suite of native web components that includes the Grid. You can use it to develop web apps in Angular, React, Vue or any other JavaScript framework.