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 headers added to the table columns. To add columns with default letters count, set colHeaders option to true in 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 headers added to the table rows. To add rows with default letters count, set rowHeaders option to true in 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 colHeaders and rowHeaders options. Setting true or false will 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 comments option. Setting this option to true allows 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 customBorders is 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.