0

im using the wp_list_table class on my backend theme, to show some informations that i have saved on database, but there is a lot of informations and i want to make it responsive, show/hide some elements according to screen size.

I thought it would happen automatically as in the table that displays posts but that's not the case.

here is the example of all posts in small screen posts on small screen

and here is my wp_list_table on small screen wp_list_table on small screen

how can i remedy that bug without hacks, does it have any solution with wordpress core? like posts

thanks

  • Because first screenshot has only two columns and the second one has 6-7 columns. Actually No <table> is actually responsive. You can check what bootstrap did for that particular case - a simple responsive wrapper with scroll bars (overflow:auto) wrapping the table to cope with the issue. – Mayeenul Islam Apr 30 '15 at 6:04
0

i'm using wp-list-table without the (php) class but html only and wanna share my research. There is some stuff to watch if you need a responsive table when building a wp-list-table yourself:

  • add class column-primary to header th and body td. If this class is missing the table gets messy in mobile view
  • add button with toggle-row class into column-primary to expand the row
  • add data-colname to body td- content in mobile get displayed in the middle. Without data-colname the label is missing (which normally displayed in the table header)

responsive wp-list-table on mobile view

Final HTML Code should look like this:

<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>
0

Responsive list tables are a development goal of WordPress v4.3: https://make.wordpress.org/core/2015/04/30/dev-chat-summary-april-29th/

Better responsive list tables - this involves some PHP-side API changes as well as UI work. The base thought here is that a narrow screened device is also often a mobile device, which may have limited bandwidth. That’s exactly the situation in which you don’t want to have to load more pages to see important information, and our current strategy of truncation is in direct conflict with that.

Contact @helen if you want to be involved in the development.

0

This is because you need to set the primary column. If you tell WP what the primary column is, it will format like the default WordPress tables you pictured above. Like so:

Within method prepare_items():

$this->_column_headers = array( $columns, $hidden, $sortable, $primary );

Definitions

The columns to display:

$columns = array()

Columns to hide:

$hidden = array()

Columns you can sort:

$sortable = array()

The name (provided in the columns array) of the primary column:

$primary = string

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.