Ask us a question!

Web Moves Blog

Web Moves News and Information

15
May
2012

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.