CODEWITHSUNDEEP
handsontable
anuf
anuf

Reputation: 3

Fit columns to content in handsontable

I am new to handsontable, and I can not achieve a goal as simple as to have the columns width as long as the content of the cells. Even if I have space enough in handsontable parent to display the full content of the table, some columns overlap the content of some cells.

I do not want to stretch the table to its parent. Just to show the full table contents (as I have space enough).

Update

The answer of fap is right.

I have realized the problem does not come from the basic definition of the table but for the definition of a renderer do on cells. 

cells: function (row, col, prop) {
    var cellProperties = {};
    if (row === 0) {
        cellProperties.renderer = firstRowRenderer;
    }
 return cellProperties;
}

function firstRowRenderer(instance, td, row, col, prop, value,   cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);
    td.style.fontWeight = 'bold';
    td.style.color = 'green';
    td.style.background = '#CEC';
}

It is after the renderer is applied when the content does not fit into handsontable cells and it does not resize. This is the real problem I am facing.

Upvotes: 0

Views: 1878

Answers (1)

Fab
Fab

Reputation: 891

Just don't specify any width for the table and/or columns. Handsontable will size the columns depending of the longest value there is in their respective cells.

See this simple example.

Note that if you edit the values, the column resize dynamically.

But what if you have a value that expand the column width so much that your table is wider than your screen ? Well, if you don't really want that (and I assume that you don't otherwise what's the point of delimiting your columns and/or your table in the first place ?), you can use the option preventOverflow :

preventOverflow: 'horizontal',

As you can see in this example, it will automatically create a navigate bar that prevent your table to go off screen but still size the columns in order to see all your data.

Upvotes: 2

Related Questions