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.
