Multiple Column Headers

This example demonstrates how to implement multiple column headers, or column groups.

<p>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.</p> <p>To group headers, add a composite column object in the column configuration. The composite column object appears as follows:</p> <pre><code class="hljs">{ <span class="hljs-attribute">caption</span>: <span class="hljs-string">'header'</span>, columns: [col1, col2, col2], } </code></pre> <p>In this example, there are two column groups, <strong>Employee Info</strong> and <strong>Days Taken</strong>. The columns under these headings are their children. You can set these groups to expandable by setting the <strong>headerGroupShow</strong>&nbsp;property on child columns. You can see this in the <strong>Days Taken</strong> group. The group expander button is automatically added.</p> <p>The available values for <strong>headerGroupShow</strong>:</p> <ul> <li><strong>expanded:</strong> The column is only shown when the group is expanded.</li> <li><strong>collapsed:&nbsp;</strong>The column is only shown when the group is collapsed.</li> </ul> <p>The child columns are always shown when the <strong>headerGroupShow</strong> property&nbsp;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.</p>
<!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 | GrapeCity 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" /> <!-- Google Tag Manager --> <script> (function (w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-WT462SJ'); </script> <!-- End Google Tag Manager --> <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: 'E674186349827489#B0LYWQMpFdP3WSHlVaGdjTFtyLCxUQjdFV5MHey9kTyBnY0pkY6tWcr34caJjSPlEVlR6QpJnZEdjSj9kbkRUZChzMsRFS99mN4ZGO72yK7FXe5tmN59Eai5UM7dEVvgUeYN5MqdUTIpWTpBnSTJEWv24YwoFWr9mWEl6UNVmVMxUd5ckUQdlUNV4MDhENaV5KNNWbJtiSwFUYCVUax4GUuBjZDN7T5dWdDpFNyJjSxJkes3mUt94QrdnMK5mZORGeFZ4QyFTMmdWOWdlMmJ4ZJhTS5MmZatyZ7k5c0JXVB3mWVNke7AFRiojITJCLikjNBNjNzcjI0ICSiwSN8AjN9YjMwUTM0IicfJye35XX3JSWUVVOiojIDJCLiEjdgMlSzdXZpZVY4FGRiojIOJyebpjIkJHUiwiI9MDMykDMggDM8ATOxAjMiojI4J7QiwiIt36YukHdpNWZwFmcn9iKiojIz5GRiwiIj9WSgkHdpNUZwFmcHJiOiEmTDJCLlVnc4pjIsZXRiwiI9gDN7IDO9QzM6gTM4cjNiojIklkI1pjIEJCLi4TPn3UZuJ7cPZTW5hUMtN7MJN6aQFnT5gmd9FEZ4EETlFmW63kU8IGdiRGTJZle5UDbZJHTR34T0JzZoZmbalXQwNmM8EndEFEdSVlMiVnckFmQUJTOahmc7AzRHhlU4I4Vs3kN6lHaHR4LuhWULNIe', SJS_LICENSE_KEY: '*.grapecity.com,E613631884219496#B0qRgJHWSJ7NyBlc8BjNMRHW7g7YldTZXFTQuFnW4hVOCplVSlVV09ERlhEZuVTVKlTazE4Q6VGSw2CdWZUWSVmbjVXbrxmWFVWR8ZzQro7U84WMGdlbuVHb73kS5kjUTN4NvFVdLdXWVR4Nox6Z7UUSysEcXJEMsN6bDN4TxMDVwVmWBRzKxhkTzAXTaJmdD3CRFJTd8R4R6M5RklWa6oUaLlXMwR4R8ZUdtRWVxUUaQh6VXNDdEhlZ7FHR6QXTPJTVvkWcyZnbSdHRtZHcYF6TKN4axYGcZNjTDF7TvFTTr24VqZjVHVjcLd7QkRmdNxkI0IyUiwiI5gDOEF4QGVjI0ICSiwiMzkTO9kTOyMTM0IicfJye35XX3JSSGljQiojIDJCLiITMuYHITpEIkFWZyB7UiojIOJyebpjIkJHUiwiI4MDMyEDMgkDM8ATOxAjMiojI4J7QiwiIt36YukHdpNWZwFmcn9iKiojIz5GRiwiIj9WagkHdpNUZwFmcHJiOiEmTDJCLlVnc4pjIsZXRiwiI6kDN9EjM4gDOxMjNzEjNiojIklkIs4XZzxWYmpjIyNHZisnOiwmbBJye0ICRiwiI34TQ72kNBV6YXpXdGxGWxdHcol4MyUGUHJVbQVHRx44Sw84YxRkS4QnZadDNmhWWxV5QxFlTlZEbBJ5N8gUNQlDb7J6Kl36YHVnb4NGN92UMFdlNORFU8VDSaFlQSVlS4EHTrA5Ohh', }, }; </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"> <!-- Google Tag Manager (noscript) --> <noscript ><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WT462SJ" height="0" width="0" style="display: none; visibility: hidden;" ></iframe ></noscript> <!-- End Google Tag Manager (noscript) --> <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 */