Dynamically give columns from json data ?

Antriksh

I have a data table as a separate component to be used at multiple places and so that type of data is not fixed. I want to dynamically give columns and data to the table and also need to modify it before it is shown. All the options given in docs of columns.data option and columns.render option are for known set of columns. But we can have different datasources and thus different columns.

Please help @kthorngren

kthorngren

There are lots of threads with this question. See if either of these help:
https://datatables.net/forums/discussion/33886
https://datatables.net/forums/discussion/60722

Kevin

Antriksh

For example :
dataSource = [
{
'name': 'John',
'number: '4545'
}

{
'name': 'Matt',
'number: '45845'
}

{
'name': 'Jack',
'number: '445'
}
]

$('#example').dataTable( {
"data": dataSource,
"columns": ... // need to be dynamic from the above datasource. Also need to modify them.
} );

@kthorngren the threads given have ajax requests. But i will inject data through a method called from another component.

Antriksh

Also, if i declare
let dataSource = [ ] on table initialisation, and then update this array with data after table initialises it gives error that you changed data source during rendering. How to fix that.
I will be getting data after initialisation in every case.

kthorngren

They show that you create a variable that contains the column configuration, such as columns then assign that to the columns option. For example:

var columns = [ ... ];

$('#example').dataTable( {
"data": dataSource,
"columns": columns
} );

Kevin

Antriksh

@kthorngren
Like you suggested for var columns = [...], if we do same for var dataSource = [ ... ] and assign multiple objects(row data) to the dataSoruce array. Then if we give it to data option in datatable it gives error.

dataSource changed during rendering

kthorngren

Please provide a running test case showing what you are trying to do so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Antriksh

JSON data to show in table -

// function to return main data source
function returnData = {
dataSource = [
{
'name': 'John',
'number: '4545'
}

{
'name': 'Matt',
'number: '45845'
}

{
'name': 'Jack',
'number: '445'
}
]
return dataSource;
}
This data can change as the data and its columns are not fixed.

//function to update column data
function parseData(row) = {
// manipulations on column data for eg data format and return
}

//Dynamic columns array from JSON data
var columns = [ ];
for(let property in dataSource) {
columns.push({data: property , title: property })
}

DataTable({
data: returnData();
columns: [
// how to loop on this ? needs to be done for every column dynamically ? but
column names are not fixed
data: columns[0].data,
render: function(row){
parseData(row);
}
]
})

Hope u understand through this.
@kthorngren

kthorngren

Please build a test case. This way we can modify your code to show you how it works.

Kevin

kthorngren

Your code has lots of syntax errors. I built a simple example for you:
http://live.datatables.net/feloweku/1/edit

Kevin

Antriksh

Thanks for the example kevin. Now can we have dynamic data in this and have render function for each column so that we can modify data before rendering.
Updated ex - http://live.datatables.net/feloweku/2/edit

I have added CreatedDate and amount columns to the date and want to have render functions on these to format them. Like to format date column to "MM/DD/YYYY" and have "$" before amount. But the data which is coming is dynamic so we can't have the right index of the column.

Please help. @kthorngren

kthorngren

You will need to add some logic to the columns loop and add columns.render or whatever formatter you want to use based on the column type. Here is a very simple example to give you an idea.
http://live.datatables.net/hibiqaki/1/edit

Kevin