Sortable Draggable Dynamic Table Plugin - JSIronTable

JSIronTable is a jQuery based dynamic table generator plugin that provides an easy way of adds a sortable & draggable data table to your web app.

Key Features:

• Fixed table header.
• Sort tabular data in the table.
• Re-arrange table columns via drag and drop.
• Dynamic data rendering.
• Licensed under the Apache License, Version 2.0.

How to use it:

1. Load jQuery library together with the JSIronTable plugin in the html page.

<link rel="stylesheet" href="/path/to/src/jsirontable.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/src/jsirontable.js"></script>

2. Load the latest jQuery UI framework for the support of drag and drop functionality.

<link rel="stylesheet" href="/path/to/cdn/jquery-ui.min.css" />
<script src="/path/to/cdn/jquery-ui.min.js"></script>

3. Create a placeholder for the data table.

<div class="jsirontable"></div>

4. Define your tabular data to be presented in the data table.

var songs = [
    {
      id: "s1",
      artist:"Radiohead",
      title:"Bloom",
      isnew: 0,
      duration:180,
      bpm:15,   
      test: "40",
      path: "http://api.audiotool.com/track/volution/play.mp3",
      actions:""
    },
    {
      id: "s2",
      artist:"Radiohead",
      title:"Paranoid Android",
      isnew: 0,
      duration:200,
      bpm:165,   
      test: "10",
      path: "http://api.audiotool.com/track/volution/play.mp3",
      actions:""
    },
    {
      id: "s3",
      artist:"Radiohead",
      title:"Let Down",
      isnew: 1,
      duration:190,
      bpm:160,   
      test: "300",
      path: "http://api.audiotool.com/track/volution/play.mp3",
      actions:""
    }
    // ...
];

5. Initialize the plugin to render the data in the table and define the header data as follows:

var irontable = $('.jsirontable').JSIronTable({
    data: songs,
    columns: [
      { title: "ID", datafield: "id", visible: true, width: "10%" },        
      { title: "Title", datafield: "title", width: "100px", datafields: [{key: "data-translate", value: "{{lang.main.title}}"}] },
      { title: "Is New", datafield: "isnew", width: "10%" },
      { title: "Duration", datafield: "duration" },
      { title: "Artist", datafield: "artist" },
      { title: "Bpm", datafield: "bpm" },        
      { title: "Test", datafield: "test" },        
      { title: "Path", datafield: "path", visible: false },
      { 
        title: "Actions", 
        datafield: "actions", 
        view: function ( data ) { 
          return '<a href="javascript:ClickActionBtn(\''+data.id+'\');" class="action_icon action_icon_edit">Delete Forever</a>' 
        }
      },
    ]
});

6. Specify the max height of the data table and determine whether or not to enable the scrollable functionality.

var irontable = $('.jsirontable').JSIronTable({
    maxHeight: 300,
    scrollable: true,
    fitHeight: true
});

7. Determine whether or not to enable the Sortable and Draggable functionalities.

var irontable = $('.jsirontable').JSIronTable({
    sortable: true,
    draggableColumns: true
});

8. Specify the font size.

var irontable = $('.jsirontable').JSIronTable({
    headerfontsize: "14px",
    cellfontsize: "14px"
});

9. Determine whether to fix the table header to the top.

var irontable = $('.jsirontable').JSIronTable({
    fixedheader: true
});

10. All default plugin options.

var irontable = $('.jsirontable').JSIronTable({
    data: [],
    fitHeight: false,
    maxHeight: 0,
    fixedheader: true,
    scrollable: true,
    sortable: false,
    draggableColumns: false,
    headerfontsize: "12pt",
    cellfontsize: "12pt",
    columns: [],
    rows: [],
    headercells: [],
    columnfields: []
});

11. Available event handlers.

irontable.OnInitialized(function()
{
  // do something   
});

irontable.OnError(function(error)
{
  // do something   
});

irontable.OnReload(function()
{
  // do something   
});

irontable.OnSort(function()
{
  // do something   
});

irontable.BeforeSort(function()
{
  // do something   
});

Changelog:

2021-02-28

• Fixed bug on remove table row

---

This awesome jQuery plugin is developed by raftopyannis. For more Advanced Usages, please check the demo page or visit the official website.