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 Utilities

context menu, custom buttons & comments
Context Menu With Default Options
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
 
A
B
C
D
E
F
G
1
KiaNissanToyotaHondaMazdaFord
2
2012101112131516
3
2013101112131516
4
2014101112131516
5
2015101112131516
6
2016101112131516
 
A
B
C
D
E
F
G
 
1
2
3
4
5
6
 
Context Menu With Fully Custom Configuration
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.
 
A
B
C
D
E
F
G
1
KiaNissanToyotaHondaMazdaFord
2
2012101112131516
3
2013101112131516
4
2014101112131516
5
2015101112131516
6
2016101112131516
 
A
B
C
D
E
F
G
 
1
2
3
4
5
6
 
Copy-Paste Configuration
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.
 
A
B
C
D
E
F
G
1
KiaNissanToyotaHondaMazdaFord
2
2012101112131516
3
2013101112131516
4
2014101112131516
5
2015101112131516
6
2016101112131516
 
A
B
C
D
E
F
G
 
1
2
3
4
5
6
 
Custom Buttons
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.
 
 
A
B
C
D
E
F
G
x
1
KiaNissanToyotaHondaMazdaFord
x
2
2012101112131516
x
3
2013101112131516
x
4
2014101112131516
x
5
2015101112131516
x
6
2016101112131516
 
 
A
B
C
D
E
F
G
 
 
x
1
x
2
x
3
x
4
x
5
x
6
 
 
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"}
 
A
B
C
D
E
F
G
1
KiaNissanToyotaHondaMazdaFord
2
2012101112131516
3
2013101112131516
4
2014101112131516
5
2015101112131516
6
2016101112131516
 
A
B
C
D
E
F
G
 
1
2
3
4
5
6
 

  • Mash Able CUSTOMIZER

  • Page Layout

  • Navbar Placement

  • SideBar Effect

  • Border Style

  • DropDown Icon

  • Submenu Item Icon