Product Delivery
Targeted Sales
Collicitudin vel metus scelerisque ante commodo.
In Progress25% Completed
Pcelerisque ulla vel metus ante sollicitudin commodo.
Open 22 January, 16
Tuaiulla vel metus scelerisque ante sollicitudin commodo.
On hold 24 January, 16
context menu, custom buttons & comments
HandsonTable also provides utilities like context menu, custom buttons & comments.
To run the basic configuration of the Context Menu, just set the contextMenu option to true.
From version 0.11, context menu also works for row and column headers. When the context menu for the row header is opened, the column options are disabled. Likewise, when the context menu for the column header is opened, the row options are disabled
For greatest configurability, you use contextMenu option as a configuration object as described in jQuery contextMenu documentation.
This example shows how to set custom text, how to disable "Remove row" and "Insert row above" for the first row and how to add your own option.
Copy and Paste feature are available in Handson table by default, but only as key shortcuts (Ctrl (Cmd) + C and Ctrl (Cmd) + V respectively).
This plugin makes them available also as a clickable options in the context menu. Unfortunately, due to the browser's security restrictions, Handson table is forced to use a third-party flash-based library. We chose to use ZeroClipboard - it adds a small invisible flash clip to your website, allowing the user to click on it, and thus save data to the clipboard.
The alter method can be used if you want to insert or remove rows and columns using external buttons. The below example uses the a custom made handson table.removeRow.js plugin for that matter. Move your mouse over a row to see it.
You can programmatically select a cell using the selectCell method. The below button implements it.
Comments
With option comments: true, you can add and remove cell comments through the context menu. To initialize Handson table with predefined comments, provide comment cell property: {row: 1, col: 1, comment: "Test comment"}