So let’s look how easy to build a minimal example using with handsontable…
The main web-page describes this library as:
Creating the minimal Handsontable page
First of all, click to download the source code for the minimal handsontable sample.
The first file to be created is the index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14
Nothing too complicated here. This is only a standard html page. The table will be rendered in the first called table div after the body.
In the header part, the css for handsontable is referenced and in the bottom part of the body, we referenced the script file needed for our table. I choose to include these files in the assets folder in the zip file, but it is possible to reference these files directly from handsontable.com as well by replacing the links like this:
For CSS use:
For the script:
The important part comes next in a separate script tag. We are going to get the data for the table and initialise how the table should look like.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
First, we create our data structure that we would like to display in our table.
Then, we get the placeholder div and call the init function of the Handsontable library. In the init function, we pass the placeholder div and some other parameters like our data and the names of our columns.
This is really it. Could not be simpler, right?
I would like to add the capability to be able to sort by column names. This is very easy, just pass two more parameters in the init function
Next, I would like to be able to resize the columns of my table. Again, this is very easy:
Handsontable seems like a very powerful library to build spreadsheet functionalities to your web application. It comes in two favours. The Pro version will cost you money, but has really nice features, such as column filtering. The free version is open-source and as far as I understand you can use it however you see fit.
This article will also server as a note for my future self, so here are the relevant links for this library:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43