This page covers a non-latest version of Handsontable.
# Handsontable examples
Table of contents
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 (opens new window)
- How to attach an animation to a cell after a value is changed (opens new window)
- How to change the background and border of selected cells (opens new window)
- How to attach icons to the dropdown cell type list of choices (opens new window)
- How to change the coloring of selected cells via external button (opens new window)
- How to replace the dropdown cell type arrow icon (opens new window)
- How to set up a vertical-oriented header for a column (opens new window)
- How to use HTML within column headers (icons example) (opens new window)
- How to change the background of a row on mouseover event (hover action) (opens new window)
- How to set a different background color for odd and even rows (opens new window)
- How to change background color of parent rows while using nested rows (opens new window)
# Rendering
- How to set up a bitcoin currency format to a numeric cell (opens new window)
- How to show a percentage formatting within a numeric cell (opens new window)
- How to show a permille formatting within a numeric cell (opens new window)
- How to add a button to a cell (opens new window)
- How to attach a Celsius degree symbol to a cell (opens new window)
- How to add a link (URL) to a cell (opens new window)
# Miscellaneous
- How to add new column when data is defined as an object (opens new window)
- How to automatically add comments to invalid cells (opens new window)
- How to entirely block column movement (opens new window)
- How to block
setDataAtCellwhile user edits a cell (introduction to collaboration) (opens new window) - How to change the source of a dropdown cell type based on another chosen value (cell dependencies) (opens new window)
- How to change a font family via custom context menu option (opens new window)
- How to clear filtering conditions for all the columns at once (opens new window)
- How to create a custom context menu option and hide it for the first row (opens new window)
- How to allow copying a cell with its background color (className) (opens new window)
- How to allow copying a cell with a comment attached (opens new window)
- How to allow copying table with corresponding column headers (opens new window)
- How to set up a custom cell editor with styling (opens new window)
- How to set up a regex-based numeric cell validator (opens new window)
- How to add different cell types within one column (opens new window)
- How to add a non-self-executing label into dropdown menu (opens new window)
- How to create a cell editor that accepts only digits (numbers) (opens new window)
- How to remove filter option from a particular column's dropdown menu (opens new window)
- How to print in the console coordinates of all cells with comments (opens new window)
- How to attach header tooltips with a different content than defined in the column title (opens new window)
- How to add and develop a hiding rows button/icon in a cell (opens new window)
- How to set up a key-value dropdown (opens new window)
- How to collapse parents while using nested rows (opens new window)
- How to parse data from a JSON to use it as a datasource (opens new window)
- How to protect cells from changing values (readOnly mode) (opens new window)
- How to round a number to
ndecimal places (opens new window) - How to use a cell as a search input for a column (opens new window)
- How to truncate cell value and show ellipsis (opens new window)
- How to turn off the dropdown menu (filters window) for some of the columns (opens new window)
- How to turn off sorting for some of the columns (opens new window)
- How to set up two tables with data corelation (opens new window)