jQuery Rolling Table

Download

As part of a project written in Grails to analyse the SMS messages which came into the BBC Radio studio, I put together a user interface in Javascript that showed various statistics about the incoming messages. To show the actual content of the messages, I wrote this little widget which shows a rolling table of messages.

Here's a quick demo of it:

To use it, you first need to include a few other javascript libraries. In particular, you require jQuery and the jQuery widget factory.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/RollingTableWidget-1.0.js"></script>

To create the basic widget, create an element in the page and then apply the rolling table widget to it, just as you would with any jQuery widget:

<div id="table"></div>
<script type="text/javascript">
	$('#table').rollingtable();
</script>

The widget has a method addItem which immediately adds a single item into the table. This method expects an array with the same number of elements as columns. If there are less then only as many columns as there are elements will be filled. The element values may be strings or jQuery objects. Both are inserted as is.

So, in the basic case, building a string table is like this:

$('#table').rollingtable({
	columns: ["First Name", "Family Name", "Born", "Birthplace"],
	maxRowCount: 3
});

$('#table').rollingtable( 'addItem', ["John","Prescott", 1938, "Prestatyn" ] );

By default, items are added to the table at the top and the other items all shift down one with the oldest being removed. This can be swapped around so that items are added to the bottom instead by setting the addFromTop option to false.

The text is automatically styled by the widget. It fades the text from the start to the end of the table based on the two options textColourTop and textColourBottom. The top and bottom refer to the geographical position of the elements, so are not related to the age of the element; that is, the styling is consistent whichever way up the table is being drawn.

$('#table').rollingtable({
	columns: ["First Name", "Family Name", "Born", "Birthplace"],
	maxRowCount: 4,
	addFromTop: false,
	textColourTop: "#F00",
	textColourBottom: "#FF0"
});

Also, rows are alternately styled in .rollingtablerow_a and .rollingtablerow_b so that you can style alternate rows. The classes move with the rows which helps to identify the movement direction.

The code is released under the MIT license, which basically means you can do whatever you like except pretend it's yours.

Comments