Material Able bootstrap admin template by Codedthemes

Rendering Custom HTML In Cells

This example shows how to use custom cell renderers to display HTML content in a cell. This is a very powerful feature. Just remember to escape any HTML code that could be used for XSS attacks. In the below configuration.

Title	Description	Comments
Professional JavaScript for Web Developers	This book provides a developer-level introduction along with more advanced and useful features of JavaScript.	I would rate it ★★★★☆
JavaScript: The Good Parts	This book provides a developer-level introduction along with more advanced and useful features of JavaScript.	This is the book about JavaScript
JavaScript: The Definitive Guide	JavaScript: The Definitive Guide provides a thorough description of the core JavaScript language and both the legacy and standard DOMs implemented in web browsers.	I've never actually read it, but the comments are highly positive.

Title	Description	Comments	Cover

Numeric

By default, Handson table treats all cell values as string type. This is because "textarea" returns a string as its value. In many cases you will prefer cell values to be treated as number type. This allows to format numbers nicely and sort them correctly. To trigger the Numeric cell type, use the option type: 'numeric' in columns array or cells function. Make sure your cell values are numbers and not strings as Handson table will not parse strings to numbers. Numeric cell type uses Numbro.js as the formatting library. Head over to their website to learn about the formatting syntax. To use number formatting style valid for your language (i18n), load language definition to Numbro.js. See "Languages" section in Numbro.js docs for more info.

Car	Year	Price ($)	Price (€)
Mercedes A 160	2011	$7,000.00	7 000,00 €
Citroen C4 Coupe	2012	$8,330.00	8 330,00 €
Audi A4 Avant	2013	$33,900.00	33 900,00 €
Opel Astra	2014	$5,000.00	5 000,00 €
BMW 320i Coupe	2015	$30,500.00	30 500,00 €

Car	Year	Price ($)	Price (€)

Date

All data entered to the data-typed cells are validated against the default date format (DD/MM/YYYY), unless another format is provided. If you enable the correctFormat config item, the dates will be automatically formatted to match the desired format.

Car	Model	Registration date	Price
Mercedes ▼	A 160	01/14/2012 ▼	€ 7 000,00
Citroen ▼	C4 Coupe	12/01/2013 ▼	€ 8 330,00
Audi ▼	A4 Avant	11/19/2014 ▼	€ 33 900,00
Opel ▼	Astra	02/02/2015 ▼	€ 7 000,00
BMW ▼	320i Coupe	07/24/2016 ▼	€ 30 500,00

Car	Model	Registration date	Price

Checkbox True/False Values

This is default usage scenario when columns data have true or false value and we want to display ony checkboxes.

Car model	Year of manufacture	Available
Mercedes A 160	2012
Citroen C4 Coupe	2013
Audi A4 Avant	2014
Opel Astra	2015
BMW 320i Coupe	2016

Car model	Year of manufacture	Available

Select

Select editor should be considered an example how to write editors rather than used as a fully featured editor. It is a much simpler form of the Dropdown editor. It is suggested to use the latter in your projects.

A	B	C
2014	Nissan	10
2015	Honda	20
2016	Kia	30

A	B	C

Dropdown

This example shows the usage of the Dropdown feature. Dropdown is based on Autocomplete cell type. All options used by autocomplete cell type apply to dropdown as well.

Car	Year	Chassis color	Bumper color
Nissan	2012	black ▼	black ▼
Nissan	2013	blue ▼	blue ▼
Chrysler	2014	yellow ▼	black ▼
Volvo	2015	white ▼	gray ▼

Autocomplete Lazy Mode

This example shows the usage of the Autocomplete feature in the default lazy mode. In this mode, user can choose one of the suggested options while typing or enter a custom value that is not included in the suggestions. In this mode, the mouse and keyboard bindings are identical as in Handson table cell type. The options are rendered from the source property which can be an array, or a function that returns an array.

Car	Year	Chassis color	Bumper color
Nissan ▼	2013	black ▼	black ▼
Nissan ▼	2014	blue ▼	blue ▼
Chrysler ▼	2015	yellow ▼	black ▼
Volvo ▼	2016	white ▼	gray ▼

Car	Year	Chassis color	Bumper color

Password Cell Type

This kind of cell behaves like a text cell with a difference that it masks its value using asterisk in cell renderer. For the cell editor, a ' input type="password" ' field is used. Data is stored in the data source as plain text.

ID	First name	Last name	Password
1	Chris	Right	*****************
2	John	Honest	***
3	Greg	Well	******

ID	First name	Last name	Password

Notifications

John Doe

Joseph William

Sara Soudein

HandsonTable Cell Types