Creating a table in the admin-style?

Question

What is the recommended way of creating a page with a table, in the style of the tables showing posts or users in the admin area?

I am expanding the Cache Images plugin, and it contains a table with domains and a number of images from that domain. So there is no equivalent existing table that I can build upon (in the first version of this question, I asked about a table with posts, but there I could (maybe) expand the existing post table).

Should I just base myself on the post overview page, and start with a <table class="widefat">, or are there better functions that handle this now? Do you know a clean, empty example of a table with paging that I could base my work on?

Answer 1

This is what I generally use:

<table class="widefat fixed" cellspacing="0">
    <thead>
    <tr>

            <th id="cb" class="manage-column column-cb check-column" scope="col"></th> // this column contains checkboxes
            <th id="columnname" class="manage-column column-columnname" scope="col"></th>
            <th id="columnname" class="manage-column column-columnname num" scope="col"></th> // "num" added because the column contains numbers

    </tr>
    </thead>

    <tfoot>
    <tr>

            <th class="manage-column column-cb check-column" scope="col"></th>
            <th class="manage-column column-columnname" scope="col"></th>
            <th class="manage-column column-columnname num" scope="col"></th>

    </tr>
    </tfoot>

    <tbody>
        <tr class="alternate">
            <th class="check-column" scope="row"></th>
            <td class="column-columnname"></td>
            <td class="column-columnname"></td>
        </tr>
        <tr>
            <th class="check-column" scope="row"></th>
            <td class="column-columnname"></td>
            <td class="column-columnname"></td>
        </tr>
        <tr class="alternate" valign="top"> // this row contains actions
            <th class="check-column" scope="row"></th>
            <td class="column-columnname">
                <div class="row-actions">
                    <span><a href="#">Action</a> |</span>
                    <span><a href="#">Action</a></span>
                </div>
            </td>
            <td class="column-columnname"></td>
        </tr>
        <tr valign="top"> // this row contains actions
            <th class="check-column" scope="row"></th>
            <td class="column-columnname">
                <div class="row-actions">
                    <span><a href="#">Action</a> |</span>
                    <span><a href="#">Action</a></span>
                </div>
            </td>
            <td class="column-columnname"></td>
        </tr>
    </tbody>
</table>

Hope that helps.

Answer 2

Use the Core API, not only its CSS

Normally you just use an instance of the WP_List_Table class.

Guides:

• More about it in the Codex here.
• Here's also a guide from WP Engineer - too much to copy it over.
• And another guide on Smashing Magazine online.

Benefits?

YES!

You can add pagination, search boxes, actions and whatever magic you can imagine (and are able to code).

Answer 3

Use this example (written as a plugin) to create your admin tables:

http://wordpress.org/extend/plugins/custom-list-table-example/

It uses the built-in WP_List_Table class.

Answer 4

Also you can use this small plugin for view the possibilities of the backend in WP: https://github.com/bueltge/WordPress-Admin-Style

Answer 5

You might want to consider adding a filter to your custom post type list in the admin? The linked answer below shows how to do it with a taxonomy but you could easily use other criteria in your restrict_manage_posts hook:

• Adding a Taxonomy Filter to Admin List for a Custom Post Type?

Let me know if you have more questions.