How to replicate a WordPress-styled table in the admin area - php

Question

I'm writing a plugin for WordPress and I need to emulate the functionality (and style) of a WP table for the admin area. I mean those basic tables that appear on any menu page, like the ones that list the Pages or the Comments.
I've made some progress on that: I've managed to replicate the WP style by simply using the same CSS classes and HTML that they use in their own tables, but I'm not sure this is the right way to approach this.
I actually only need the pagination and filter functionalities, nothing else. I guess I can put my own logic here and get it done, but I was wondering if there was a simpler, more appropriate way to do this.
So, any thoughts on how should I build a table in the admin area of WordPress so that it matches the style/functionality of the default ones?
(BTW, I'm not using a Custom Post Type, just a custom top-level admin menu. Hence the need for a table made from scratch.)
Here's the code I'm using to display my custom admin page (there are some literal values for simplicity):
HTML:
<div class="wrap">
<h1><?= $helper->esc_html__(get_admin_page_title()) ?></h1>
<hr class="wp-header-end">
<br>
<form>
<div class="tablenav top">
<div class="alignleft actions">
<label for="filter-by-date" class="screen-reader-text">Filter by date</label>
<select name="filter-by-date">
<option value="all" selected>All dates</option>
<option value="last-month">Last month</option>
<option value="last-week">Last week</option>
<option value="today">Today</option>
</select>
<input type="submit" name="filter-action" class="button" value="Filter">
</div>
<div class="tablenav-pages">
<?php
// translators: %d: Total number of elements
$elements_count = sprintf($helper->esc_html__('%d elements'), $requests_count);
?>
<span class='displaying-num'><?= $elements_count ?></span>
<span class="pagination-links">
<span class="tablenav-pages-navspan" aria-hidden="true">«</span>
<a class="prev-page" href="#">
<span class="screen-reader-text">Previous page</span>
<span aria-hidden="true">‹</span>
</a>
<span class="paging-input">
<label for="current-page-selector" class="screen-reader-text">Current page</label>
<input type="text" name="paged" id="current-page-selector" class="current-page" value="2" size="1" aria-describedby="table-paging">
<span class="tablenav-paging-text"> of <span class="total-pages">3</span></span>
</span>
<a class="next-page" href="#">
<span class="screen-reader-text">Next page</span>
<span aria-hidden="true">›</span>
</a>
<span class="tablenav-pages-navspan" aria-hidden="true">»</span>
</span>
</div>
</div>
</form>
<table class="wp-list-table widefat fixed striped">
<thead>
<tr>
<th class="manage-column column-primary"><?= $helper->esc_html__('Movie Title') ?></th>
<th class="manage-column"><?= $helper->esc_html__('Release') ?></th>
<th class="manage-column"><?= $helper->esc_html__('Language') ?></th>
<th class="manage-column"><?= $helper->esc_html__('User') ?></th>
<th class="manage-column"><?= $helper->esc_html__('Date') ?></th>
<th class="manage-column"><?= $helper->esc_html__('Actions') ?></th>
</tr>
</thead>
<tbody id="the-list">
<!-- If there are any requests, display each record, otherwise, inform the user -->
<?php if ($requests_count): ?>
<?php foreach ($requests as $request): ?>
<tr class="is-expanded">
<td class="column-primary" data-colname="Movie Title">
<strong><?= $helper->esc_html__($request->title) ?></strong>
</td>
<td data-colname="Release">
<?php if ($request->release === null): ?>
<span class="sr-text-info"><?= $helper->esc_html__('Not Specified') ?></span>
<?php else: ?>
<?= esc_html($request->release); ?>
<?php endif; ?>
</td>
<td data-colname="Language"><?= $helper->esc_html__($request->language) ?></td>
<td data-colname="User">
<?php if ($request->user === null): ?>
<span class="sr-text-info"><?= $helper->esc_html__('Anonimous') ?></span>
<?php else: ?>
<?= esc_html($request->user); ?>
<?php endif; ?>
</td>
<td data-colname="Date">
<?php
$date = new DateTime($request->date);
// translators: draft request date format, see http://php.net/date
$request_date_fmt = $helper->__('m/d/Y, g:i a');
echo esc_html($date->format($request_date_fmt));
?>
</td>
<td data-colname="Actions">
<a class="button" href="#">Delete</a>
</td>
</tr>
<?php endforeach; ?>
<?php else: ?>
<tr class="is-expanded">
<td class="sr-text-center" colspan="6">
<span class="sr-text-info"><?= $helper->esc_html__('There are no requests to show.') ?></span>
</td>
</tr>
<?php endif; ?>
</tbody>
</table>
</div>
Thanks in advance!

Answer 1

The best option is to extend the native WP_List_Table class which is already available in WordPress Core. While this is a private class in core, it probably won't change drastically in the future and I would personally consider it safe to extend.
When you define your own class and extend WP_List_Table, all you'll need to do is create your own methods with the logic for the data. The best part is that the parent WP_List_Table class will handle everything else for you (markup, styles, pagination, etc).
WP Engineer has a good beginner's guide to get you started. You can also search the web for "WP_List_Table guide", "WP_List_Table tutorial", (etc) and you'll find plenty of examples online.