Next Prev

TableKit

TableKit is a collection of HTML table enhancements using the Prototype framework. TableKit currently implements row striping, column sorting, column resizing and cell editing using Ajax.

Here is a quick way to run your own popurls style website

Play with this script by changing the html bellow. Submit your changes by clicking on this bar. Refresh the page to reset changes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<!-- 
/*
*
* Copyright (c) 2007 Andrew Tetlaw & Millstream Web Software
* http://www.millstream.com.au/view/code/tablekit/
* Version: 1.2.1 2007-03-11
* 
* Permission is hereby granted, free of charge, to any person
* obtaining a copy of this software and associated documentation
* files (the "Software"), to deal in the Software without
* restriction, including without limitation the rights to use, copy,
* modify, merge, publish, distribute, sublicense, and/or sell copies
* of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
* 
* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
* 
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
* MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS
* BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
* ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
* * 
*/
 -->
	<head>
<base href="http://www.ajaxdaddy.com/web20/prototype/tablekit/">
      <style type="text/css">
        body {color: white;background: #52616F;} 
        a {  color: white; }
      </style>
		<link rel="stylesheet" type="text/css" media="all" href="style.css" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>TableKit</title>	
  </head>
	<body>
		<div id="content">
			<h1>TableKit</h1>
			<p>TableKit is a collection of HTML table enhancements using the <a href="http://prototypejs.org" title="Prototype homepage">Prototype</a> framework. TableKit currently implements row striping, column sorting, column resizing and cell editing using Ajax.</p>
			<h2>Demo: Sortable/Resizable/Editable</h2>
			<p>Click the table header cells to sort the column, resize the column by dragging the right border of a header cell, click a cell in the table body to edit the value.</p>
			<table class="sortable resizable editable">
				<thead>
					<tr><th class="sortfirstdesc" id="urgency">Urgency</th><th id="creation-date">Date</th><th id="time">Time</th><th id="title">Title</th><th id="status">Status</th><th id="author">Requested By</th><th id="cost">Cost</th><th id="size">Size</th></tr>
				</thead>
				<tfoot>
					<tr><td>Urgency</td><td>Date</td><td>Time</td><td>Title</td><td>Status</td><td>Requested By</td><td>Cost</td><td>Size</td></tr>
				</tfoot>
				<tbody>
					<tr><td><div class="urg5">5</div></td><td>24/10/2005 10:47:41 AM</td><td>10:47:41 AM</td><td>Keyboard is Broken</td><td>In Progress</td><td>Tom</td><td>$200.00</td><td>30KB</td></tr>
					
					<tr><td><div class="urg3">3</div></td><td>06/07/2006xxx</td><td>03:04:34 PM</td><td>The ring came off my pudding can</td><td>Assigned</td><td>Tom</td><td>$200.50</td><td>30GB</td></tr>
					<tr><td><div class="urg2">2</div></td><td>06/07/2006</td><td>15:06:10</td><td>Should I open this email?</td><td>Assigned</td><td>Tom</td><td>$50.35</td><td>30TB</td></tr>
					<tr><td><div class="urg1">1</div></td><td>06/07/2006</td><td>04:12:16 PM</td><td>I can't print</td><td>Assigned</td><td>Bill</td><td>$2005.30</td><td>30KB</td></tr>
					<tr><td><div class="urg2">2</div></td><td>31/12/2006</td><td>09:35:47 AM</td><td>The internet is broken</td><td>Assigned</td><td>Jill</td><td>$600.00</td><td>32KB</td></tr>
					<tr><td><div class="urg3">3</div></td><td>17/07/2006</td><td>04:21:24 PM</td><td>Blank Screen</td><td>Assigned</td><td>Xavier</td><td>$100.30</td><td>10GB</td></tr>
					<tr><td><div class="urg4">4</div></td><td>26/07/2006</td><td>03:09:00 PM</td><td>My cup holder is not working</td><td>Closed</td><td>Mark</td><td>$100.40</td><td>20 MB</td></tr>
					<tr><td><div class="urg5">5</div></td><td>24/10/2005 10:47:41 AM</td><td>10:47:41 AM</td><td>Keyboard is Broken</td><td>In Progress</td><td>Tom</td><td>$200.00</td><td>30KB</td></tr>
				</tbody>
			</table>
		</div>
		<script type="text/javascript" src="scriptaculous/lib/prototype.js"></script>
		<script type="text/javascript" src="fabtabulous.js"></script>
		<script type="text/javascript" src="fastinit.js"></script>
		<script type="text/javascript" src="tablekit.js"></script>
	</body>
</html>

Play with this script by changing the html above. Submit your changes by clicking on this bar. Refresh the page to reset changes.

Comment on this example

Davec

2008-09-13 01:48:18

anyone been able to re-write the table using PHP and still hold onto the functionality????

Milos

2008-04-23 01:59:58

Very impressive stuff. I will tune this script with a little more php to get the data from a database. Thanks for sharing.

Robbile Joy

2007-11-05 22:38:44

yeah I agree

Jason

2007-09-25 04:05:40

This is an amazing little piece of code.

Welcome to AjaxDaddy.com

A large collection of nifty web 2.0 demos

TableKit

TableKit is a collection of HTML table enhancements using the Prototype framework. TableKit currently implements row striping, column sorting, column resizing and cell editing using Ajax.

Comment on this example