-
Main
- Dashboard No active orders
- Layouts
- Themes
- Starter kit
- Changelog2.0
- RTL version
-
Forms
- Form components
- JSON forms
- Text editors
- Pickers
- Form layouts
-
Components
- Basic components
- Content styling
- Extra components
- Color system
- Animations
- Icons
-
Layout
- Page layouts
- Sidebars
- Navbars
- Vertical navigation
- Horizontal navigation
- Menu levels
-
Data visualization
- Echarts library
- D3 library
- Dimple library
- C3 library
- Google charts
- Maps integration
-
Extensions
- Extensions
- JQuery UI
- File uploaders
- Event calendars
- Internationalization
-
Tables
- Basic tables
- Data tables
- Data tables extensions
- Handsontable
- Responsive tables
-
Page kits
- General pages
- Service pages
- User pages
- Application pages
- Widgets
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 hot-scrollable
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 hot-scrollable
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 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.
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.