Fixed columns and rows

The following example demonstrates how to make certain columns and rows fixed when scrolling is enabled. To enable this functionality, specify amount of fixed rows with fixedRowsTopand amount of fixed columns with fixedColumnsLeftoptions. Note:You'll need horizontal scrollbars, so just set a container widthand overflow: autoin CSS or simply add pre-defined hot-scrollableclass to the parent container.

Scrolling enabled

The following example demonstrates vertical and horizontal scrolling of the table. If you want scrollbars, just set container width, heightand overflow: autoin CSS. Or simply add hot-scrollableclass to the parent container. This demo shows table of 250 rows and columns. Only visible part is rendered. Native div scrollbar is used to scroll through the table.

Columns freezing

In order to manually freeze a column (in another words - make it fixed), you need to set the manualColumnFreezeconfig item to truein Handsontable initialization. When the Manual Column Freezeplugin is enabled, you can freeze anynon-fixed column and unfreeze any fixed column in your Handsontable instance using the Context Menu. Note:to properly use this plugin, you need to have the Context Menu plugin enabled.

Columns moving

The following example demonstrates an ability to move rows and columns, some kind of drag sorting. To enable these features, use settings manualColumnMove: trueand manualRowMove: true. The draggable move handle appears: in the right part of the column header; in the top part of the row header. Handler styling can be customized in less files.

Column stretching

The following example demonstrates how columns can be stretched using stretchHoption. Possible mode values are: none- default value, disables stretching, column width depends on the content width; last- stretch only the last column; all- stretch all the columns evenly. Example below uses stretchH: 'last'to stretch only last column.

Resizable rows and columns

The following example demonstrates manual row and column resizing feature using manualRowResizeand manualColumnResizeoptions. Can be either set to a boolean or define initial column and row resized widths. In addition, columns width and row heights have custom values defined in an arrays of numbers added to colWidthsand rowHeightsoptions.