Responsive admin tables in WordPress plugins

  |   By  |  0 Comments

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.