Responsive admin tables in WordPress plugins
If you want tables in the admin area of your plugin to be responsive, here’s the basic markup…
<table class="wp-list-table widefat striped"> <thead> <tr> <th class="column-primary">primary Field Name</th> <th>Label 2</th> <th>Label 3</th> </tr> </thead> <tbody> <tr class="is-expanded"> <td class="column-primary" data-colname="Name">primary field content <button type="button" class="toggle-row"> <span class="screen-reader-text">show details</span> </button> </td> <td data-colname="Label 2">Content 2</td> <td data-colname="Label 3">Content 3</td> </tr> <tr> <td class="column-primary" data-colname="Name">unexpanded row <button type="button" class="toggle-row"> <span class="screen-reader-text">show details</span> </button> </td> <td data-colname="Label 2">Content 2</td> <td data-colname="Label 3">Content 3</td> </tr> </tbody> </table>
The is-expanded class is added by the WordPress API when the downward arrow button is clicked.