Ask us a question!

Web Moves Blog

Web Moves News and Information


dynoTable – A JQuery Plugin by Bob Tantlinger

jQuery Logo - Write Less Do More

dynoTable: A JQuery plugin for creating editable tables

A while back I was working on a project that required the GUI to allow the user to dynamically add, remove and rearrange various form fields contained in table rows. The tricky part was that the UI needed to have this functionality for several different types of elements across several different forms. For instance, one set of fields was for adding and removing specifications to a product while another set of fields was for adding images to a product. Thus, I needed a solution that would be flexible enough to work across virtually any type of form elements.

Naturally, I turned to JQuery. I first took a look around within JQuery’s plugin ecosystem to see if perhaps there was already a plugin that might do the job. While I did find a few different plugins for adding removing form elements, none of them did exactly what I needed, specifically re-arranging items… So, I was left with either trying to hack the functionality into an existing plugin, or roll up my sleeves and write my own. I choose the later option, since JQuery’s excellent extension mechanism makes writing plugins a fairly straightforward process. The result is the plugin below, which I call dynoTable.

What the plugin does

DynoTable makes an html table editable. With it you can:

  • Add rows
  • Remove rows
  • Clone rows
  • Click and Drag to Re-arrange rows (If you have Jquery UI included on your page)

Getting started with dynoTable is a snap. First make sure you have JQuery, and the dynoTable plugin, included in your page like so:

Next, once the dom has loaded, simply instantiate dynoTable like so:

Given an html table similar to the one below, you will have the ability to add rows, clone rows, remove rows, and rearrange rows (rearranging works only if you have included JQuery UI)

Looking at the table above, you’ll notice a few classes:

  • row-cloner – clones the row when clicked
  • row-remover – removed the row when clicked
  • drag-handle – click and drag to rearrange row

And ids:

  • add-row – when clicked adds a row to the table
  • add-template – the table row template used when add-row is clicked.
    This row is NOT visible, it is only used as a template for rows that are added.

These specify what the user can click on to interact with the table. The result of which is below:

Note: You can change these class-names to anything you want by passing in them as properties to dynoTable. See available properties.

Example (Click Add Row to add a table row)

Configuring dynoTable

The dynoTable defaults will probably handle most use cases. If you do not require any of the functionality it provides, you can simply omit the classes from your table. However, dynoTable also provides a number of properties and callback functions to configure it further if needed.

To pass configuration options and callback functions to dynoTable, you simply pass them in as an object, when instantiating the plugin. For example:

Callbacks: Extending dynoTable

In addition to the configuration options, you can pass in your own behaviors as call back functions, as shown above. The available callbacks are:

  • onRowRemove – Called when a row is removed
  • onRowClone – Called when a row is cloned
  • onRowAdd – Called when a new row is added
  • onTableEmpty – Called when ALL rows have been removed
  • onRowReorder – Called when rows have been rearranged by the user

The example below shows an example of how dynoTable might be used in conjuntion with callback functions. When you add, clone, or rearrange the beers in the table, their numbers update automagically.

Example Code

Example of Custom Configuration of dynoTable

Source Code

Below is the full source code of the dynoTable plugin for those who might find it useful. I am placing this code in the public domain and you may do with it as you wish. You can also download the javascript file here.