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:
Horizontal: htLeft, htCenter, htRight, htJustify,
Vertical: htTop, htMiddle, htBottom.
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.