Multiple Column Headers | Features | MESCIUS DataViewsJS Demos

This example demonstrates how to implement multiple column headers, or column groups. This feature allows you to group headers by including them in a second header. You can also make the groups expandable. To group headers, add a composite column object in the column configuration. The composite column object appears as follows: In this example, there are two column groups, Employee Info and Days Taken. The columns under these headings are their children. You can set these groups to expandable by setting the headerGroupShow property on child columns. You can see this in the Days Taken group. The group expander button is automatically added. The available values for headerGroupShow: expanded: The column is only shown when the group is expanded. collapsed: The column is only shown when the group is collapsed. The child columns are always shown when the headerGroupShow property is not set. When there is no column can be shown according to the settings, DataViews will ignore the setting and show all columns by default.

<!DOCTYPE html>
<html lang="en">
<head>
<base href="/dataviewsjs/demos/en/sample/Features/Columns/MultipleColumnHeaders/purejs/" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="keywords" content="columns, multiple column headers, multiple headers, headers group, header group" />
<meta
name="description"
content="This example demonstrates how to implement multiple column headers, or column groups."
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Multiple Column Headers | Features | MESCIUS DataViewsJS JavaScript Demos</title>
<link href="/dataviewsjs/demos/node_modules/normalize.css/normalize.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/css/base.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.grid.min.css" rel="stylesheet" type="text/css" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="/dataviewsjs/demos/static/js/app-polyfills.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.process = {
env: {
NODE_ENV: 'production',
USE_NPM: false,
USE_CDN: false,
SITE_ROOT: '/dataviewsjs/demos',
FRAMEWORK: 'purejs',
DVJS_LICENSE_KEY:
'E348418822993781#B0EWvwY4dNNVQqJHUDpFROVWe5ZWNYFlVQFmRsJWRht4Z6lDO4Vla7YUaXhEWxd7Z5YXMuRnY7tWTQRHSlVnaYlXNhlEOpdkZ0FHWYJ5QKd6VXN5aR3ieGhUav9kZTBXWahkYBhEVutmZ72CbjdlZvV5TVdGdiplQsZXe95kUmNmZVF5cJ3mcypWNyx4UydESE3UblxGZyE7KQ94R4BjbUxUewsiaoREMxRDNllWREV6Voh4Q4dDZPRjWrIzUJl4TERXcQZWMHp4Sp9WaMZzN5o6StJmVDJXcwIVVmR6UMVGOlxUW8RmTxZDZTJWVN5GZqJHZuVDMkVGSW3WdxNzKCdDdSB7TzY7cqlnMU5GVyNzNP9WMyhDRvEEOFdkQORDM4dFVlFFWqFWSyMjNQJiOiMlIsISQyIkQ9YjQxIiOigkIsUTM7YjNxYTM0IicfJye&amp;Qf35VfikFVVljI0IyQiwiIxYHITp4c7VWaWFGdhRkI0IiTis7W0ICZyBlIsIiNxUTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiEDO7MTO9IjM8gTM4gDNzIiOiQWSisnOiQkIsISP3EkVxBVUHFDMplzLlVUdGd7cI9UeIt4SshESzV7NvY7ZxlDOuNTb5tzLr',
SJS_LICENSE_KEY:
'E518585142165236#B0wm4nx4QzdlTHRTSOFzcvVnaJdjSnNEeXdTMUtSUzk6bU94QuVXNwZVZjd4SzYjcadXRIVEMzEXTThkVyR7R85UayoHZZBTYQ5mZyh4Shd6VxFXazF4cBNGRG5WTvUGTsV4T6knQYRzKxxUdk9EarplU7d6VLF6KIR7bPJ5N6ZUMWZWaURGRKRDbLJDN5YjSN5mUoxmaxonSD56LEh7Y7RXenpmTvomevZlV9dkaysCO7hTRQFHcGRWQyc5LI9kQmB7QwR4Z7ZHOR3CSXp6SiFWYzFXeXZUSp94K8VDTkFjdwl4KptSYlRWcDxmNE5kS6kzdrkVcNJXROVGbLJkcTNGRzIER8tmd4YGNhh7dxAnMvIHRv46VtBXS4U5KvJ6dZJ6M5p4TxIjd9I5QSpXTTV6SDZXb7lzaL56ZiojITJCLikTQxUTQFV4NiojIIJCLyETO7UzM7kTO0IicfJye&amp;Qf35VfikkR9IkI0IyQiwiIyEjL6ByUKBCZhVmcwNlI0IiTis7W0ICZyBlIsISNwkTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiYzMyUjNxIDNxUDO5gTM5IiOiQWSiwSfdtlOicGbmJCLlNHbhZmOiI7ckJye0ICbuFkI1pjIEJCLi4TPRtGOhtWWEFWd4IDOLRVRvx4SyMGcDhTW6n4ep',
},
};
</script>
<script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.common.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.grid.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/js/license.js" type="text/javascript"></script>
</head>
<body class="theme-default">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="grid" class="grid"></div>
<script src="data.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
</body>
</html>

var cols = [
{
caption: 'Employee Info',
columns: [
{
id: 'name',
caption: 'Name',
dataField: 'Name',
width: 150,
},
{
id: 'dept',
caption: 'Department',
dataField: 'Department',
width: 110,
},
],
},
{
id: 'paidVacation',
caption: 'Paid Vacation',
dataField: 'PaidVacation',
width: 120,
},
{
caption: 'Days Taken',
columns: [
{
id: 'Jan',
caption: 'Jan',
dataField: 'Jan',
headerGroupShow: 'expanded',
width: 50,
},
{
id: 'Feb',
caption: 'Feb',
dataField: 'Feb',
headerGroupShow: 'expanded',
width: 50,
},
{
id: 'Mar',
caption: 'Mar',
dataField: 'Mar',
headerGroupShow: 'expanded',
width: 50,
},
{
id: 'Apr',
caption: 'Apr',
dataField: 'Apr',
headerGroupShow: 'expanded',
width: 50,
},
{
id: 'May',
caption: 'May',
dataField: 'May',
headerGroupShow: 'expanded',
width: 50,
},
{
id: 'Jun',
caption: 'Jun',
dataField: 'Jun',
headerGroupShow: 'expanded',
width: 50,
},
{
id: 'Jul',
caption: 'Jul',
dataField: 'Jul',
headerGroupShow: 'expanded',
width: 50,
},
{
id: 'Aug',
caption: 'Aug',
dataField: 'Aug',
headerGroupShow: 'expanded',
width: 50,
},
{
id: 'Sep',
caption: 'Sep',
dataField: 'Sep',
headerGroupShow: 'expanded',
width: 50,
},
{
id: 'Oct',
caption: 'Oct',
dataField: 'Oct',
headerGroupShow: 'expanded',
width: 50,
},
{
id: 'Nov',
caption: 'Nov',
dataField: 'Nov',
headerGroupShow: 'expanded',
width: 50,
},
{
id: 'Dec',
caption: 'Dec',
dataField: 'Dec',
headerGroupShow: 'expanded',
width: 50,
},
{
id: 'total',
caption: 'Total Leave',
dataType: 'number',
dataField: '=[Jan]+[Feb]+[Mar]+[Apr]+[May]+[Jun]+[Jul]+[Aug]+[Sep]+[Oct]+[Nov]+[Dec]',
width: 120,
},
],
},
];
var layout = new GC.DataViews.GridLayout();
var dataView = new GC.DataViews.DataView(document.getElementById('grid'), data, cols, layout); // focus data.view by default
document.getElementById('grid').focus();

// paid leaves
var data = [
{
Name: 'Alfreds Futterkiste',
Department: 'Admin',
PaidVacation: 15,
Jan: 2,
Feb: 1,
Mar: 0,
Apr: 0,
May: 3,
Jun: 0,
Jul: 0,
Aug: 1,
Sep: 0,
Oct: 1,
Nov: 2,
Dec: 0,
},
{
Name: 'Owen Wilson',
Department: 'IT',
PaidVacation: 12,
Jan: 3,
Feb: 0,
Mar: 0,
Apr: 0,
May: 1,
Jun: 0,
Jul: 5,
Aug: 1,
Sep: 0,
Oct: 0,
Nov: 0,
Dec: 0,
},
{
Name: 'Michael Scott',
Department: 'IT',
PaidVacation: 15,
Jan: 0,
Feb: 1,
Mar: 0,
Apr: 0,
May: 0,
Jun: 0,
Jul: 10,
Aug: 0,
Sep: 0,
Oct: 0,
Nov: 0,
Dec: 0,
},
{
Name: 'Camila Alves',
Department: 'HR',
PaidVacation: 10,
Jan: 1,
Feb: 1,
Mar: 1,
Apr: 1,
May: 1,
Jun: 1,
Jul: 0,
Aug: 2,
Sep: 0,
Oct: 0,
Nov: 0,
Dec: 0,
},
{
Name: 'Kate Hudson',
Department: 'Admin',
PaidVacation: 10,
Jan: 0,
Feb: 5,
Mar: 0,
Apr: 0,
May: 0,
Jun: 0,
Jul: 0,
Aug: 0,
Sep: 0,
Oct: 0,
Nov: 0,
Dec: 0,
},
{
Name: 'Melanie Griffith',
Department: 'Payroll',
PaidVacation: 15,
Jan: 0,
Feb: 0,
Mar: 0,
Apr: 0,
May: 0,
Jun: 0,
Jul: 0,
Aug: 0,
Sep: 10,
Oct: 0,
Nov: 0,
Dec: 0,
},
{
Name: 'Rebecca Romijn',
Department: 'Admin',
PaidVacation: 12,
Jan: 0,
Feb: 0,
Mar: 0,
Apr: 3,
May: 0,
Jun: 0,
Jul: 0,
Aug: 1,
Sep: 2,
Oct: 0,
Nov: 0,
Dec: 0,
},
{
Name: 'Ashlee Simpson',
Department: 'Payroll',
PaidVacation: 15,
Jan: 0,
Feb: 0,
Mar: 0,
Apr: 0,
May: 0,
Jun: 0,
Jul: 0,
Aug: 0,
Sep: 0,
Oct: 0,
Nov: 0,
Dec: 0,
},
{
Name: 'John Herzfeld',
Department: 'IT',
PaidVacation: 10,
Jan: 0,
Feb: 1,
Mar: 2,
Apr: 0,
May: 0,
Jun: 0,
Jul: 1,
Aug: 0,
Sep: 0,
Oct: 0,
Nov: 0,
Dec: 1,
},
];

.gc-column-header-cell[data-column=Jan],
.gc-column-header-cell[data-column=Feb],
.gc-column-header-cell[data-column=Mar],
.gc-column-header-cell[data-column=Apr],
.gc-column-header-cell[data-column=May],
.gc-column-header-cell[data-column=Jun],
.gc-column-header-cell[data-column=Jul],
.gc-column-header-cell[data-column=Aug],
.gc-column-header-cell[data-column=Sep],
.gc-column-header-cell[data-column=Oct],
.gc-column-header-cell[data-column=Nov],
.gc-column-header-cell[data-column=Dec],
.gc-column-header-cell[data-column=total] {
justify-content: center;
}
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZlYXR1cmVzL0NvbHVtbnMvTXVsdGlwbGVDb2x1bW5IZWFkZXJzL3B1cmVqcy9zdHlsZXMuc2NzcyIsIkZlYXR1cmVzL0NvbHVtbnMvTXVsdGlwbGVDb2x1bW5IZWFkZXJzL3B1cmVqcy9zdHlsZXMuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7Ozs7Ozs7Ozs7O0VBYUUsdUJBQUE7QUNDRiIsImZpbGUiOiJGZWF0dXJlcy9Db2x1bW5zL011bHRpcGxlQ29sdW1uSGVhZGVycy9wdXJlanMvc3R5bGVzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5nYy1jb2x1bW4taGVhZGVyLWNlbGxbZGF0YS1jb2x1bW49J0phbiddLFxuLmdjLWNvbHVtbi1oZWFkZXItY2VsbFtkYXRhLWNvbHVtbj0nRmViJ10sXG4uZ2MtY29sdW1uLWhlYWRlci1jZWxsW2RhdGEtY29sdW1uPSdNYXInXSxcbi5nYy1jb2x1bW4taGVhZGVyLWNlbGxbZGF0YS1jb2x1bW49J0FwciddLFxuLmdjLWNvbHVtbi1oZWFkZXItY2VsbFtkYXRhLWNvbHVtbj0nTWF5J10sXG4uZ2MtY29sdW1uLWhlYWRlci1jZWxsW2RhdGEtY29sdW1uPSdKdW4nXSxcbi5nYy1jb2x1bW4taGVhZGVyLWNlbGxbZGF0YS1jb2x1bW49J0p1bCddLFxuLmdjLWNvbHVtbi1oZWFkZXItY2VsbFtkYXRhLWNvbHVtbj0nQXVnJ10sXG4uZ2MtY29sdW1uLWhlYWRlci1jZWxsW2RhdGEtY29sdW1uPSdTZXAnXSxcbi5nYy1jb2x1bW4taGVhZGVyLWNlbGxbZGF0YS1jb2x1bW49J09jdCddLFxuLmdjLWNvbHVtbi1oZWFkZXItY2VsbFtkYXRhLWNvbHVtbj0nTm92J10sXG4uZ2MtY29sdW1uLWhlYWRlci1jZWxsW2RhdGEtY29sdW1uPSdEZWMnXSxcbi5nYy1jb2x1bW4taGVhZGVyLWNlbGxbZGF0YS1jb2x1bW49J3RvdGFsJ10ge1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbn1cbiIsIi5nYy1jb2x1bW4taGVhZGVyLWNlbGxbZGF0YS1jb2x1bW49SmFuXSxcbi5nYy1jb2x1bW4taGVhZGVyLWNlbGxbZGF0YS1jb2x1bW49RmViXSxcbi5nYy1jb2x1bW4taGVhZGVyLWNlbGxbZGF0YS1jb2x1bW49TWFyXSxcbi5nYy1jb2x1bW4taGVhZGVyLWNlbGxbZGF0YS1jb2x1bW49QXByXSxcbi5nYy1jb2x1bW4taGVhZGVyLWNlbGxbZGF0YS1jb2x1bW49TWF5XSxcbi5nYy1jb2x1bW4taGVhZGVyLWNlbGxbZGF0YS1jb2x1bW49SnVuXSxcbi5nYy1jb2x1bW4taGVhZGVyLWNlbGxbZGF0YS1jb2x1bW49SnVsXSxcbi5nYy1jb2x1bW4taGVhZGVyLWNlbGxbZGF0YS1jb2x1bW49QXVnXSxcbi5nYy1jb2x1bW4taGVhZGVyLWNlbGxbZGF0YS1jb2x1bW49U2VwXSxcbi5nYy1jb2x1bW4taGVhZGVyLWNlbGxbZGF0YS1jb2x1bW49T2N0XSxcbi5nYy1jb2x1bW4taGVhZGVyLWNlbGxbZGF0YS1jb2x1bW49Tm92XSxcbi5nYy1jb2x1bW4taGVhZGVyLWNlbGxbZGF0YS1jb2x1bW49RGVjXSxcbi5nYy1jb2x1bW4taGVhZGVyLWNlbGxbZGF0YS1jb2x1bW49dG90YWxdIHtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG59Il19 */