How to do multi-column header (multi layer header) in SlickGrid?

Question

I am using SlickGrid (https://github.com/mleibman/SlickGrid) to display an editable table, like this one, the one on the right: header span multiple columns

But seems currently SlickGrid does not support this, how can this be done?

I think its not available in slickgrid.... ...[check this](http://stackoverflow.com/questions/10734245/how-multiple-column-grouping-can-be-done-in-slickgrid) — Premshankar Tiwari, Jun 10 '13 at 14:13
With some CSS it's possible to achieve that. Have you considered merging cells together? — Bárbara Peres, Oct 06 '19 at 07:27

score 0 · Answer 1 · edited Oct 18 '17 at 22:37

I found the following snippets from within the SlickGrid examples/example-column-group.html that worked for me. Note: I'm using this forked version of SlickGrid: https://github.com/6pac/SlickGrid/releases/tag/2.3.8

Add the following options: (in addition to whatever options you already may be using)

var options = {
    createPreHeaderPanel: true,
    showPreHeaderPanel: true,
    preHeaderPanelHeight:23,
    explicitInitialization:true
};

Add columnGroup property to each column you want to be grouped under a super-heading, for example:

var columns = [];
columns.push({ id: "col1", name: "Col 1", field: "col1",columnGroup:"SuperHeading" });
columns.push({ id: "col2", name: "Col 2", field: "col2", columnGroup: "SuperHeading" });

Explicitly initialize grid using grid.init() , after you define your grid:

grid = new Slick.Grid("#myGrid", dataview, columns, options);

grid.init();

Add this boiler-plate code:

var $preHeaderPanel = $(grid.getPreHeaderPanel())
    .addClass("slick-header-columns")
    .css('left', '-1000px')
    .width(grid.getHeadersWidth());
$preHeaderPanel.parent().addClass("slick-header");

var headerColumnWidthDiff = grid.getHeaderColumnWidthDiff();
var m, header, lastColumnGroup = '', widthTotal = 0;

for (var i = 0; i < columns.length; i++) {
    m = columns[i];
    if (lastColumnGroup === m.columnGroup && i > 0) {
        widthTotal += m.width;
        header.width(widthTotal - headerColumnWidthDiff)
    } else {
        widthTotal = m.width;
        header = $("<div class='ui-state-default slick-header-column' />")
          .html("<span class='slick-column-name'>" + (m.columnGroup || '') + "</span>")
          .width(m.width - headerColumnWidthDiff)
          .appendTo($preHeaderPanel);
    }
    lastColumnGroup = m.columnGroup;
}

score -1 · Answer 2 · answered Jun 10 '13 at 22:24

-1

You can create header in other div by html code. And then make slickgrid header height 0px.

$("#container").find(".slick-header").css("height","0px");

But don't forget make resizable=false in column options.

answered Jun 10 '13 at 22:24

Nik

121
8

Thanks, Nokolay. Will post here after more investigation is done. – CGP Jun 11 '13 at 17:52

How to do multi-column header (multi layer header) in SlickGrid?

2 Answers2