Author: | nuxy |
---|---|
Views Total: | 51 views |
Official Page: | Go to website |
Last Update: | October 7, 2023 |
License: | MIT |
Preview:

Description:
A tiny and fast JavaScript plugin that generates an HTML table from JS/JSON data you provide, with Sortable and Checkable support.
How to use it:
1. Load the Tidy Table plugin’s files in the document.
<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 data 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. Default: false.
document.getElementById('container') .TidyTable({ enableCheckbox: true });
5. Enable the action menu. Default: false.
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. Default: false.
document.getElementById('container') .TidyTable({ responsive: true });
7. Determine whether to reverse the sort direction. Default: false.
document.getElementById('container') .TidyTable({ reverseSortDir: true });
8. Post-process table data.
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)'); }); }
Changelog:
10/07/2023
- v4.0.6
08/08/2023
- Update
05/13/2023
- Demo update
05/07/2023
- Updated HTML color codes