Grid Columns with Multi Line Headers

Grid column can have a header, body 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 lines for 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 component for JavaScript, Angular, React and Vue. In addition, you will also learn how to divide the column title in multiple lines within the same header.

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, DropDownList or DatePicker editor, you can change the values in corresponding cells. In addition, the Grid component has autoSizeColumns property set to true, which means the grid space is divided between all columns and empty space is removed. Resizing the grid will also auto-size columns to fit the grid width.

The complete sample code is available in Quick Start application as part of IntegralUI Web library.

How to Show Multi Line 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's header template.

• JavaScript
• Angular
• React
• Vue

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

• 'Delivery' column - it uses the DropDownList editor that displays a dropdown list
• 'Cost' column - a column with numeric values
• '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 the cell, only the 'Cost' column has its content aligned on the right side.

Depending on parent-child structure of column objects, internally the Grid component arranges the column layout and displays their headers in multiple lines. 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 in 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.

• JavaScript
• Angular
• React
• Vue

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-line or multi level headers and showing a header with long titles in multiple lines. This functionality is built-in the IntegralUI Grid component that you can use in vanilla JavaScript, Angular, React and Vue.

Grid is a native Web Component, part of IntegralUI Web that you can use in Angular, React, Vue and any other JavaScript framework.