How to Create Form Table with pagination in Drupal 8

Parent Feed: 

There are scenarios, where you will have a lot of users. In such an instance , if we display all the users in single page, it will mess with the user experience, to scroll through such a long list. By using Drupal pagination we can display the configured number of users in the single page.

In one of the previous blogs, we learnt how to create a Drupal table form, in this blog we will learn about creating the form table with Drupal pagination. When completed and configured with 10 users, the form can look like the below image.

Table Form with pagination d8.png

Follow the below steps to create a configured user list with Drupal pagination

Step 1:

Get the data:

The first thing we need to do is to get the data which we will use in our table. This will be entirely dependent on what data it is that you want to show. The table shown above is displaying user info from the database. In this case, by using drupal db_select I’m fetching user detail and creating the array

    As you can see, fetching rows data from the database and putting them in the array format

Step 2:

Build the header The next thing we need to do is put together an associative (keyed) array defining the header of the table. The keys here are important as we will be using them later in this blog. The table we are building here has four cells in the header - one for the checkbox column, one for userid, one for username and another for email. However, we can ignore the cell for the checkbox column, as Drupal will take care of this for us later. As such, we can build our header as follows:

Step 3:

Build the data

Next, we need to build the array that will contain the data of the table. Each element in the array will correspond to one row in the HTML table we are creating. Each element of the array will be given a unique ID. This will be the value of the checkbox when the form is submitted (if selected). In this case, we want to get the UID of the user, so each row will be keyed with the UID of the user. We then, will key the cells of the table with the keys we used for the header.

Step 4:

Form Table

So now we have built a header ($header), and the rows of the table ($options). Create a simple drupal form and bring it all together. Drupal 8 has a nice little theme function that we will use for this, theme_tableselect(). theme_tableselect() takes the data, turns it into a table, adds a checkbox to each row, and adds a 'select all' checkbox to the header. Handy! So let’s look at how to tie this all together:   

That's it. This is a simple table form with the list of user from the database with drupal pagination.

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web