How to translate header column in Slickgrids

I recently started working with slickgrids. So you have many, many doubts. How can column headings be stacked in slickgrids


source to share

3 answers

I solved it by editing 2 css tags:

In slick-default-theme.css


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



here is customizable according to your needs. It was okay to display 3 lines.

The slick.grid.css

change the settings height

in the tag below 100%


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


Hope this helps!



fwiw, the author of smooth grid answers this question here:



I created my own css class to enable / disable the feature:

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


And then in the container div


<div id="my-grid"


And you can set the row height in the SlickGrid config like this:

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




All Articles