DataTables row.add() based on columns - datatables

Question

I have a table:
<table class="table table-bordered table-hover" id="user-table">
<thead>
<tr>
<th data-field="id">Id</th>
<th data-field="name">Name</th>
<th data-field="email">Email</th>
<th data-field="company">Company</th>
<th data-field="actions">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>john#doe.com</td>
<td>Doe Inc.</td>
<td>
<div class="btn-group">
<i class="fa fa-pencil"></i>
</div>
</td>
</tr>
</tbody>
</table>
My current way to add row:
var columns = $.map(data,function(v,k){
return v;
});
var rowNode = table.row.add(columns).order([0, 'desc']).draw(false).node();
$(rowNode).addClass('selected');
setTimeout(function(){$(rowNode).removeClass('selected');}, 2000);
My data looks like this:
{
"data":[ {
"id": 2,
"name": "Jane Doe",
"email": "jane#doe.com",
"company": "Doe Inc."
}
]
}
Is there a way to add row based on columns? Instead of returning v on a mapped data, I can directly insert data[0] using row.add(). I've been searching but can't get the exact scenario.
Apparently, the purpose is for shuffled data. In a table that have 15 columns, I don't have to worry about the proper column arrangements.
I found this https://datatables.net/reference/api/row.add() example #1 but obviously the documentation says:
Data to use for the new row. This may be an array, object, Javascript object instance or a tr element. If a data structure is used (i.e. array or object) it must be in the same format as the other data in the table (i.e. if your table uses objects, pass in an object with the same properties here!).

Answer 1

If you specify columns (or columnDefs) with data attributes, you can add row or rows in JSON / object literal format:
columns: [
{ data: 'id' },
{ data: 'name' },
{ data: 'email' },
{ data: 'company' }
]
You must also specify the last column, even it is not targeting any data. You can use render(), createdCell() or defaultContent:
const actions = `
<div class="btn-group">
<i class="fa fa-pencil"></i>
</div>
`;
var table = $('#user-table').DataTable({
columns: [
{ data: 'id' },
{ data: 'name' },
{ data: 'email' },
{ data: 'company' },
{ data: null, defaultContent: actions }
]
...
})
Now you can insert data from above:
var rowNode = table.row.add(data.data[0]).order([0, 'desc']).draw(false).node();
or all rows :
table.rows.add(data.data).draw()