tableutils demo (version 1.1.2)
Try out the following demos. Use them seperately or club them together. Refer the Updated documentation for detailed information about usage and all the available options.
See the Change log for this version.
Read the FAQs for Tips and Tricks.
See the latest news about tableutils.
Track or report your issues.

- ### Fix the header

  First Name | Last Name | Dept | Age | Address
  --- | --- | --- | --- | ---
  Pratik | Kolge | IT | 23 | Pune, India
  Pratik | Kolge | IT | 23 | Pune, India
  Pratik | Kolge | IT | 23 | Pune, India
  Pratik | Kolge | IT | 23 | Pune, India
  Pratik | Kolge | IT | 23 | Pune, India
  Pratik | Kolge | IT | 23 | Pune, India
  Pratik | Kolge | IT | 23 | Pune, India
  Pratik | Kolge | IT | 23 | Pune, India
  Pratik | Kolge | IT | 23 | Pune, India
  Pratik | Kolge | IT | 23 | Pune, India

      	$('#fixMyHeader').tableutils( {
      		fixHeader: { width: 1000, height: 200 }
      	} );

- ### Sort your table's data

  First Name | Last Name | Concept | Rating | AKA
  --- | --- | --- | --- | ---
  Tony | Stark | Marvel | 42 | Iron Man
  Jack | Sparrow | Disney | 40 | Pirate
  Bruce | Banner | Marvel | 38 | The Hulk
  Clarke | Kent | DC | 35 | Man of Steel
  Bruce | Wayne | DC | 34 | The Dark Knight
  Sherlock | Holmes | Doyle | 37 | Ingenious
  Captain | America | Marvel | 39 | Captain America
  Peter | Parkar | Marvel | 43 | Spidy
  Sherlock | Holmes | Doyle | 37 | Ingenious

      	$('#sortMe').tableutils( {
      		fixHeader: { width: 1000, height: 200 },
      		sort: { type: [ 'alphanumeric', 'alphanumeric' , 'alphanumeric', 'numeric', 'alphanumeric'] },
      		columns: [
      			   { label: 'First Name' },
      	           { label: 'Last Name' },
      	           { label: 'Concept' },
      	           { label: 'Rating' },
      	           { label: 'AKA' }
      	       	]
      	} );

- ### Search through your table

  First Name | Last Name | Concept | Rating | AKA
  --- | --- | --- | --- | ---
  Tony | Stark | Marvel | 42 | Iron Man
  Jack | Sparrow | Disney | 40 | Pirate
  Bruce | Banner | Marvel | 38 | The Hulk
  Clarke | Kent | DC | 35 | Man of Steel
  Bruce | Wayne | DC | 34 | The Dark Knight
  Sherlock | Holmes | Doyle | 37 | Ingenious
  Captain | America | Marvel | 39 | Captain America
  Peter | Parkar | Marvel | 43 | Spidy

      	$('#searchMe').tableutils( {
      		fixHeader: { width: 1000, height: 200 },
      		filter: true,
      		columns: [
      			   { label: 'First Name' },
      	           { label: 'Last Name' },
      	           { label: 'Concept' },
      	           { label: 'Rating' },
      	           { label: 'AKA' }
              	]
      	} );

- ### Select records easily

  | First Name | Last Name | Concept | Rating | AKA
  --- | --- | --- | --- | --- | ---
  | Tony | Stark | Marvel | 42 | Iron Man
  | Sherlock | Holmes | Doyle | 37 | Ingenious
  | Captain | America | Marvel | 39 | Captain America
  | Peter | Parkar | Marvel | 43 | Spidy
  | Sherlock | Holmes | Doyle | 37 | Ingenious
  | Captain | America | Marvel | 39 | Captain America
  | Peter | Parkar | Marvel | 43 | Spidy
  | Tony | Stark | Marvel | 42 | Iron Man

      	$('#selectMyRecords').tableutils( {
      		fixHeader: { width: 1000, height: 200 },
      		masterCheckBox: { columnIndex: 1 },
      		rowSelect: { columnIndex: 1 },
      		columns: [
      		       { label: 'ID' },
      			   { label: 'First Name' },
      	           { label: 'Last Name' },
      	           { label: 'Concept' },
      	           { label: 'Rating' },
      	           { label: 'AKA' }
      	       	]
      	} );

- ### Split your data into pages; Paginate your table.

  First Name | Last Name | Concept | Rating | AKA
  --- | --- | --- | --- | ---
  Tony | Stark | Marvel | 42 | Iron Man
  Sherlock | Holmes | Doyle | 37 | Ingenious
  Captain | America | Marvel | 39 | Captain America
  Peter | Parkar | Marvel | 43 | Spidy
  Sherlock | Holmes | Doyle | 37 | Ingenious
  Captain | America | Marvel | 39 | Captain America
  Peter | Parkar | Marvel | 43 | Spidy
  Tony | Stark | Marvel | 42 | Iron Man
  Sherlock | Holmes | Doyle | 37 | Ingenious

      	$('#paginateMe').tableutils( {
      		fixHeader: { width: 1000, height: 200 },
      		paginate: { type: 'numeric', pageSize: 2 },
      		columns: [
      			   { label: 'First Name' },
      			   { label: 'Last Name' },
      			   { label: 'Concept' },
      			   { label: 'Rating' },
      			   { label: 'AKA' }
      			]
      	} );

You may have some questions, like:

- #### What if I want to use multiple features at once for a table ?

  Sure, you can use all of the features in a single table simultaneously. Refer the Documentation for the same.

- #### I don't like the colors and styling of these tables. What do I do about it ?

  Hmm, neither do I; but hey i have kept this nice and simple. All you have to do is go to the tableutils.css file and change the styling of the table as per your requirement. This ensures you get something that matches the look and feel of your application. Great, isn't it ?

- #### Where should I download the plugin from ?

  You can download the plugin from here

Reach me at:

- kolge.pratik@gmail.com, kolgepratik.wordpress.com