How to build a table with child rows

JaviNott

Currently I am loading the data on a data table by passing an array with the data.
I need to create child rows depending on certain data in the array.
The columns should be the same as the parent, but I need it to drag an drop them along with the parent.
Not sure if is there any way to structure the data so it can create child rows or which event should I use to create the child rows.

kthorngren

Does this Child detail rows example help?

Kevin

JaviNott

Hi Kevin,

I don't want to show or hide the child rows, I just want to look like the parent (just with a different style, but with the same columns and data renderers). But I need to set a relationship between rows to see if this way I can drag parent row to a different position and get child rows moved along with the parent.

I load the data from an array, and some rows are dependant from others. I just want to display them in the way it is in the screenshot but child row 1 and 2 I need to create them as child rows of Parent Row.

The goal would be to move parent row and get the child rows placed just under the parent row in the new location

kthorngren

I don't want to show or hide the child rows,

This example shows using initComplete to open all the child rows on table load.
https://live.datatables.net/qolevune/204/edit

I just want to look like the parent (just with a different style, but with the same columns and data renderers).

This example from this thread shows how to align the child columns.

Note that this child rows are not Datatables rows so Datatables functions like columns.render won't work. You will need to recreate the rendering using Javascript code.

But I need to set a relationship between rows to see if this way I can drag parent row to a different position and get child rows moved along with the parent.

I added rowReorder capability to the first example:
https://live.datatables.net/pecixubo/1/edit

Kevin

JaviNott

Hi Kevin,

I was able to reproduce the same row rendering as the one for the parent rows, but when I drag a parent row the children rows don't move with the parent.

On the other hand, what is working properly is that I am not able to drop a row between child rows.

This is the function I used to create the child rows. I have created an array of rows.

Do you know why child rows are not moving to target position?

initComplete: function () {
var api = this.api();
api.rows().every(function ( rowIdx, tableLoop, rowLoop ) {
let d = this.data();
if(d.childPositions && d.childPositions.length>0) {
var childRows = [];
for(let childPosition of d.childPositions) {
childRows.push($(instance.format(childPosition)));
}
this.child($(instance.format(childPosition))).show();
this.nodes().to$().addClass('shown');
}
} );
}

kthorngren

There is nothing obviously wrong with the code snippet. Please post a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

JaviNott

Hi Kevin,

I will prepare a test case to show you what happens.

In the meantime, what I have just noticed is that starting with this initial layout:

If I move the row with sort = 1 with update option set to true. The Sort values are changed but rows are not placed in the place they should be. They are not reordered according to sort value.

If update value is set to false. Parent row is moved, but not the child rows.

kthorngren

The Sort values are changed but rows are not placed in the place they should be.

Sounds like you aren't sorting by the Sort column. Use order to set the order to that column. looks like it should be order: [[1 ,'asc']],.

If update value is set to false. Parent row is moved, but not the child rows.

Did you do this to try and fix the first issue? Likely you don't want to set this option because the rowReorder update is not processed. The result is likely due to not setting the Sort column as the column ordering the table.

Kevin

JaviNott

Hi Kevin,

Thank you very much for your support. I get it working with these options:

ordering: true,
searching: false,
paging: false,
info: false,
rowId: 'internalId',
rowReorder: {
dataSrc: 'sort',
update: true,
enable: true,
selector: '.dragAndDrop',
snapX: true
},
orderFixed: [ 1, 'asc' ],
columnDefs: [
{ "orderable": "false", "targets": "_all" }
],

The problem is that I don't want to seems that rows can be ordered. I want to remove the arrows in the header.

allan

columns.orderable should be a boolean value, not a string. Use:

columnDefs: [
  { "orderable": false, "targets": "_all" }
],

Allan