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 boldtext; empty cells have greybackground; 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 paginationcomponent which is connected to hash links. A small piece of jQuery code switches activeclass depending on the hash change.

• 1
• 2
• 3
• 4
• 5

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 onChangecallback 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 activeclass. This can be achieved with simple usage of currentRowClassNameand currentColClassNameoptions added to the table configuration. Please note - you can add any class, default class name which has been implemented in CSS is .active.