DataTable: Loading data from CSV file

Hi,

I need the user to select a local csv file and load into the DataTable. Can you please give me a working example?
Below is my sample code.

grid = new webix.ui({
view:“datatable”,
columns:[
{ id:“1”, header:“Country”, width:250},
{ id:“2”, header:“Population”, width:200},
{ id:“3”, header:“Year”, width:100}
],
autoheight:true,
autowidth:true,
datatype:“csv”,
url:“E\Data.csv”
});

The Data.csv file is located in E drive of the local machine and contains the below data.

China, 1 341 990 000, 2011
India, 1 193 290 000, 2011
United States, 311 960 000, 2011
Indonesia, 237 556 363, 2010

Hi

I created a little example for you. At the top you see the format of the data the datatable can actually display.
Hope it helps!

Hi,

Thank you. But, I am unable to make this work. Data does not get loaded from the selected file. Can you please rework the example with a blank Datatable? If you can attach the csv file as well, I can copy that on to my local machine and try. Appreciate your help.

Ashok

Hi

Here’s a fully working example.
I used your example csv.
You might have to add some sort of $(‘document’).ready(function(){}); function to make it work locally.

Great! Thanks!

Is there any way to map the columns of csv file to the columns of the Datatable?

Ashok

Hi

That’s quite easy to accomplish:
columns: [
{ id: “data0”, header: “Country”, width: 250},
{ id: “data1”, header: “Population”, width: 200},
{ id: “data2”, header: “Year”, width: 100}
]

id: “data0” corresponds with the first csv item, id: “data1” with the second, etc.

Thanks! Perfect.

Ashok

Hi again,

I need to load only some columns from csv file, whereas, other columns will be loaded through the data array. I am getting a script error.

Here is the code. (I need to load the 4th column from csv file. )
webix.ui({
rows:[
{ type:“header”, template:“Preview” },
{ template:“You can write any code here” },
{ view:“resizer” },
{ view:“datatable”, autoConfig:true,
columns:[
{ id:“title”, header:“Film title”, width:200},
{ id:“year”, header:“Release year” , width:80},
{ id:“votes”, header:“Votes”, width:100},
{ id:“data0”, header:“From csv”, width:100}
],
datatype: “csv”,
data:[
{ id:1, title:“The Shawshank”, year:1994, votes:678790},
{ id:2, title:“The Godfather”, year:1972, votes:511495}
]
}]

});

Hello,

Well, you can’t load data to a separate column - you load data to the whole component. The whole data should be of the same type. A datatable row is visual representation of a data item.

You can think of some workaround, like this http://webix.com/snippet/ea0b11da.

There I update each datatable item width the corresponding value from csv dataset. Maybe it will suit you.

OK got it. Thanks. Appreciate your help.

Ashok

Hi, I would like to skip the first line of the CSV file while parsing. The first line contains the title. Thanks

Hi, you can strip this line from the file contents before parsing it into the datatable.

fileData.substring(fileData.indexOf("\
"));

In the previous context it looks like this: http://webix.com/snippet/273af984

Thank you.
fileData.substring(fileData.indexOf("
")+1);//to avoid blank line

Hi
im new to all this stuff.
is there a full example i can run on locally?
The example above is not complete ?