SGTable

Human Computer Interaction field reveals that a user focuses on the top left part of a page excluding the left side bar most of the time. Keeping this fact in mind, it doesn’t make sense to display a huge data set on a web page. When there are multiple data files we should also find a way to minimize the latency for opening another view for the data set. Displaying all files with all columns and rows is not an elegant option in the most cases.

The quickest solution was having a look at the present implementations for data tables. There were some promising ones with some significant design problems. So I decided to keep things really simple with my own implementation.

Here is a demo of SGTable:



How do we use it?
Go ahead and clone the project.

  • Add the jQuery and jEditable as shown in lines 1-2.
  • Add the script SGTable.js and style sheet SGTable.css as shown in lines 3-4.
  • Create a div to hold the table window as shown in line 5.

  • Initialize the SGTable object as shown in line 6.
  • Create a data object with key “content”. Value of this key points to an array of arrays each representing a row.
  • Feed table data into SGTable instance as shown in line 18.
  • That’s it! You can see the screenshot of a page using SGTable below:
    sgTable

    SGTable is implemented to view the data. Data manipulation options are up to you…