Selectable & Sortable JSON To Table Generator – Tidy Table

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:

02/29/2024

• v4.0.9

02/08/2024

• v4.0.7

10/07/2023

• v4.0.6

08/08/2023

• Update

05/13/2023

• Demo update

05/07/2023

• Updated HTML color codes