Acato Readable List Tables

Description

WordPress renders the post overviews with table-layout: fixed. Core gives author, categories, tags and date percentage widths, and plugins such as Yoast SEO, Post Expirator and Duplicate Post give their columns fixed em widths. The title column is the only one with no width of its own, so it gets whatever is left over.

With enough columns installed that is close to nothing. Measured with Yoast SEO Premium, Post Expirator and Duplicate Post active, 18 columns in total, the title column is 59px wide at a 1920px viewport, 22px at 1440px and 10px at 1280px. At that point the title is invisible and the column headers wrap one letter per line. A large monitor has enough width to spare, which is why this tends to be reported as “it only happens on my laptop”.

This plugin:

• Gives every column an explicit width, including columns it does not recognise, so none of them can collapse. min-width cannot do this job, because table-layout: fixed ignores it on table cells.
• Wraps the table in a horizontal scroll container, so a wide table scrolls on its own instead of squashing the title or scrolling the whole page.
• Adds a scrollbar that stays pinned to the bottom of the window, so a long table can be scrolled sideways from any row.
• Pins the checkbox and title columns, so you can still see which post a row is when scrolled to the right.
• Fades in a shadow at the right edge, and a divider beside the pinned title, to show that there is more to see.
• Keeps the Quick Edit and Bulk Edit forms in view, at the width of the visible area, wherever the table is scrolled to.

The scroll container is exposed as a labelled region and becomes a tab stop only while it actually scrolls, so keyboard users can reach the off-screen columns without picking up a tab stop that does nothing.

Good to know

• Development happens at github.com/acato-plugins/readable-list-tables.
• Nothing is written to the database and no columns are hidden: editors keep whatever they had, and can still hide columns per screen through Screen Options. Deactivating the plugin leaves no trace.
• The plugin acts on the post overviews (edit.php) for every post type. The users, media and taxonomy screens are not touched.
• No front end code, and no settings screen. The behaviour can be adjusted with the filters below.

Filters

acato_readable_list_tables_column_widths (array) column slug => width in pixels.

acato_readable_list_tables_default_width (int) width for columns with no explicit width, default 130.

acato_readable_list_tables_narrow_columns (array) CSS class names of columns that keep the width their own stylesheet gives them, such as the checkbox, the comment bubble and the Yoast score icons.

acato_readable_list_tables_sticky_columns (bool) whether to pin the checkbox and title columns, default true.

acato_readable_list_tables_enabled (bool, WP_Screen) whether to act on the current screen.

Example, widening the title column and sizing a column of your own:

add_filter( 'acato_readable_list_tables_column_widths', function ( $widths ) {
    $widths['title']            = 320;
    $widths['my_plugin_column'] = 200;

    return $widths;
} );

Technical details