The static era is gone now. Today we expect everything to be dynamic. When it is the matter of displaying a statistical data on a webpage, we no more simply adhere to the traditional style of td and tr. To make the data more meaningful we try to make it more interactive. For example, if you have a table with about 200 rows and having some weird data, can you imagine how dumb the data looks when you simply display it in a webpage. Lets go into this topic to make the data dynamic.
Features
In a layman term dynamic means, when you try to deal with somebody or something you will get a response in return. To make a table dynamic you may expect the following:
- Sorting capability
The columns in a table can be sorted in ascending/descending order. - Filtering out of data
The data can be filtered out and less number of rows will be displayed according to our requirement. - Summarizing the data
We can summarize a big data with the help of pivot table to make it more meaningful. - Grouping of data
We can aggregate values across a table with the help of group by clause to return only unique combination of values.
Live Example
You can see this Wikipedia article to visualize how it manages to display country wise population in an interactive table. Imagine how such data would look without being interactive.
Now I am presenting a small example with only 10 lines of data.
How it works ?
Although there are dozens of JavaScript plugin available for interactive tables, but nothing can be more simpler then this. It is extremely light weight and takes no time to load. It also supports SQL queries so you can fetch a wide variety of data according to your requirement. Moreover the data will come from Google server so you don't have to worry about performance. If you can achieve such a beautiful task with a less effort then why unnecessarily you will import 3rd party plugins to achieve the same.
One more thing I would like to drag to your attention is, unlike others here the data is completely dynamic. The table does not lie in the web page physically. It is fetched from the Google server at run time, so you don't need to manually build the table in HTML. When you need to add some extra rows, simply go to the spreadsheet add them. Keep it simple silly 🙂
Greetings,
I am a non programmer. How to use your code for different google spreadsheets by picking up the first row as a header for each field. curreently I use Awesome Tables https://sites.google.com/site/scriptsexamples/available-web-apps/awesome-tables to get the desired results.
Regards,