---
title: Introduction
metaTitle: Introduction - Examples - Handsontable Documentation
permalink: /9.0/examples/
canonicalUrl: /examples/
tags:
    - faq
    - demo
    - how to
    - samples
    - support
---

# Examples

[[toc]]

Throughout this page you can find numerous code examples organized into various categories. All examples use JSFiddle as a code sandbox.

## Formatting

- [How to add a background color to a newly added row](https://jsfiddle.net/handsoncode/k17rydob)
- [How to attach an animation to a cell after a value is changed](https://jsfiddle.net/handsoncode/sj1L4vwk)
- [How to change the background and border of selected cells](https://jsfiddle.net/handsoncode/9dyk54qb)
- [How to attach icons to the dropdown cell type list of choices](https://jsfiddle.net/handsoncode/fLu5rx81)
- [How to change the coloring of selected cells via external button](https://jsfiddle.net/handsoncode/u8avd245)
- [How to replace the dropdown cell type arrow icon](https://jsfiddle.net/handsoncode/wn53c91s)
- [How to set up a vertical-oriented header for a column](https://jsfiddle.net/handsoncode/ejokx71y)
- [How to use HTML within column headers (icons example)](https://jsfiddle.net/handsoncode/0gfjkesd)
- [How to change the background of a row on mouseover event (hover action)](https://jsfiddle.net/handsoncode/9tmuoagq)
- [How to set a different background color for odd and even rows](https://jsfiddle.net/handsoncode/xw70fj3c)
- [How to change background color of parent rows while using nested rows](https://jsfiddle.net/handsoncode/jstdmn9e)

## Rendering

- [How to set up a bitcoin currency format to a numeric cell](https://jsfiddle.net/handsoncode/gv897y6o)
- [How to show a percentage formatting within a numeric cell](https://jsfiddle.net/handsoncode/1hzf8ntq)
- [How to show a permille formatting within a numeric cell](https://jsfiddle.net/handsoncode/tyde32rq)
- [How to add a button to a cell](https://jsfiddle.net/handsoncode/r1v0jtoa)
- [How to attach a Celsius degree symbol to a cell](https://jsfiddle.net/handsoncode/yv7L635m)
- [How to add a link (URL) to a cell](https://jsfiddle.net/handsoncode/4fd6so2a)

## Miscellaneous

- [How to add new column when data is defined as an object](https://jsfiddle.net/handsoncode/8x3bv51a)
- [How to automatically add comments to invalid cells](https://jsfiddle.net/handsoncode/8703d951)
- [How to entirely block column movement](https://jsfiddle.net/handsoncode/tkwv85cg)
- [How to block `setDataAtCell` while user edits a cell (introduction to collaboration)](https://jsfiddle.net/handsoncode/9fbqs14x) 
- [How to change the source of a dropdown cell type based on another chosen value (cell dependencies)](https://jsfiddle.net/handsoncode/fv1256n3)
- [How to change a font family via custom context menu option](https://jsfiddle.net/handsoncode/x4s5ke1j)
- [How to clear filtering conditions for all the columns at once](https://jsfiddle.net/handsoncode/a5jgrxy4)
- [How to create a custom context menu option and hide it for the first row](https://jsfiddle.net/handsoncode/k0verLo9) 
- [How to allow copying a cell with its background color (className)](https://jsfiddle.net/handsoncode/o2p5krj8)
- [How to allow copying a cell with a comment attached](https://jsfiddle.net/handsoncode/4tr0smzc/) 
- [How to allow copying table with corresponding column headers](https://jsfiddle.net/handsoncode/xb32d81s)
- [How to set up a custom cell editor with styling](https://jsfiddle.net/handsoncode/hngajvc6)
- [How to set up a regex-based numeric cell validator](https://jsfiddle.net/handsoncode/xwyojm1q)
- [How to add different cell types within one column](https://jsfiddle.net/handsoncode/stv62pqr)
- [How to add a non-self-executing label into dropdown menu](https://jsfiddle.net/handsoncode/ue9abc3w)
- [How to create a cell editor that accepts only digits (numbers)](https://jsfiddle.net/handsoncode/auL1ko5z)
- [How to remove filter option from a particular column's dropdown menu](https://jsfiddle.net/handsoncode/ahg0dofj) 
- [How to print in the console coordinates of all cells with comments](https://jsfiddle.net/handsoncode/ad9bf20y)
- [How to attach header tooltips with a different content than defined in the column title](https://jsfiddle.net/handsoncode/cqmbLnz4)
- [How to add and develop a hiding rows button/icon in a cell](https://jsfiddle.net/handsoncode/fk0dya6v) 
- [How to set up a key-value dropdown](https://jsfiddle.net/handsoncode/z861xeuy)
- [How to collapse parents while using nested rows](https://jsfiddle.net/handsoncode/uL4evmf3) 
- [How to parse data from a JSON to use it as a datasource](https://jsfiddle.net/handsoncode/4nakz01L) 
- [How to protect cells from changing values (readOnly mode)](https://jsfiddle.net/handsoncode/vax1ugw0)
- [How to round a number to `n` decimal places](https://jsfiddle.net/handsoncode/d2k7eqoz)
- [How to use a cell as a search input for a column](https://jsfiddle.net/handsoncode/0gjh4up9)
- [How to truncate cell value and show ellipsis](https://jsfiddle.net/handsoncode/7Lwb4ma8)
- [How to turn off the dropdown menu (filters window) for some of the columns](https://jsfiddle.net/handsoncode/fwma1t7L)
- [How to turn off sorting for some of the columns](https://jsfiddle.net/handsoncode/gsvy8m0f)
- [How to set up two tables with data corelation](https://jsfiddle.net/handsoncode/r60cu4td)