WP_List_Table in WordPress

Using WP_List_Table To Render Custom Tables in the WordPress Admin
To display a custom table in the WordPress admin using WP_List_TableFollow this structured approach:

Add a Custom Menu to the Admin Start by registering a custom menu using the add_menu_page() or add_submenu_page() function. This will create a new page in the admin panel where your table will be displayed.

function add_a_menu_for_wp_list() {
    add_menu_page(
        'Custom Table',
        'Custom Table',
        'manage_options',
        'my-custom-table',
        [ $this, 'render_my_custom_admin_table']
    );
}

function render_my_custom_admin_table() {
    $table = new MyCustomListTable();
    $table->prepare_items();
    echo '<div class="wrap">';
    echo '<h1 class="wp-heading-inline"> WP List</h1>';
    echo '<form method="post">';
    $table->display();
    echo '</form>';
    echo '</div>';
}
add_action( 'admin_menu', array( $this, 'add_a_menu_for_wp_list' ) );

Render the Table on the Menu Page Inside the callback function for the admin menu, do the following:

Create an instance of your custom table class (which extends WP_List_Table).
Call the prepare_items() method to prepare the data.

Call the display() method to render the table.

$table = new \WeLabs\Demo\MyCustomListTable();
$table->prepare_items();
$table->display();

Implement the prepare_items() Method Inside your custom table class, the prepare_items() method is responsible for:

Fetching data (e.g., from the database).
Setting up columns, hidden columns, and sortable columns.
Assigning the result to $this->items.
$this->_column_headers = array( $this->get_columns(), array(), array() );
$this->items = $data;

Define Columns with get_columns() The get_columns() method returns an associative array of columns where:

The key is the column slug.
The value is the column label.

public function get_columns() {
    return array(
        'name'  => esc_html__( 'Name', 'domain_name' ),
        'email' => esc_html__( 'Email', 'domain_name' ),
    );
}

Render Individual Columns For each column, define a method column_{column_name}($item) to control how data should be rendered.

public function column_name( $item ) {
    return esc_html( $item->name );
}

Full code of the instance that extends WP_List_Table :

<?php

namespace Samrat\Demo;

if ( ! class_exists( 'WP_List_Table' ) ) {
    require_once ABSPATH . 'wp-admin/includes/class-wp-list-table.php';
}

use WP_List_Table;

class MyCustomListTable extends WP_List_Table {

    public function __construct() {
        parent::__construct( array(
            'singular' => __( 'Item', 'domain_name' ),
            'plural'   => __( 'Items', 'domain_name' ),
            'ajax'     => false,
        ) );
    }

    /**
     * Define the columns displayed in the table.
     *
     * @return array
     */
    public function get_columns() {
        return array(
            'name'  => esc_html__( 'Name', 'domain_name' ),
            'email' => esc_html__( 'Email', 'domain_name' ),
        );
    }

    /**
     * Render the Name column.
     *
     * @param object $item
     * @return string
     */
    public function column_name( $item ) {
        return esc_html( $item->name );
    }

    /**
     * Render the Email column.
     *
     * @param object $item
     * @return string
     */
    public function column_email( $item ) {
        return esc_html( $item->email );
    }

    /**
     * Prepare table data, columns, and pagination.
     */
    public function prepare_items() {
        global $wpdb;
        $table_name = $wpdb->prefix . 'custom_form';

        $data = $wpdb->get_results( "SELECT * FROM {$table_name} ORDER BY created_at DESC" );

        // Define column headers
        $columns  = $this->get_columns();
        $hidden   = array();
        $sortable = array(); // Add sortable columns if needed

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

        $this->items = $data;
    }
}

Result:

Thank you for reading this article. :)

DEV Community

WP_List_Table in WordPress

Top comments (0)