Press "Enter" to skip to content

Create an HTML Table from JSON | Tidy Table

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

    Leave a Reply

    Your email address will not be published.