How to remove the header in SlickGrid?

I know that there is no API to remove the header row, but I'm sure it can be done by modifying some CSS. Any ideas ?

For example, her开发者_JS百科e: http://mleibman.github.com/SlickGrid/examples/example4-model.html

CSS experts ! I need your help with this one. I'm interested in changing the CSS code of the package that removes the header row. CSS code that can be loaded on top of the package is preferred. The source code is here: http://github.com/mleibman/SlickGrid (Press "Download Source")

The short answer is that doing this is not supported in SlickGrid, at least at the moment. The CSS workaround doesn't work because SlickGrid uses the DOM elements in the header to calculate the dimensions of the viewport. Setting it to display:none makes SlickGrid think that the grid is 0 pixels wide.

You can sort of get around it by doing $(".slick-header-columns").css("height","0px") followed by a call to grid.resizeCanvas() to get rid of the remaining whitespace at the bottom of the grid.

Just add the following to the grid options:

headerHeight: 0

and then in your css put something like:

#myGridID .slick-header-columns {
  display: none;
}

I had the same problem and simply not displaying does work:

$(element).find('.slick-header').css('display', 'none');

This should probably work:

.slick-header-columns { display: none; }

Another way to do this is to add one line to the slick.grid.js

function createColumnHeaders() { return; }

if you add a return to the first line inside of createColumnHeaders it seems to remove the headers.

Maybe late, but works for me

$('#myGrid').find('.slick-header-column.ui-state-default').css('display', 'none');