Show more columns in the child row than in the table

matt99

Hi,
I'm new here and just started to use DataTables. I could not find the answer to this question:

I have a responsive table with RowGrouping (based on the documentation). See my test here: [http://www.solvence.com/tableTest/test2.php]

I would like to display more columns in the ChildRow than columns shown in the table (in my example 6 columns + the grouping column).

I would like to add in the child row, 3 other columns, that are not shown in the main table (like "salary", "nationality" and "previous position").

How could I do that ?
I suppose that I need to add those 3 colums to the table but to hide it (how? adding style display:none seems not to work) and then display it in the child row (how?).
This means also that the button must always be shown as those 3 "hidden" columns must be displayed in the child row even on large screens when all 6 columns are displayed.

Thanks a lot for your help
Matt

Tester2017

To hide your column you can set visible to false, like this:
{data: `salary`, visible: false}

allan

See also the columns.visible documentation for full details.

Allan

matt99

Hi,
Thanks a lot for your answers. I'm able to hide the columns now.

As I display all the columns in the child row (including the hidden ones), I need to always display de +/- button in the table. Currently, the button is only shown when some "visible" columns disappear (when the window is resized).

How could I achieve that ? (I looked at many examples but did not figure it out)

http://www.solvence.com/tableTest/test2.php

Thanks
Matt

allan

HI Matt,

The +/- button is only shown when there is something to actually show. If it isn't visible there are no columns hidden, and thus clicking on it wouldn't show anything. There is therefore no point in showing it to the end user. Unless I'm misunderstanding something?

Thanks,
Allan

matt99

Hi,
Thanks.
In fact, I would like to display 12 columns in the child row (all the détails of a database record), but this is too much to display on a normal table. So I would like to have only 8 columns shown (even on a large screen). I used following code to hide 4 columns in normal state (works great):

"columnDefs":[
    { "visible": false, "targets": 8 },
    { "visible": false, "targets": 9 },
    { "visible": false, "targets": 10 },
    { "visible": false, "targets": 11 }         
]

Unfortunately, the +/- button is not displayed (even if the ChildRow could display all 12 columns using the render function on hidden and visible columns). That's why I want to have the button displayed all the time.

Currently, I need to reduce the screen size to get the button. Once displayed, the childRow can not be hidden anymore, if the screen is large again.

I don't know if this is clear or if it's not the good way to achieve that.
Thanks
Matt

allan

You can use the none special class for Responsive to get that to work. Responsive will hide those columns and they will still be visible.

Allan

matt99

Thanks a lot, works great (class none on th element).
This is exactly what I was looking for !

Matt