Magic Table

Magic Table is a jQuery UI widget that converts normal HTML tables into interactive tables that can be filtered or sorted. That's pretty much all there is to it.

I also tried to make it so that you can easily modify how it looks using its CSS file. Originally, I intended the rows to be able to be converted into different things - that's why I used jsRender and pull in the rows template through $.get.

Why'd I make it?

Practice. I wanted to practice making a jQuery UI widget, and this was what I made. I was looking at Data Tables and couldn't find a way for it to have individual filters for each column, so I thought I'd give it a shot and make a widget for it. It turned out pretty nice, and does almost everything I originally intended for it to do.


Well, clearly, jQuery and jQuery UI are two major dependencies since it's a jQuery UI widget. It also relies on jsRender for the template rendering on the rows of the table.


One major downside to Magic Table is that it cannot be tested without a server. This happens because of how I used jsRender and used jQuery to pull in the rows file dynamically. The browser will not let you pull in files locally. It wouldn't actually take much effort to fix this, though.

Live Demo

Number Name Phone Number
1 Asher 555-416-7378
2 Rigel 555-329-5614
3 Cade 555-802-0884
4 Blaze 555-864-4925
5 Geoffrey 555-411-7995
6 Clinton 555-347-9620
7 Hu 555-335-1203
8 Barclay 555-675-6910
9 Declan 555-419-2154
10 Giacomo 555-123-6531

Fork me on Github!

Fork me on Github! I've made the source for Magic Table available on Github. If Magic Table interests you, feel free to play with it. Have improvements? Make a pull request!

comments powered by Disqus