How to make use of it:

1. Load the jQuery library along with the JSIronTable plugin within the HTML web 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 most recent jQuery UI framework for the help of drag and drop performance.

<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 info table.

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

4. Define your tabular data to be introduced within 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",
      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 info within the table and outline 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 peak of the info table and decide whether or not or to not allow the scrollable performance.

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

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

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

8. Specify the font dimension.

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

9. Determine whether or not to repair the table header to the highest.

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

10. All default plugin choices.

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 occasion 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   
});

Sortable Draggable Dynamic Table Plugin, JS IronTable Github

See Demo And Download