Tidy Table Create an HTML table from JSON that can be sorted, selected, and subsequently processed using a simple callback.
sort dynamic table javascript, sortable html table generator, responsive table with sorting, pure css sortable table, html sort table without javascript
Features
- Extensible HTML/CSS interface.
- Compatible with all modern web browsers for desktop and mobile devices.
- Responsive layout with touch event support.
- Easy to set up and customize.
- Customizable callback functions for post-processing of selected results.
- Post-processing options for handling table/column/list items.
- Fast and lightweight (JavaScript plugin * only 4KB)
How to make use of it:
1. Load the Tidy Table pluginβs information within the doc.
<link rel="stylesheet" href="tidy-table.min.css" /> <script src="tidy-table.min.js"></script>
2. Create a container to hold the table.
<div id="container"></div>
3. Initialize the Tidy Table and define your tabular information as follows:
document.getElementById('container') .TidyTable({ // options }, { columnTitles: ['Rank', 'Programming Language', 'Ratings Jan 2012', 'Delta Jan 2012', 'Status'], columnValues: [ ['1', 'Java', '17.479%', '-0.29%', 'A'], ['2', 'C', '16.976%', '+1.15%', 'A'], ['3', 'C#', '8.781%', '+2.55%', 'A'], ['4', 'C++', '8.063%', '-0.72%', 'A'], ['5', 'Objective-C', '6.919%', '+3.91%','A'] ], });
4. Add checkboxes to table rows.
document.getElementById('container') .TidyTable({ enableCheckbox: true });
5. Enable the action menu.
document.getElementById('container') .TidyTable({ enableMenu: true, }, { columnTitles: ['Rank', 'Programming Language', 'Ratings Jan 2012', 'Delta Jan 2012', 'Status'], columnValues: [ ['1', 'Java', '17.479%', '-0.29%', 'A'], ['2', 'C', '16.976%', '+1.15%', 'A'], ['3', 'C#', '8.781%', '+2.55%', 'A'], ['4', 'C++', '8.063%', '-0.72%', 'A'], ['5', 'Objective-C', '6.919%', '+3.91%','A'] ], menuOptions: [ ['- Action -', null], ['Callback 1', { callback: doSomething1 }], ['Callback 2', { callback: doSomething2 }] ], });
6. Enable responsive layout.
document.getElementById('container') .TidyTable({ responsive: true });
7. Determine whether or not to reverse the type route.
document.getElementById('container') .TidyTable({ reverseSortDir: true });
8. Post-process table information.
document.getElementById('container') .TidyTable({ enableCheckbox: true, enableMenu: true, reverseSortDir: true, responsive: true }, { columnTitles: ['Rank', 'Programming Language', 'Ratings Jan 2012', 'Delta Jan 2012', 'Status'], columnValues: [ ['1', 'Java', '17.479%', '-0.29%', 'A'], ['2', 'C', '16.976%', '+1.15%', 'A'], ['3', 'C#', '8.781%', '+2.55%', 'A'], ['4', 'C++', '8.063%', '-0.72%', 'A'], ['5', 'Objective-C', '6.919%', '+3.91%','A'] ], menuOptions: [ ['- Action -', null], ['Callback 1', { callback: doSomething1 }], ['Callback 2', { callback: doSomething2 }] ], postProcess: { table: doSomething3, column: doSomething4, menu: doSomething5 } });
function doSomething1(rows) { alert('callback1(rows=' + rows.length + ')'); } function doSomething2(rows) { alert('callback2(rows=' + rows.length + ')'); } // Post-process DOM elements. function doSomething3(table) { table.addEventListener('hover', function() { alert('post-process(table)'); }); } function doSomething4(col) { col.addEventListener('click', function() { alert('post-process(value=' + this.textContent + ')'); }); } function doSomething5(menu) { menu.addEventListener('change', function() { //alert('post-process(menu)'); }); }
Selectable & Sortable JSON To Table Generator, Tidy Table Plugin/Github, table sorting in javascript for dynamic table, html table with drop down filter
See Demo And Download
Official Website(nuxy): Click Here
This superior jQuery/javascript plugin is developed by nuxy. For extra Advanced Usages, please go to the official website.
Be First to Comment