How to use danvk re-orderable columns with dynamically created tables?

Question

Hi,

I'm trying to implement the danvk draggable table javascript, and while I've been successful using it for tables actually in the html source, when I try to use it with tables I'm creating in javascript code, it isn't applied to those tables.

Has anyone had the same issue?

Many thanks.

Answer 1

All you need to do is invoke dragtable.makeDraggable(tableElement);​​​ on a table dom node after it has been injected.

Consider the following example code:

HTML

​<div id="tableDiv"></div>

JavaScript (the last line here is the crucial one)

var tableStr = '<table id="table" class="draggable" border="1"><tr><th>Name</th><th>Date</th><th>Color</th></tr><tr><td>Dan</td><td>1984-07-12</td><td>Blue</td></tr><tr><td>Alice</td><td>1980-07-22</td><td>Green</td></tr><tr><td>Ryan</td><td>1990-09-23</td><td>Orange</td></tr><tr><td>Bob</td><td>1966-04-21</td><td>Red</td></tr></table>',
    tableDiv = document.getElementById('tableDiv'),
    table;
tableDiv.innerHTML = tableStr;
table = document.getElementById('table');
dragtable.makeDraggable(table);​​​

Check out a working demo of this code here.