HandsonTable Appearance

Conditional formatting

This demo shows how to use the cell type renderer feature to make some conditional formatting:

  1. First row is read-only, and formatted in green bold text
  2. All cells in the Nissan column are written in italic
  3. Empty cells have silver background
  4. Negative numbers are written in red

Customizing borders

To enable the custom borders feature, set the customBorders option. It could be set as true or initialized as an array with predefined setup.

To initialize Handson table with predefined custom borders, provide cells coordinates and border styles in form of an array:

with row/col pairs: {row: 2, col: 2, left: { /*...*/ }} or with range details: {range: {from: {row: 1, col: 1}, to:{row: 3, col: 4}}, left: { /*...*/ }}

Highlighting selection

Use options currentRowClassName and currentColumnClassName

Mobiles and tablets

Currently Handson table supports only iPad 4 in a basic scope. Mobile editor and selecting modes are enabled automatically if you're viewing Handson table on a mobile device.

Open this page on iPad 4 and play with the demo below:

Theme Customizer


Customize & Preview in Real Time

Menu Color Options

Layout Options

Navigation Color Options
Solid
Gradient

Solid

Gradient

Buy Now