FAQ - nandaabiz/jquery-handsontable-old-0.10 GitHub Wiki

Frequently Asked Questions about Handsontable

Does Handsontable render whole table after cell edit?

Yes, currently Handsontable renders whole table after each cell edit. If you use internal scrollbars (see Scroll demo), only the visible part of the table is rendered.

Handsontable seems slow

Perhaps you run default configuration, which does a lot of slow things for best compatibility. To make it faster:

define a scrollable viewport (height, width options)
define column widths (colWidths option)

See Options wiki page for description.

All grids on Scroll demo page are configured like that and they efficiently render data source of 100k+ rows.

I cannot find `<TD>` element for a cell

Handsontable only renders visible part of the table. If the cell is outside of the viewport, the <TD> element does not exist for it.

For more information, see docs about getCell method

Related tickets: #679, #242

I lose changes done to `<TD>` elements. How do I set custom style on `<TD>`?

Use cell renderers for that. See Renderer demo.

If you need to enforce cell rerendering (you shoudn't have to if you use cell renderers), then you can always use the provided render method.

I get InfinityLoop when change value in other cell using before/afterChange

You need to add source flag into your methods call.

In most cases it is a last parameter passed to a method (for more info see Methods page). source is a second parameter in beforeChange & afterChange events. You need add simple if statement, for example: if (source === 'my_source') return;

Table looks malformed in IE7

Make sure that your document has a valid doctype (e.g. <!doctype html>), which triggers IE7 standards mode. It may not work correctly with XHTML and Transitional doctypes.

Related tickets: #631

How to put a master checkbox in the column header

This example shows a checkbox in the column header that switches all the cell checkboxes: http://jsfiddle.net/wpWMJ/105/ (source)

How to change the number of options in autocomplete

To provide different number of maximum visible options, add options : { items : 10 } (or another number) to column configuration. You can even set options : { items : Infinity } if you wish. Last example in Autocomplete demo page shows this in action.

Related tickets: #669, #242

How to truncate text of cell

Why just don't use CSS?

  .handsontable table th, .handsontable table td {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
  }

But this will work only when you have specified colWidths options or if you define width / max-width in your CSS for table cell (add it to code above).

Have you maybe more complex demo

This RGB <–> HEX calculator was created to show complex usage of Handsontable API: http://jsfiddle.net/ekvsU/90/

I've sorted the table and now I keep getting the wrong row indices in event handlers

See Understanding column sorting plugin wiki page for a detailed exmplanation.

Did you not find your question here?

Make sure that demo isn't already exist on project page before creating new issue with demo request.