Handsontable is a data grid component with an Excel-like appearance. Built in JavaScript, it integrates with any data source with peak efficiency. It comes with powerful features like data validation, sorting, grouping, data binding, formula support or column ordering. This example demonstrates a very basic configuration with enabled columns and rows header. Cells are generated with handsontable helper.

The following example demonstrates headersadded to the table columns. To add columns with default letters count, set colHeadersoption to truein the table configuration. If a function is set, the index of the column is passed as a parameter. If table doesn't have scrolling, headers are fixed to the top of the page when scrolling the page. Otherwise headers are sticked to the top of table's container.

The following example demonstrates headersadded to the table rows. To add rows with default letters count, set rowHeadersoption to truein the table configuration. If a function is set, the index of the column is passed as a parameter. If table has horizontal scrolling, row headers column is sticked to the left of table's container.

The following example demonstrates rows and columns headers with custom text using colHeadersand rowHeadersoptions. Setting trueor falsewill enable or disable the default column headers (A, B, C). You can also define an array ['One', 'Two', 'Three', ...]or a function to define the headers. If a function is set the index of the column is passed as a parameter.

The following example demonstrates optional comments added to the specified cell using commentsoption. Setting this option to trueallows you to add and remove cell comments through the context menu. To initialize Handsontable with predefined comments, provide comment cell property: {row: 1, col: 1, comment: "Test comment"}. HTML content isn't supported at the moment.

This example demonstrates custom border options: range, sizes, width and color. If customBordersis set to true, enables Custom Borders plugin, which enables applying custom borders through the context menu (configurable with context menu key borders). To initialize Handsontable with predefined custom borders, provide cell coordinates and border styles in form of an array.