Create a HTML table from JSON that can be sorted, selected, and post-processed using a simple callback.
Check out the demo provided with this package.
This package can be easily installed using Bower.
$ bower install tidy-table#3
Compatible with Firefox 3.6, Chrome, Safari 5, Opera, and Internet Explorer 7+ web browsers.
$ bower install tidy-table#2
Manual install:
Filename | Role |
---|---|
tidy-table.min.js | The main script to be included from within your HTML document. |
tidy-table.min.css | This style sheet that defines the "look & feel" of the HTML table. |
It's as simple as defining a node container
using a JavaScript selector and passing tabular data as JSON. There are options available for post-processing table/column/menu elements, if needed.
document.getElementById('container').TidyTable( settings, data [columnTitles, columnValues, menuOptions, postProcess] );
Add the following JavaScript/CSS between the <head></head>
tags of your HTML document.
<script src="/path/to/tidy-table.min.js"></script> <script> window.addEventListener('load', function() { var block = document.getElementById('container') .TidyTable({ enableCheckbox: true, enableMenu: true }, { columnTitles: ['Column A', 'Column B', 'Column C', 'Column D', 'Column E'], columnValues: [ ['1', '1A', '1B', '1C', '1D', '1E'], ['2', '2A', '2B', '2C', '2D', '2E'], ['3', '3A', '3B', '3C', '3D', '3E'], ['4', '4A', '4B', '4C', '4D', '4E'], ['5', '5A', '5B', '5C', '5D', '5E'] ], // do something with selected results menuOptions : [ ['Option 1', { callback: doSomething1 }], ['Option 2', { callback: doSomething2 }] ], // post-process DOM elements postProcess: { table: doSomething3, column: doSomething4, menu: doSomething5 }, // pre-process column values before sort (optional) sortByPattern: function(col_num, val) { if (col_num != 1) return val; return String(val).replace(/$|%|#/g, ''); } }); // copy the table options menu var menu = block.querySelector('select.tidy_table').cloneNode(true); block.appendChild(menu); // remove stored data block.TidyTable('destroy'); </script> <link rel="stylesheet" type="text/css" href="/path/to/tidy-table.min.css">
<script src="/path/to/tidy-table.min.js"></script> <script> window.addEventListener('load', function() { document.getElementById('container') .TidyTable({ columnTitles: ['Column A', 'Column B', 'Column C', 'Column D', 'Column E'], columnValues: [ ['1', '1A', '1B', '1C', '1D', '1E'], ['2', '2A', '2B', '2C', '2D', '2E'], ['3', '3A', '3B', '3C', '3D', '3E'], ['4', '4A', '4B', '4C', '4D', '4E'], ['5', '5A', '5B', '5C', '5D', '5E'] ] }); }); </script> <link rel="stylesheet" type="text/css" href="/path/to/tidy-table.min.css">
The following options can be passed to the plug-in main function as JSON
Option | Description | Default Value |
---|---|---|
enableCheckbox | add checkbox functionality to table output | false |
enableMenu | add select menu functionality to manipulate table output | false |
reverseSortDir | change the sorting arrow image direction | false |
responsive | enabled responsive layout on supported mobile devices | false |
When a callback function is defined a response is returned. The following functions correspond to the examples provided above.
function doSomething1(rows) { alert('callback1(rows=' + rows.length + ')'); } function doSomething2(rows) { alert('callback2(rows=' + rows.length + ')'); }
There are times where you may need to customize the table result behavior. This can be easily achieved using optional postProcess hooks. The following functions correspond to the examples provided above.
function doSomething3(table) { var cols = table.querySelectorAll('th:nth-child(2), td:nth-child(2)'); for (var i = 0; i < cols.length; i++) { cols[i].style.display = 'none'; } }
function doSomething4(col) { col.addEventListener('click', function() { if (this.querySelector('form')) return; var form = document.createElement('form'); form.addEventListener('submit', function() { var xhr = new XMLHttpRequest(); xhr.open('POST', 'http://domain.com/path/to/script'); xhr.send(null); }); var field = document.createElement('input'); field.setAttribute('type', 'text'); field.setAttribute('value', this.textContent); var button = document.createElement('input'); button.setAttribute('type', 'submit'); form.appendChild(field).appendChild(button); this.removeChild(this.firstChild); this.appendChild(form); }); }
function doSomething5(menu) { if (!getCookie('session')) { menu.style.display = 'none'; } }
There will be limited support for this version going forward. It's recommended that you upgrade to the latest release to take advantage of the new features and bug fixes.
This package has been preconfigured to support QUnit headless testing using Travis-CI. If you plan on using another integration tool you will have to create a custom project that combines the use of QUnit and PhantomJS plugins. If headless testing in not available you can manually run test.html
in your web browser.
I have provided with this package the Photoshop template used to create the sort arrows shown in the Tidy Table results. If you only need to support modern web browsers these items can be replaced with CSS3 transform
and HTML5 SVG images.
I have included with this package a packed version (3.8 kB) and developers version (unpacked 14.5 kB)
You can always find the latest updates within this projects repository.
This projects repository is currently hosted on Github
https://github.com/nuxy/Tidy-Table
For feedback, bug reports, or other comments, feel free to contact me at: devel at mbrooks dot info
This package is distributed in the hope that it will be useful, but without any warranty; without even the implied warranty of merchantability or fitness for a particular purpose.
Tidy Table is provided under the terms of the MIT license.
Tidy Table ©2012-2018 Marc S. Brooks