Fork me on GitHub

Handsontable

a minimalistic Excel-like data grid editor for HTML, JavaScript & jQuery

Scrollbars

This page shows how to configure Handsontable scrollbars:

Vertical and horizontal scrollbars

If you want scrollbars, just set container width, height and overflow: scroll in CSS.

Edit in jsFiddle

Single scrollbar (stretch last column)

It is also possible to configure only a single scrollbar. The following example creates one by specifying only the container height and overflow: auto in CSS.

Edit in jsFiddle

Single scrollbar (stretch all columns)

If the table content is not as wide as the container width, the table will be stretched to the container width. The default horizontal stretch model is to stretch the last column only (by using stretchH: 'last' option).

Other possible stretch modes are all (stretches all columns equally, used in the below example) and none (not stretching).

Edit in jsFiddle

Single scrollbar (hybrid mode - default)

Sometimes you don't want if horizontal scroll bar will be needed. That's why stretchH: 'hybrid' is the default column stretching mode

When horizontal scrollbar is NOT visible, it acts as stretchH: 'none'. When horizontal scrollbar is visible, it acts as stretchH: 'last'.

Edit in jsFiddle

For more examples, head back to the main page.

Handsontable © 2012 Marcin Warpechowski and contributors.
Code and documentation licensed under the The MIT License.