Drupal 8 Table With Sortable Column And Pagination

Posted on: 11 September 2016
By: admin

In Drupal 8 module development, we can easily create a table with pager. The code might be different from the one we use in Drupal 7, but it's still quite simple. I assume you have already learned to create a simple Drupal 8 "Hello World!" module as explained in there. So, let's start to create the table with pager. For example, we have a routing file, mydemo.routing.yml like the following.

mydemo.pager:
  path: '/mydemo/pager'
  defaults:
    _controller: 'Drupal\mydemo\Controller\Table::pager'
    _title: 'Table With Pager'
  requirements:
    _permission: 'access content'

As we see in that code, we can view final result later from the mydemo/pager path. But before that, we need to create a Controller class which will display the table with pager. Besides the pager, we will also make this table to be sortable by clicking one of it's column.

Let's continue. The Controller filename will be Table.php and we will put it in src/Controller folder. Here is the code.

/**
 * @file
 * Contains \Drupal\mydemo\Controller\Table
 */
namespace Drupal\mydemo\Controller;
 
use Drupal\Core\Controller\ControllerBase;
 
class Table extends ControllerBase {
  public function pager() {
    $header = array(
      // We make it sortable by name.
      array('data' => $this->t('Name'), 'field' => 'name', 'sort' => 'asc'),
      array('data' => $this->t('Content')),
    );
 
    $db = \Drupal::database();
    $query = $db->select('config','c');
    $query->fields('c', array('name'));
    // The actual action of sorting the rows is here.
    $table_sort = $query->extend('Drupal\Core\Database\Query\TableSortExtender')
                        ->orderByHeader($header);
    // Limit the rows to 20 for each page.
    $pager = $table_sort->extend('Drupal\Core\Database\Query\PagerSelectExtender')
                        ->limit(20);
    $result = $pager->execute();
 
    // Populate the rows.
    $rows = array();
    foreach($result as $row) {
      $rows[] = array('data' => array(
        'name' => $row->name,
        'content' => '[BLOB]', // This hardcoded [BLOB] is just for display purpose only.
      ));
    }
 
    // The table description.
    $build = array(
      '#markup' => t('List of All Configurations')
    );
 
    // Generate the table.
    $build['config_table'] = array(
      '#theme' => 'table',
      '#header' => $header,
      '#rows' => $rows,
    );
 
    // Finally add the pager.
    $build['pager'] = array(
      '#type' => 'pager'
    );
 
    return $build;
  }
}

Now, we can enable this module and see the result. The source code in this tutorial is available for download in the attachment section below.