How to configure responsive.details to ignore the first column and display details for other columns

tifauveBackup

I tried different configuration but no luck, i want to ignore the first column and display details when the rest of columns are clicked .
responsive: {
details: {
type: 'column',
target: 1
}
},
columnDefs: [
{
className: 'dtr-control',
orderable: false,
targets: [1, 2, 3, 4]
}
],

kthorngren

See if this example helps. Click the HTML tab to see the classes assigned for the example. Looks like you will want the all class assign to the column you always want displayed.

Kevin

tifauveBackup

@kthorngren thank you but that's not what i wanted, when on smartphone i want to ignore the first column when clicked(doesn't show details) but when i click on other columns , i want to see the details

kthorngren

Maybe use a ternary condition with the responsive.details.target to set it to "tr" if on smartphone otherwise set it to 1. See this example for whole row child control. For example:

    responsive: {
        details: {
            type: 'column',
            target: isSmartphone ? 'tr' : 1
        }
    }

Kevin

tifauveBackup

@kthorngren i already tried that, i don't want it to be the whole row on Smartphone, i want to configure it so details can only show when you click on certain columns, in my case i want to ignore the first column of the row, but the rest when clicked can show the details on smartphone, can you post the code please because it's been 3 days trying to solve this.

kthorngren

Take a look at the responsive.details.target docs. You can use a jQuery selector. Instead of tr maybe something like td:not(:first-child) will work.

responsive: {
    details: {
        type: 'column',
        target: isSmartphone ? 'td:not(:first-child)' : 1
    }
}

Kevin

tifauveBackup

@kthorngren that's exactly what i was looking for, thank you.