Dable

Dable (pronounced 'dabble') is a simple javascript table control with filtering, sorting, paging, styles, and more!

Dable is simple and elegant. It has zero dependencies and works in IE8+.
Here are some examples of how you can use it.

A simple, no-styles, default Dable:

See it Alone

<!DOCTYPE html>
<html>
<head>
<script src="Dable.js"></script>
</head>
<body>
<div id="DefaultDable"></div>
<script type="text/javascript">
	var dable = new Dable();
	var data = [ [ 1, 2 ], [ 3, 4 ] ];
	var columns = [ 'Odd', 'Even' ];
	dable.SetDataAsRows(data);
	dable.SetColumnNames(columns);
	dable.BuildAll("DefaultDable");
</script>
</body>
</html>

A Dable built from an existing HTML table:

Odd	Even
1	2
3	4

See it Alone

<!DOCTYPE html>
<html>
<head>
<script src="Dable.js"></script>
</head>
<body>
<div id="TableDable">
  <table>
    <thead>
      <tr>
        <th>Odd</th>
        <th>Even</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>4</td>
      </tr>
    </tbody>
  </table>
</div>
<script type="text/javascript">
	var dable = new Dable("TableDable");
</script>
</body>
</html>

Dable with Bootstrap styling:

See it Alone

<!DOCTYPE html>
<html>
<head>
<script src="Dable.js"></script>
<!--Include the Bootstrap CDN-->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="BootstrapDable"></div>
<script type="text/javascript">
	var dable = new Dable();
	var data = [ [ 1, 2 ], [ 3, 4 ] ];
	var columns = [ 'Odd', 'Even' ];
	dable.SetDataAsRows(data);
	dable.SetColumnNames(columns);
	dable.style = 'bootstrap';	//set the style
	dable.BuildAll("BootstrapDable");
</script>
</body>
</html>

Dable with JQueryUI styling:

See it Alone

<!DOCTYPE html>
<html>
<head>
<script src="Dable.js"></script>
<!--Include the JQueryUI CDN-->
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
</head>
<body>
<div id="JQueryUIDable"></div>
<script type="text/javascript">
	var dable = new Dable();
	var data = [ [ 1, 2 ], [ 3, 4 ] ];
	var columns = [ 'Odd', 'Even' ];
	dable.SetDataAsRows(data);
	dable.SetColumnNames(columns);
	dable.style = 'jquerui';	//set the style
	dable.BuildAll("JQueryUIDable");
</script>
</body>
</html>

A Dable with alternating styles:

Dable builds cleanly each time, so we can rebuild the table with new styles anytime we want

Odd	Even
1	2
3	4

See it Alone

<!DOCTYPE html>
<html>
<head>
<script src="Dable.js"></script>
<!--Include the JQueryUI CDN-->
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
<!--Include the Bootstrap CDN-->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="AlternatingDable">
  <table>
    <thead>
      <tr>
        <th>Odd</th>
        <th>Even</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>4</td>
      </tr>
    </tbody>
  </table>
</div>
<script type="text/javascript">
	var dable = new Dable("AlternatingDable");
	setInterval(function () {
		if (dable.style == "jqueryui") {
			dable.style = "bootstrap";
		}
		else if (!dable.style == "bootstrap") {
			dable.style = "clear";
		}
		else if (!dable.style == "clear") {
			dable.style = "";
		}
		else {
			dable.style = "jqueryui";
		}
		dable.UpdateStyle(document.getElementById("AlternatingDable"));
	}, 3000);
</script>
</body>
</html>

Different Dable Sorting Features

Dable automatically sorts text, numbers, and simple US Dates, but if you need it to sort something else, you only need to add a custom sort function.

See it Alone

<!DOCTYPE html>
<html>
<head>
<script src="../js/Dable.js"></script>
<!--Include the Bootstrap CDN-->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="SortingDable"></div>
<script type="text/javascript">
	var dable = new Dable();
	var data = [
		[ 1, '12/1/12', 'Armadillo', 'First' ],
		[ 2, '12/2/2012', 'Cat', 'Fourth' ],
		[ 3, '1/1/2001', 'Porcupine', 'Second' ],
		[ 4, '2/22/02', 'Bat', 'Third' ] ];
	var columns = [ 'Numbers', 'Dates', 'Text', 'Custom' ];
	dable.SetDataAsRows(data);
	dable.SetColumnNames(columns);
	dable.columnData[3].CustomSortFunc = function(columnIndex, ascending, currentRowObjects) {
		var order = [ 'First', 'Second', 'Third', 'Fourth' ];
		currentRowObjects.sort(function(a, b) {
			var valueA = a.Row[columnIndex];
			var valueB = b.Row[columnIndex];
			return order.indexOf(valueA) - order.indexOf(valueB);
		});
		
		if (!ascending) {
			currentRowObjects.reverse();
		}
		
		return currentRowObjects
	};
	dable.style = 'bootstrap';
	dable.BuildAll("SortingDable");
</script>
</body>
</html>

Dable with Paging Features:

See it Alone

<!DOCTYPE html>
<html>
<head>
<script src="Dable.js"></script>
<!--Include the JQueryUI CDN-->
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
</head>
<body>
<div id="PagingDable"></div>
<script type="text/javascript">
	var dable = new Dable();
	var data = [
		[ 1, 2 ], [ 3, 4 ], [5, 6], [7, 8], [9, 10],
		[ 11, 12 ], [ 13, 14 ], [15, 16], [17, 18], [19, 20],
		[ 1, 2 ], [ 3, 4 ], [5, 6], [7, 8], [9, 10],
		[ 11, 12 ], [ 13, 14 ], [15, 16], [17, 18], [19, 20]
	];
	var columns = [ 'Odd', 'Even' ];
	dable.SetDataAsRows(data);
	dable.SetColumnNames(columns);
	dable.style = 'jquerui';
	dable.pageSizes = [1, 2, 5];     //replace the page sizes
	dable.pageSize = 2;          //select a page size
	dable.pagerSize = 5;         //add 5 page buttons
	//include first and last buttons
	dable.pagerIncludeFirstAndLast = true;
	dable.BuildAll("PagingDable");
</script>
</body>
</html>

Dable with Large Data sets:

See it Alone