3

0

By Krissanawat Kaewsanmuang Following Unfollow Follow   13,174 August 24, 2020 Following Unfollow Follow

Category:

JavaScript

Node.js

POS Tutorial

React

Create simple POS with React.js, Node.js, and MongoDB #13: Grouping, Sorting, Pagination

Defenition: POS – “Point of Sale”. At the point of sale, the merchant calculates the amount owed by the customer, indicates that amount, may prepare an invoice for the customer (which may be a cash register printout), and indicates the options for the customer to make payment.

In the previous chapter, we integrated react-table to our codebase and replaced the old table. We created a headless Table component so that we can import it to other components and use it easily. In this chapter, we are going to continue from where we left off from the previous chapter. Here, we are going to integrate grouping and sorting features to our react table along with pagination. Before we get started on integrating the respective features to the react-native, we need to work on moving the Table component and add it to the POS machine section. After adding it to the POS machine section, we are going to start with the Sorting feature first.

So, let us get started!

Sorting

In order to add a sorting filter to our react table, we are going to use useSortBy hook. This will handle the sorting task. Hence, we need to import it from the react-table package as directed in the code snippet below:

Then, we need to add it to our main function as displayed in the code snippet below:

Next, we need to attach the sort functionality to the table as directed in the code snippet below:

Hence, we will get the result as displayed in the demo below:

React table sorting result

Now, we are able to sort the table data based on table headers.

Grouping

For the Grouping feature, we need two hooks. They are useGroupBy and useExpanded which we need to import from the react-table as shown below:

Next, we need to attach them to the main method as highlighted in the code snippet below:

Now in order to use it in our table, we need to add it to the column header as directed in the code snippet below:

Hence, we will get the result as displayed in the following demo:

React table grouping result

Here, we can see the count number on each column entry after grouping.

Pagination

Integrating pagination into our table requires a lot of work. First, we need to seed some data to our database. But, first, we need to install the faker plugin. For installation, we need to run the following command in our project terminal:

Now in api_pos_machine.js, we import the faker plugin as shown in the code snippet below:

Next, we need to work on the function code which is meant to add a new row to the table. In that function, we need to add the code from the code snippet below in order to generate the seed data:

Here, we are iterating with limit 100 and adding a random word and uuid to the newPos object variable. The newPost is then added to the pos array.

After seeding the data, we are going to see tons of row on the table as displayed in the screenshot demo below:

Result for seed database

Now, we can start implementing pagination on our Table component.

First, we need to import usePagination hook from the react-table package as directed in the code snippet below:

Then, we need to add all pagination functions to our main function as highlighted in the code snippet below:

Now inside the table body, we need to change row map to page map as highlighted in the code snippet below:

Next, we need to add pagination control at the bottom of the table view. We can add plain pagination control using HTML only. But fortunately, we have a Bootstrap CSS framework providing us with a modern and intuitive style for pagination control. This will save us tons of time on design. Here, we have three-part of pagination control. First for navigating between screens which are forward and backward navigation. This can be implemented using code from the following code snippet:

Hence, we will get the result as displayed in the following demo:

React table pagination navigate result

We can notice that the page changes along with page number as we click on forward and backward buttons. Secondly, we need to add the pagination control for forms to select the page that we need to navigate to. This can be implemented using the code from the following code snippet:

Hence, we will get the result as shown in the demo below:

React table pagination select page result

Here, we can see that the page changes as we change the page number. Lastly, we need to add the pagination control to the page size. With this, we will be able to choose the number of rows that we need to see on the table. In order to implement this, we can use the code from the following code snippet:

Hence, we will get the result as displayed in the following demo.

React table pagination select page size

Now, we can choose the number of rows that we want displayed on the table. Finally, we have successfully integrated the sorting, grouping, and pagination control features into our Table component.

Conclusion

We made our table view more intuitive and power-packed in this tutorial. We got the detailed stepwise guidance on integrating the sorting, grouping, and pagination control to our react table. We have the use of hooks along with the faker plugin to integrate the sorting and grouping. For pagination, we used bootstrap for styling purposes and integrated pagination control three-ways. These features in our table will make it more dynamic and full-fledged.

The coding implementations used in this tutorial chapter are available on Github for both frontend and backend.

See you in the next chapter! Good day folks!

About the author

Krissanawat Kaewsanmuang

Registered 09-12-2019 | Last seen 3 years ago 79

3 Comments | 32 Publications