Home  » Help  » IntegralUI  » Web Components  » Grid

Grid Columns with Multi Level Headers

Grid column can have a header, content and footer. By default, the grid will display columns with headers in one line. However, it is good practice when necessary to display headers in multiple levels to better UI presentation. In this way, you can separate the grid content by column groups with header titles clearly stating the column content.

In this article, you will learn how to create headers in multiple levels for each column in Grid web component for Angular, React and Vue. In addition, you will also learn how to divide the column title in multiple lines within the same header.

Grid component is part of IntegralUI Web
a suite of UI Components for development of web apps

If you have any questions, don't hesitate to contact us at support@lidorsystems.com

This example shows a grid with order details. The first three columns have only one header, while the 'Order Details' column is separated in multiple sub-columns, three header levels in total. There are two child columns 'Product' and 'Shipping Info' with their own child columns.

Using the CheckBox, DropList or DatePicker editor, you can change the values in corresponding cells.

By checking the Auto-Size Columns on bottom, all columns will resize to fit the grid width, removing any empty space in the grid.

How to Show Multi Level Headers in Grid Columns

To create a column with multi level headers in Grid component is simple. Each column object has a field named columns where you can add additional columns as children to that specific column. There is no limit on child levels, you can have as many headers as you need.

The object structure for parent and child columns is the same. You can set the alignment for header, content or footer for each column individually. In addition, each column can have a built-in editor attached or you can create your own custom editor in column template.

this.columns = [

    . . .

    { 
        id: 4, 
        title: 'Order Details',
        headerAlignment: 'center',
        columns: [

            // . . . 

            { 
                id: 42, 
                title: 'Shipping Info', 
                headerAlignment: 'center', 
                contentAlignment: 'center', 
                columns: [
                    { id: 421, title: 'Delivery', editorType: IntegralUIEditorType.DropList, editorSettings: { items: this.deliveryOptions }, headerAlignment: 'center', contentAlignment: 'center', width: 120 },
                    { id: 422, title: 'Cost', headerAlignment: 'center', contentAlignment: 'right', width: 50 },
                    { 
                        id: 423, 
                        title: 'Date', 
                        editorType: IntegralUIEditorType.Date, 
                        editorSettings: {
                            locales: 'en-GB',
                            format: IntegralUIDateFormat.Custom,
                            formatOptions: {
                                year: 'numeric',
                                month: 'short',
                                day: '2-digit'
                            }
                        },
                        headerAlignment: 'center', 
                        contentAlignment: 'center', 
                        width: 120
                    }
                ]
            }

            // 
            // The full data set is available at https://stackblitz.com/edit/integralui-grid-multi-level-headers
            //
            

        ]
    }
];
                                    

As an example, the 'Shipping Info' column is contained within the 'Order Details' column and has three children:

  • 'Delivery' column - it uses the DropList editor that displays a dropdown list
  • 'Cost' column - a normal column
  • 'Date' - it uses the DatePicker editor for editing date values in column cells

All of these columns have their header title and content aligned to appear in center of cell space, only the 'Cost' column has its content aligned on right side.

Depending on parent-child structure of column objects, internally the Grid component arranges the column layout and displays their headers in multiple levels. The maximum header level is determined by the level of column tree structure.

How to Display Header Title in Multiple Lines

Contrary to showing columns with headers in multiple levels, in some cases when you have a long header title, you may need to show it in multiple lines.

By default, the grid is set so that each column header title is displayed on one line. You can change this by following these steps:

  1. On column template, enclose the header content in a div element where you will set the white-space attribute to pre-wrap
  2. Handle the columnSizeChanged event and update the grid layout. This is required because during column resize the header height will change but the grid layout will not update, only the current view. Therefore, you need to update the grid layout manually
import { IntegralUIGrid } from './integralui/components/integralui.grid';

. . .

@ViewChild('grid', { static: false }) grid: IntegralUIGrid;


gridColumnSizeChanged(e: any){
    this.grid.updateLayout();
}

                                    
<iui-grid [columns]="columns" [rows]="rows" (columnSizeChanged)="gridColumnSizeChanged($event)" #grid>
    <ng-template let-column [iuiTemplate]="{ type: 'header' }">
        <div style="white-space:pre-wrap">{{column.title}}</div>
    </ng-template>

    . . .
                                    

When grid column resizes, the header will show the title in multiple lines, breaking the text by words.

Conclusion

This article, presents how to create columns with multi-level headers and showing a header with long titles in multiple lines. This functionality is built-in the IntegralUI Grid, a web component that can be used in plain JavaScript or Angular, React and Vue.

The Grid component is part of IntegralUI Web.

Newsletter


Sign-up to our newsletter and you will receive news on upcoming events, latest articles, samples and special offers.
Name: Email: *
*By checking this box, I agree to receive a newsletter from Lidor Systems in accordance with the Privacy Policy. I understand that I can unsubscribe from these communications at any time by clicking on the unsubscribe link in all emails.