DEV Community

MD. Samrat Hossen
MD. Samrat Hossen

Posted on

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:

  1. 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' ) );
Enter fullscreen mode Exit fullscreen mode
  1. 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();
Enter fullscreen mode Exit fullscreen mode
  1. 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;

  1. 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' ), ); }
Enter fullscreen mode Exit fullscreen mode
  1. 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 ); }
Enter fullscreen mode Exit fullscreen mode

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; } }
Enter fullscreen mode Exit fullscreen mode

Result:

Thank you for reading this article. :)

Top comments (0)