jQuery Plugin For Manipulating Tabulated Data - Zentable

File Size: 67.6KB
Views Total: 3098
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin For Manipulating Tabulated Data - Zentable

Zentable is a powerful jQuery tabulated data manipulation plugin for creating an editable, sortable, filterable and draggable table that can be used with or without AJAX.


  • Data loaded on demand using AJAX, or embedded in the page.
  • Mouse wheel and keyboard can be also used for scrolling.
  • Column resizing, auto resizing and table resizing
  • Orderable and filtrable by columns.
  • Tooltips
  • Editable
  • Supports HTML as content
  • Themeable by CSS. Supports different styles for rows and columns.

How to use it:

1. Include jQuery javascript library and jQuery Zentable plugin on the page

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/jquery.zentable.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/zentable.css">

2. Include required jQuery UI, jQuery mousewheel and jQuery timer on the pate

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script> 
<script type="text/javascript" src="js/jquery.timers-1.1.2.js"></script> 

3. Create a container for the Tabulated Data

<div id="table" class="zentable"></div>

4. Call the plugin with options

<script type="text/javascript">
$(document).ready(function() {
cols: [], // An array containing columns.
data: [], // When this option contains an array of rows, being each row an array of columns, the data shown in the table is got from here.
hideIfEmpty: true, // Hide completely the table if it is empty. It is true by default. 
filters: [], // An array of strings containing the names of the columns that can be filtered.
onclick: function(), // A function that is invoked when a click is done on a cell. 
onedit: function() { alert('edited'); },
order: , // Which field is used for ordering. Only works when table is AJAXed. 
rows: 6, // Maximum number of visible rows (by default 10).
stylesInRows: true, // If true, rows can have class. 
totalsRow: true, // If true, a row for showing totals is added at the end of the table.


This awesome jQuery plugin is developed by kurtie. For more Advanced Usages, please check the demo page or visit the official website.