Import table data from CSV?

[answerquest]

Hi Max, this is an amazing tool.. removes the need for SQL DB for just data-reading applications. I'm going to use this for a city budget analysis tool.

It would be awesome if we could extend this to working with data residing in CSV files. That would make it easy for non-programmers (ie, real-world people :P) to manage and update the data. So, import a CSV file, render it as a HTML table, and then apply the filters.

I'm checking out this: http://code.google.com/p/jquerycsvtotable/ , but there's an annoying glitch : It doesn't define an ID for the table that we can work with. They've built in options for customizing all the class names, but no table id :(

You already have a dynamic data loading example in http://tablefilter.free.fr/ajax-demo.htm, but it's loading another html file only. consider tweaking it for importing CSV?

[koalyptus]

Hello there, The scope of this plugin is to work on a pre-existing HTML table no matter how this is generated.
For the moment the requirement is to have an ID defined, can't you assign it to the table generated by jquerycsvtotable before passing it to the table filter constructor?

[koalyptus]

There is a new version of this plugin in the pipeline that will a certain point also accept a table instance and not only an ID: https://github.com/koalyptus/TableFilter/tree/es6-webpack

It is still not merged into master and I didn't launch it officially yet, but hoping to launch it in the next days/weeks depending on my spare time :). It is in the todo list:

https://github.com/koalyptus/TableFilter/wiki/TODO

[answerquest]

Hi, I modified the jquerycsvtotable script to hardcode an id for the table. So, it now generates HTML like this:

<div style="display: block;" id="A02"><table class="CSVTable" id="table1"><thead class=""><tr class=""><th class="">जमेचा गोषवारा :: Revenue Income summary: विवरण</th><th class="">नक्की आकडा: 2011-12</th>

Note that all the elements of the table have classes declared as empty strings as above. Could that be causing any trouble? Basically, does TableFilter need an absolutely unstyled table to work with?

I'm then chaining it to TableFilter, like below. But it's not having any effect, and neither is there any console log message to indicate any error happening. I then put a timeout to it so that it waits a bit but still no effect. I get the console log message so I know that the function is firing.

$('#A02').CSVToTable('data/csv201516/A02.csv', { 
    startLine: 0
}).bind("loadComplete",function() { 
    var HEY1 = setTimeout('makeFilter()', 3000);
});

function makeFilter() {
    console.log('OK, now attempting to do TableFilter.');
    var tableFilters = {  col_0: "select",  col_4: "none",  btn: true   };
    var tf01 = new TF("table1",2,tableFilters);  
    tf01.AddGrid(); 
}

I then tried to roll my own table creation script.. using JQuery's get().. again it generates the table successfully but the TableFilter doesn't do anything with it.

$.get('data/csv201516/A02.csv', function(data) {
var html = '<table id="table1">';
var rows = data.split("\n");
rows.forEach( function getRow(row,index) {
    html += '<tr><td>'+ index + '</td>';
    var columns = row.split(',');
    columns.forEach( function getColumn(column) {
        html += '<td>' + column + '</td>';
    });
    html += '</tr>';
});
html += '</table>';
//document.getElementById('A02').innerHTML = html;
$('#A02').append(html);
var HEY1 = setTimeout('makeFilter()', 3000);
});
function makeFilter() {
    console.log('Finished rendering the table, now try TableFilter');
    var tf01 = new TF('table1');  
    tf01.AddGrid(); 
}

Anyways I'd avoid the second route, as it's not handling the quotes, comma's within quotes, escape chars etc properly. So my guess is that TableFilter doesn't work on dynamically generated tables? I made a static table and it worked with that flawlessly.

[koalyptus]

Hi, I am pretty confident you are almost there. The script does not make the difference between a statically generated table and a dynamically generated one. All it needs is an existing table when TF is instanciated. As a result, in your first example, double check in the console.log of your makeFilter function that the table DOM element with a 'table1' ID do exist (document.getElementById('table1')). Tell me how it goes.

[koalyptus]

Another thing, does the table have rows apart from the headers?

[answerquest]

Oh, they sure do. Check out the project here: http://nikhilvj.techydudes.net/files/filter-punebudget1516-htmlCREATOR.html And yes, the newly created table-id does exist, I'm even able to get its innerHTML content out. It's something in TableFilter script that's making a silent exit. There's no error reported which means it's being handled. Screenshot attached. How about if you make a debugging version of tablefilter.js .. put console.log() wherever there's a return statement or so? Or is there some way I can track which lines are executing etc in the browser's development thing? I opened the .js up but it's (understandably) too complicated for me at this point.

The script does work painlessly once I've hardcoded the tables : http://nikhilvj.techydudes.net/files/filter-punebudget1516.html ... but we're looking for an import-data thing.

[koalyptus]

Ok, try to import the tablefilter_all.js file instead in your page. Tell me how it goes

[answerquest]

Holy Cow it works! THANKKKYYYYOOOUUU!!!

[koalyptus]

Cool, the tablefilter.js loads the required modules asynchronously as opposed to tablefilter_all.js which combines all the modules in js file.

[answerquest]

yep, understood! Kindly put this instruction on the website too : If you're importing / creating the table dynamically, then use tablefilter_all.js