English
Deutsch
Українська
España
Русский
RTL support
Handsontable library doesn't support RTL direction at the moment. The library will be updated once dev team adds it.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 fixedRowsTop and amount of fixed columns with fixedColumnsLeft options. Note: You'll need horizontal scrollbars, so just set a container width and overflow: auto in CSS or simply add pre-defined has-scroll class to the parent container.
The following example demonstrates vertical and horizontal scrolling of the table. If you want scrollbars, just set container width, height and overflow: auto in CSS. Or simply add has-scroll class 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.
In order to manually freeze a column (in another words - make it fixed), you need to set the manualColumnFreeze config item to true in Handsontable initialization. When the Manual Column Freeze plugin is enabled, you can freeze any non-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.
The following example demonstrates an ability to move rows and columns, some kind of drag sorting. To enable these features, use settings manualColumnMove: true and 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.
The following example demonstrates how columns can be stretched using stretchH option. 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.
The following example demonstrates manual row and column resizing feature using manualRowResize and manualColumnResize options. 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 colWidths and rowHeights options.