jQuery Powertable - jQuery and Zepto plugin to Move, Hide, Show, Fix table columns

Get Started

jQuery Powertable is a plugin to bring extra functionality to your html tables. With this plugin comes the options to move columns with html5 drag and drop, show or hide columns, fixed/sticky columns and rows, and persistant settings between page loads.

Back to Blog | Blog Post | Fork on Github

Donation

Try my new app to keep you informed of your car's financing status and value.

Has this Powertable been helpful to you?

Examples

Using List as a Controller

This example demonstrates using and independent list to control the table. Moving the list items can move table columns, and clicking the ± shows/hides the columns.

• Description
• Type
• Purchased
• Condition
• Model #
• Serial #
• Assigned To
• Lang

$pt = $('#listingsTable1').powertable({
	controller: '#tableController',
	moveDisabled: ['condition'],
	fixedColumns: ['description'],
	fixedRows: [0]
});

To attach the list items of the controller you must provide a data-ptcolumn="descrition" attribute to each list item AND the corresponding table master row (usually the first row, unless specified)

<table>
	<tr>
		<th data-ptcolumn="description">Description</th>
		<th data-ptcolumn="type">Type</th>
		<th data-ptcolumn="purchased">Purchased</th>
		<th data-ptcolumn="condition">Condition</th>
		<th data-ptcolumn="modelnum">Model #</th>
		<th data-ptcolumn="serialnum">Serial #</th>
		<th data-ptcolumn="assignedto">Assigned To</th>
		<th data-ptcolumn="lang">Language</th>
	</tr>
</table>

Using just the table

This example uses just the table. The first row

In this example the table header is the controller since none was specified. We also disabled moving and hiding the "description" column. Remember the data-ptcolumn attribute defines the name of the column.

$pt = $('#listingsTable2').powertable({
	fixedColumns: ['description'],
	fixedRows: [0],
	moveDisabled: ['description'],
	showHideDisabled: ['description']
});

CSS

You don't have to do a thing with these styles, but I'm sure you'll want to for a beautiful the end product.

/* pt specific styles: ptfixed, ptdragover, ptdraghandle, ptshowhide */
table tr th.ptfixed{ /* a fixed table header cell */ }

table tr td.ptfixed{ /* a fixed table cell */ }

table .ptdragover{ /* when drag and dropping the class given to show potential position */ }

table .ptdraghandle{ /* class given to the generated drag handle */ }

table .ptshowhide{ /* class given to a generated show/hide link */ }

Options

// this is the controller element selector, for instance a ul, with each li has data-ptcolumn="columnDataptcolumn"
// this element will control the table, if table columns are hidden, controller still has access
// if not provided this will default to the master row
controller: null,

// row index of the table with data-ptcolumn matching that of data-ptcolumn attributes in controller
masterRow: 0,

// allow user ordering of column indecies
allowMoving: true,

// an array of column names to not allow ordering
moveDisabled: [],

// the selector to a drag handles.  The scope is from the controller children that are draggable
// if no selector is supplied a handle will be created called .ptdraghandle
moveHandle: '',

// the text placed inside the link to move a column, only used when moveHandle=''
moveHandleText: '↔',

// where to inject the move handle (append or prepend) when moveHandle=''
moveHandleWhere: 'append',

// allow user show/hide of columns
allowShowHide: true,

// array of column names to not allow show/hide
showHideDisabled: [],

// this is the selector to choose the showhide button within controller to fire events
// if no selector is supplied a handle will be created called .ptshowhide
showHideHandle: '',

// the text placed inside the link to show/hide, only used when showHideHandle=''
showHideHandleText: '±',

// where to inject the show/hide handle (append or prepend) when showHideHandle=''
showHideHandleWhere: 'append',

// if we want persistant memory of this table after each page load
persistant: false,

// this is a string for the storage key.  It should be unique per table
storageKey: null,

// when persistant=true this method saves the order 
// parameter is an array of objects per column: [ { name:'ptcolumnval' visible:true },... ]
// save should be a function: function(columnOrder, inst){  }
save: null,

// when persistant=true this method restores the order.  This method should return similar object to 
// columnOrder in save function: [ { name:'ptcolumnval' visible:true },... ]
// restore should be a function: function(inst){  }
restore: null,

// this method can be called to clear any storage when a user calls $(..).powertable('clearStorage')
clearStorage: null,

// scrolling jquery parent element, when using fixed columns and rows they will be relative 
// to this element's scroll event
scrollingParent: null,

// array of column names to be fixed
fixedColumns: [],

// array of row indecies to be fixed
fixedRows: [],

// events, "before" events can use e.preventDefault() to stop move/hide/show/etc..
beforeShowColumn: function(e, index){},
afterShowColumn: function(e, index){},
beforeHideColumn: function(e, index){},
afterHideColumn: function(e, index){},
beforeMoveColumn: function(e, fromIndex, toIndex){},
afterMoveColumn: function(e, fromIndex, toIndex){}

Events

All the events above may also be attached using the bind/on method with the "powertable" namespace.

$el.on('powertable:beforeShowColumn', function(e, index){
	// code for this event
});

Methods

// Set defaults for all powertable instances
$.powertable.setDefaults({});

// Initialize a powertable instance
$el.powertable({});

// Enable a powertable instance
$el.powertable('enable');

// Disable a powertable instance
$el.powertable('disable');

// Destroy a powertable instance
$el.powertable('destroy');

// Set an option (will not reset many base options)
$el.powertable('option', 'key', 'value');

// Save the column order.  If settings.save function is supplied it will be called 
// otherwise we use window.sessionStorage
$el.powertable('save', columnOrderObj);

// Restore column order.  If settings.restore function is supplied it will be called 
// otherwise we use window.sessionStorage
$el.powertable('restore');

// Clear the storage.  If settings.clearStorage function is supplied it will be called 
// otherwise we use window.sessionStorage
$el.powertable('clearStorage');

// Rebuild the table to the given columnOrder specs.
$el.powertable('rebuild', columnOrderObj);

// Get the columnOrderObj. noCache (true/false) will force it to create the order and 
// not use the last generated
$el.powertable('getOrder'[, noCache]); 

// Get the index of a column with the given description.  This refers to the column's
// data-ptcolumn="" attribute.
$el.powertable('getIndex', 'description');

// Move a column from index to an index.  If moveController (true/false) is given the 
// controller column will also be moved.  Useful when using an external controller.
// Index options may be the numeric index or the column description.
$el.powertable('moveColumn', fromIndex, toIndex, moveController);

// Show a column.  The index option may be the numeric index or the column description.
$el.powertable('showColumn', index);

// Hide a column.  The index option may be the numeric index or the column description.
$el.powertable('hideColumn', index);

// Fix a column.  The index option may be the numeric index or the column description.
$el.powertable('fixedColumn', index);

// Release a fixed a column.  The index option may be the numeric index or the column description.
$el.powertable('releaseColumn', index);

// Fix a row.  The index option may be the numeric index or the column description.
$el.powertable('fixedRow', index);

// Release a fixed row.  The index option may be the numeric index or the column description.
$el.powertable('releaseRow', index);

License

You may use this project under MIT or GPL licenses.

GPL License

MIT License