Show/Hide Column Header and Footer in Angular Grid

Created: 09 October 2017

Updated: 05 April 2019

In general, the column header and footer in Grid component for Angular 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.

As the demo shows, by clicking on check boxes in control panel, you can set whether grid header or footer are visible or not.

How to Show/Hide Column Header

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 Angular Grid component, the header will disappear:

• HTML

<iui-grid [columns]="columns" [rows]="rows" [showHeader]="false"></iui-grid>
                            

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.

• HTML

<iui-grid [columns]="columns" [rows]="rows" [showFooter]="false"></iui-grid>
                            

When both of these properties are set to false, and if you set the gridLines property to None, the Grid will appear like a ListBox. Because the ListBox component only shows data in a single column, the Grid may be better to use here. 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 Angular is straightforward. You only need to change the values of two properties and you can have a grid without header, footer or both.

The Grid component is part of IntegralUI Web.