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

Answer 3

I created a custom css class to enable/disable the functionality :

.slickgrid-word-wrap .slick-cell {
    white-space: normal;
    overflow: auto;
}

And then on my div container :

<div id="my-grid"
     class="slickgrid-word-wrap"></div>

And you can still set the row's height on the SlickGrid configuration like this :

var options = {
            editable: false,
            enableCellNavigation: false,
            autoExpandColumns: false,
            forceFitColumns: false,
            showFooterRow: false,
            explicitInitialization: true,
            multiColumnSort: false,
            rowHeight: 50 // <--- here
        };