Select Specific Columns to Expand/Collapse Row in Mobile View

hashmaster3k

Is there a way to allow only selected columns to show/hide the hidden columns for each row?

Example:

responsive: {
    details: {
        type: "column",
        targets: [0,1, 2, 4]
    }
}

Columns 0, 1, 2 and 4 when clicked, will show/hide the remaining columns for each row. All other columns will not do anything when clicked.

kthorngren

The responsive.details.target state that you can use a string as a jQuery selector. Haven't tried it but it sounds like you can apply a classname to the columns you want to use to show/hide the hidden columns.

Also note note the option is target not targets.

Kevin

hashmaster3k

Thanks for the response Kevin. Indeed it is target and not targets. I was hoping maybe something similar existed to allow for specific selection of columns.

I attempted to use unique class name with no luck. Continuing on the example above:

<td class="text-center expandable">data</td>
<td class="text-center expandable">data</td>
<td class="text-center expandable">data</td>
<td class="text-center">data</td>
<td class="text-center expandable">data</td>

responsive: {
    details: {
        type: "column",
        target: "expandable"
    }
}

kthorngren

Try prefixing the classname with a period, like this:

target: ".expandable"

Kevin

hashmaster3k

That did the trick. Thank you.