tTable.js - work with tables like a boss
Sep 08, 2013     18:05:47

tTable.js actually begins as a simple FedEx Day project. But from the first lines of code I understand that this will be my next opensource project.

For now it's not ready even for 10%. For now it's only a little bit coded idea.

A little story

Everything starts with Google Visualization Tables. Few years ago one of my colleague decided that this is the best solution for tables in our web service. At that time maybe that was really great solution, but not now...

Work with google tables

Google visualization script is very powerfull. But actually not very easy customizable. Its good for outputing data and looking on it, but not for interacting with it.

Long time ago even navigation was just two arrows - next and back. No pagination or something like that.

And what about AJAX data? Nothing...

FedEX Day:

So on the last FedEX Day in our awesome MacPaw I decided to try (just try) to create my own plugin with basic features of displaying, pagination and sorting in one day.

As a tecknologies for that I decided to use jQuery and Lo-Dash. jQuery you definitely know why. Lo-Dash mostly for templating and a little for working with arrays of table data.

And in one day I create a small demo off already implemented features - tTable.js.

Usage and configuration:

At first - include all needed dependencies:

<script src="js/libs/jquery.min.js"></script>
<script src="js/libs/lodash.min.js"></script>
<script src="tTable.js"></script>

Than use in your scripts:

    var your_table = tTable({
        // define titles
        "titles"     : [
				"title": "Project",
				"type" : "string"
				"title": "Link",
				"type" : "string"
				"title": "Type",
				"type" : "string"
		"page_size"  : 2, // define rows per page
		"start_page" : 2, // sets start page, by default = 1
		"row_numbers": true, // add row numbers
		"sort_by"    : 1, // sort column
        // here is the main table data
		"data"       : [
			["DevMate", "<a href=''>DevMate</a>", "work" ],
			["MacPaw", "<a href=''>MacPaw</a>", "work"],
			["Ensoul.Me", "<a href=''></a>", "work"],
			["", "<a href=''></a>", "personal"],
			["Imageless iPhone", "<a href=''>Imageless iPhone</a>", "personal"],
			["Imageless Lumia", "<a href=''>Imageless Lumia</a>", "personal"],
			["_v_.js", "<a href=''>_v_.js</a>", "git"],
			["tFormer.js", "<a href=''>tFormer.js</a>", "git"],
			["tTable.js", "<a href=''>tTable.js</a>", "git"],
			["aer.js", "<a href=''>aer.js</a>", "git"],
			["Imageless iPhone", "<a href=''>iPhone.js</a>", "git"],
			["Imageless Lumia", "<a href=''>Lumia.js</a>", "git"],
			["_v_.js", "<a href=''>_v_.js</a>", "opensource"],
			["tFormer.js", "<a href=''>tFormer.js</a>", "opensource"]
		"container"  : "#table_id", // table should be added to this container
		"pager"      : "#table_id_pager"  // table pagination should be added to this container

Allready implemented features:

  • row numbers;
  • pagination;
  • navigation arrows;
  • `goto` page;
  • page size customization;
  • column sorting;
  • count totals;

List of requested features that will be implemented:

  • column filters;
  • column metrics;
  • data output formaters;
  • receiving pages data with AJAX for each page;
  • infinit scroll (also with AJAX);
  • events;
  • search;
  • row and column hover effect (highlignt);
  • paging template customization;
  • table hidden data (or hidden rows);
  • data prefixes and sufixes;

Feature request are pleased in any way: twitter, email, github issues request, skype, etc. :)

Whats next?

For now I'll try to implement all the requested features and make the script usable for others.

If you have some ideas - lets discuss them ;)

Demo and sources:

blog comments powered by Disqus