Show more columns in the child row than in the table

Show more columns in the child row than in the table

matt99matt99 Posts: 5Questions: 2Answers: 0

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

This question has an accepted answers - jump to answer

Answers

  • Tester2017Tester2017 Posts: 145Questions: 23Answers: 17

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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    See also the columns.visible documentation for full details.

    Allan

  • matt99matt99 Posts: 5Questions: 2Answers: 0

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • matt99matt99 Posts: 5Questions: 2Answers: 0

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    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

  • matt99matt99 Posts: 5Questions: 2Answers: 0

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

    Matt

This discussion has been closed.