Welcome to another series on how to implement server-side pagination efficiently in Appsmith. In this series, we’ll look at implementing server-side pagination using MongoDB in Appsmith.
Generally, implementing server-side pagination, regardless of the data source in question, largely involves not relying on the abilities of the Table Widget provided by Appsmith. In simple terms, it means you have control over the following:
- The number of rows you decide to render per page.
- You get to manually implement how you want data to be traversed in your table while searching.
- Limit or provide extra filtering capabilities based on the data in your table.
In this first part, we’ll set up our application, connect it to our MongoDB data source, and leave Appsmith to paginate the data for us. In the next parts of this series, we’ll then pick each of the above-listed functionalities and implement them one after the other.
Setting up the App
- In my application, I’ve created a data source that connects to a database called sample_mflix. We’re using the free cluster of MongoDB atlas for this sample app. For instructions on how to connect your app to a MongoDB, see here — https://docs.appsmith.com/reference/datasources/querying-mongodb#connect-to-mongodb-datasource.
- Drag a table to your canvas (It should look like the image below by default).
- Create a query that retrieves data from your database, then go ahead to connect this query to your Table. In my application, I’ve created a query called `fetch_Comments` that retrieves 100 documents from a collection called `comments`. This query is set to run on page load so that the Table can be prepopulated whenever our page loads for the first time or after any refresh.
- Right now, you should see your data have been displayed in the table with the ability to view them in pages, search them and filter through as well.
This is not the best approach when dealing with large data sets, as it might slow down our app drastically. The best approach to this is to make use of server-side pagination. In the next part of this series, we’ll be diving into how to do this in Appsmith.
See you in the next part!!!
