jspreadsheet / ce

Jspreadsheet is a lightweight vanilla javascript plugin to create amazing web-based interactive tables and spreadsheets compatible with other spreadsheet software.
https://bossanova.uk/jspreadsheet/v4
MIT License
6.66k stars 818 forks source link

How to specify the column and data property when a property is another object #1684

Closed sridhargoshika closed 1 month ago

sridhargoshika commented 1 month ago

The outer object has properties name, id, age, and company. The company property is another object with properties name and location.

    var table = jexcel(document.getElementById('spreadsheet'), {        
    data:[
        { name:'Jorge', id:'3', age:'40',company:{name:'nokia',location:'us'} },
        { name:'Robert', id:'4', age:'48',company:{name:'nokia',location:'us'} },
        { name:'Santos', id:'5', age:'32',company:{name:'nokia',location:'us'} },
    ],
    columns: [
        { type:'text', width:300, name:'id', title:'id' },
        { type:'text', width:100, name:'name', title:'name' },
        { type:'text', width:100, name:'age', title:'age' },
        { type:'text', width:100, data:'company.name', title:'company name' },
        { type:'text', width:100, data:'company.location', title:'company location' },
     ]
});

and the result table looks like this: image

An example of this issue here: https://jsfiddle.net/sridharnetha/vf0tknxb/2/

sridhargoshika commented 1 month ago

customizing the script by using a method updateTable should work.

data = [
{ name:'Jorge', id:'3', age:'40',company:{name:'nokia',location:'us'} },
{ name:'Robert', id:'4', age:'48',company:{name:'nokia',location:'us'} },
{ name:'Santos', id:'5', age:'32',company:{name:'nokia',location:'us'} },
];

jspreadsheet(document.getElementById('my-spreadsheet'), {
data:data,
allowInsertColumn: false,
columns: [
{ type:'text', width:50, name:'id', title:'id' },
{ type:'text', width:100, name:'name', title:'name' },
{ type:'text', width:50, name:'age', title:'age' },        
{ type:'object', width:100, data:'company.name', title:'company name' },
{ type:'text', width:100, data:'company.location', title:'company location' },
 ],
 updateTable:function(instance, cell, col, row, val, label, cellName) {
 if (col == 3) {
   //alert(JSON.stringify(val));
    cell.innerHTML = val.name;
    }
   }
});
hodeware commented 1 month ago

You can use that, on the Pro version there is a feature call data binding. https://jspreadsheet.com/docs/data