How to create pager in drupal 8/9 for custom data set

Sometimes we need to create a pager for custom data sets, such as retrieving specific types of nodes and applying a filter on top of them to get the expected data set.

Here, I am going to create a custom Drupal module with the name pager_example, which will create a pager for a custom data set.

I am going to register a path where we will be showing a page with a pager using a custom data set. For that, I am going to create a routing file with the name pager_example.routing.yml which will have the following snippet.

    pager_example.subscriptions:
    path: '/subscriptions' 
    defaults: 
      _controller: '\Drupal\pager_example\Controller\SubscriptionsController::getSubscriptions' 
    requirements:
      _permission: 'access content'
  

Let's create a Controller for the route mentioned above.

    namespace Drupal\pager_example\Controller;

    use Drupal\Core\Controller\ControllerBase;

    /**
     * Subscriptions controller.
     */
    class SubscriptionsController extends ControllerBase {

      /**
       * Subscriptions page.
       */
      public function getSubscriptions(): array {

        // Custom data set of subscriptions.
        $subscriptions = [
          ['title' => 'Title one', 'start_date' => '08/Jun/2021', 'end_date' => '08/Jun/2022'],
          ['title' => 'Title two', 'start_date' => '10/Jun/2021', 'end_date' => '10/Jun/2022']
          ['title' => 'Title three', 'start_date' => '11/Jun/2021', 'end_date' => '11/Jun/2022']
          ['title' => 'Title four', 'start_date' => '12/Jun/2021', 'end_date' => '12/Jun/2022']
          ....
          ['title' => 'Title n', 'start_date' => '13/Jun/2021', 'end_date' => '13/Jun/2022']
        ];


        $build['page'] = [
          '#theme' => 'subscriptions',
          '#data' => $this->buildPager($subscriptions, 10),
          '#cache' => [
            'max-age' => 0,
          ],
        ];

        // Create pager
        $build['pager'] = [
          '#type' => 'pager',
        ];
        return $build;
      }

      /**
       * Build custom pager.
       */
      private function buildPager($result, $limit = 10) {
        $total = count($result);
        // Initialize pager and gets current page.
        /* @var $pager_manager \Drupal\Core\Pager\PagerManagerInterface */
        $pager_manager = \Drupal::service('pager.manager');
        $current_page = $pager_manager->createPager($total, $limit)->getCurrentPage();
        // Split the items up into chunks:
        $chunks = array_chunk($result, $limit);
        // Get the items for our current page:
        return $chunks[$current_page];
      }

    }
  

We need a template to show the data in tabular format along with pager, let's create pager_example.module and add below snippet:

    /**
     * Implements hook_theme().
     */
    function pager_example_theme($existing, $type, $theme, $path) {
      return [
        'subscriptions' => [
          'variables' => [
            'data' => NULL
          ],
        ],
      ];
    }
  

Now we need to add a twig template called subscriptions.html.twig:

    <div class="view">
      <div class="view-content">
        <div class="table-responsive">
          <table class="table"><thead>
            <tr>
              <th >Name</th>
              <th >Start date</th>
              <th >End date</th>
            </tr>
            </thead>
            <tbody>
            {% for subscription in data %}
              <tr>
                <td>{{subscription.title}}</td>
                <td>{{subscription.start_date}}</td>
                <td>{{subscription.end_date}}</td>
              </tr>
            {% endfor %}
            {% if content is empty %}
              <tr>
                <td colspan="3">No subscription found!</td>
              </tr>
            {% endif %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  

We've got everything set up; navigate to /subscriptions in the browser to see a custom data set with a pager.