Josephin Doe
Generic placeholder image

I'm just looking around. Will you tell me something about yourself?

8:20 a.m.

I'm just looking around. Will you tell me something about yourself?

8:20 a.m.

Generic placeholder image

HandsonTable Cell Types

Support almost all kind of cell types
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
Cover
Professional JavaScript for Web DevelopersThis book provides a developer-level introduction along with more advanced and useful features of JavaScript.I would rate it ★★★★☆
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.
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 16001/14/2012
▼
$ 7,000.00
Citroen
▼
C4 Coupe12/01/2013
▼
$ 8,330.00
Audi
▼
A4 Avant11/19/2014
▼
$ 33,900.00
Opel
▼
Astra02/02/2015
▼
$ 7,000.00
BMW
▼
320i Coupe07/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 1602012
Citroen C4 Coupe2013
Audi A4 Avant2014
Opel Astra2015
BMW 320i Coupe2016
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
2014Nissan10
2015Honda20
2016Kia30
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.
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
▼
2013black
▼
black
▼
Nissan
▼
2014blue
▼
blue
▼
Chrysler
▼
2015yellow
▼
black
▼
Volvo
▼
2016white
▼
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
1ChrisRight*****************
2JohnHonest***
3GregWell******
ID
First name
Last name
Password

  • Guru able Customizer

    Live customizer with tons of options

  • Main layouts

  •       

  • Menu Type

  • SideBar Effect

  • Hide/Show Border

  • Drop-Down Icon

  • Sub Menu Drop-down Icon