Select Specific Columns to Expand/Collapse Row in Mobile View

Select Specific Columns to Expand/Collapse Row in Mobile View

hashmaster3khashmaster3k Posts: 6Questions: 2Answers: 0

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.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • hashmaster3khashmaster3k Posts: 6Questions: 2Answers: 0
    edited November 2021

    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"
        }
    }
    
  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

    Try prefixing the classname with a period, like this:

    target: ".expandable"
    

    Kevin

  • hashmaster3khashmaster3k Posts: 6Questions: 2Answers: 0

    That did the trick. Thank you.

Sign In or Register to comment.