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.
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.
Checkbox True/False Values
This is default usage scenario when columns data have true
or false value and we want to display ony checkboxes.
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.
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.
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.