English
Deutsch
Українська
España
Русский
The following example demonstrates how to use the cell type renderer feature to make some conditional formatting: first row is read-only and formatted in green bold text; empty cells have grey background; negative numbers are written in red. First column has the same styling as first row, but cells are editable. All colors and other styles can be set in table configuration.
If you want to sort data in your datasource array, you can simply invoke an Array.prototype.sort() function and call render() function to refresh the table. You don't need any plugin for this. However, this operations alters the structure of the datasource, and in many cases you want to leave the datasource intact, while displaying its content in a specified order. Here's where column sorting plugin comes in handy.
The following example demonstrates optional pagination feature. Data arrays are divided into parts, it could be also virtual split - calculating start and stop of each page. Pagination feature uses standard Bootstrap pagination component which is connected to hash links. A small piece of jQuery code switches active class depending on the hash change.
The following example demonstrates how cell renderers can be used to present the template values for empty rows. When any cell in the empty row is edited, the onChange callback fills the row with the template values. It uses a set of arrays as a template, so empty cells text can be either empty or with any custom text.
The following example demonstrates an ability to highlight current column and row with specified background color, attached to active class. This can be achieved with simple usage of currentRowClassName and currentColClassName options added to the table configuration. Please note - you can add any class, default class name which has been implemented in CSS is .active.
The following example demonstrates integration of Handsontable with Bootstrap table styles using tableClassName option. This option specifies class name for all tables inside container element. In this example all tables include 3 additional classes: table-striped - striped rows; table-hover - highlight current hovered row.