How to word wrap the header column in Slickgrids

Question

I ve recently started working with slickgrids. So getting lots and lots of doubts. How can wordwrap the column headers in slickgrids

Answer 1

I solved this by editing 2 css tags:

In slick-default-theme.css:

.slick-header-columns {
    white-space: pre !important;
    height: 45px;
}

The height here is adjustable to your needs. This was good to display 3 lines.

In slick.grid.css, change the height settings on the below tag to 100%:

.slick-header-column.ui-state-default {
    ...
    height: 100%;
    ...
}

Hope this helps!

Answer 2

fwiw, the author of slick grid answers this question here: https://github.com/mleibman/SlickGrid/issues/61