Would you like to be notified for every new articles? Please click HERE to subscribe for newsletter.

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.

  path: '/mydemo/pager'
    _controller: 'Drupal\mydemo\Controller\Table::pager'
    _title: 'Table With Pager'
    _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')
    // Limit the rows to 20 for each page.
    $pager = $table_sort->extend('Drupal\Core\Database\Query\PagerSelectExtender')
    $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.

Binary Data mydemo.tar.gz1.06 KB

Add new comment

Limited HTML

  • Allowed HTML tags: <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.