Managing large datasets is a common challenge in web development, and pagination is a technique that helps overcome this hurdle. With Appsmith, developers have the option to implement server-side pagination or client-side pagination using the Table widget. While client-side pagination simplifies searching, it may not be efficient with large datasets. Server-side pagination, on the other hand, improves application performance and delivers faster response times. This article will focus on server-side pagination, explore how to efficiently paginate data, and perform search operations using PostgreSQL in Appsmith.
This article is divided into four parts which are:
- Introduction.
- Pagination.
- Search.
- Filtering.
Each part will be separated into its separate article.
Introduction
Within my workspace is an application named S.S.P. Postgres, which contains a table that needs to display 100 rows of data. The data is sourced from a posts table in my Postgres database, which I’ve created before. Before we progress, I’ll assume you have your app connected to a Postgres data source with a table where your data is stored. If you don’t know how to connect your app to a Postgres data source, see here on how to do that:
Writing our first Query!
- In the Queries pane of your application, create a new query from your initially created data source; in my application, I’ll call this Query_getPosts. This Query aims to get the 100 records from a particular table in your database, in my case, a posts table that contains 100 posts.
- Insert the following into the query editor:
"`SELECT * FROM posts ``` (don’t forget to replace posts with your table name if it’s different from what I have). - Locate the run button around the top right corner and click to run the Query. You should see some responses in the Response tab, as shown in the image below:
Displaying the data in a Table!
Now that we have our Query to return 100 posts from our posts table in our database, we want to display this data in a table.
- Drag a table widget to the canvas. By default, it should have dummy data displayed.
- In the Table settings on the right pane, set the table data to the data returned from your Query like so:
- You should have your data at this point! If you can’t see any data on your table, be sure that your Query returns any data in the first place by running the Query in the query editor. After that, refresh your application, and you should be fine (If you’re on a self-hosted instance, you might have to restart your application).
What’s next?
Right now, we’re dedicating the pagination of our data entirely to the Appsmith client-side paginator. For large data sets, this is not the best approach. Imagine we have to display 100,000 records in our table. Imagine how slow it could get if we had to fetch the entire data simultaneously.
In the next part, we’ll look at how to set up server-side pagination for our newly created application and the advantages of this approach.
See you in the next part!!!