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 Features

Data validation, Drag down, Merged cells+
Data Validation
If you want to sort data in your data source array, you can simply invoke an Array.prototype.sort() function and call the render() function to refresh the table. You don't need any plugin for this. However, this operation alters the structure of the data source, and in many cases you want to leave the data source intact, while displaying its content in a specified order.Here's where column sorting plugin comes in handy. Column sorting plugin works as a proxy between the data source and the Handson table rendering module. It can map indices of displayed rows (called logical indices) to the indices of corresponding rows in data source (called physical indices) and vice versa. This way you can alter the order of rows which are being presented to user, without changing the data source internal structure.
Drag Down In All Directions
Notice the little square (fill handle) in the corner of the selected cell. You can drag it (drag-down) to repeat the values from the cell. Double click the fill handle in cell B4 (value "30") to fill the selection down to the last value in neighbouring column, just like it would in LibreOffice or google Docs.
Merged Cells
To enable the merge cells feature, set the mergeCells option to be true or an array. To initialize Handson table with predefined merged cells, provide merged cells details in form of an array: mergeCells: [{row: 1, col: 1, rowspan: 2, colspan: 2}]
Alignment
To initialize Handson table with predefined horizontal and vertical alignment, provide className cells details in form of a grid, columns or cell setting (see code sample below). Available classNames:
  1. Horizontal: htLeft, htCenter, htRight, htJustify,
  2. Vertical: htTop, htMiddle, htBottom.
  3. Alignment changes can be tracked using afterSetCellMeta hook callback.
Read-Only Columns
In many usage cases, you will need to configure a certain column to be read only. This column will be available for keyboard navigation and CTRL+C. Only editing and pasting data will be disabled. To make a column read-only, declare it in the columns setting. You can also define a special renderer function that will dim the read-only values.
Non-Editable Columns
In many cases you will need to configure a certain column to be non-editable. Doing it does not change it's basic behavior (apart from editing), which means you are still available to use keyboard navigation, CTRL+C and CTRL+V functionalities, drag-to-fill etc. To make a column non-editable, declare it in the columns setting. You can also define a special renderer function that will dim the editor value.