This project is a quickbits showcase of various pagination techniques, including cursor based pagination and offset based pagination. This article has an excellent rundown of the two types.
Pagination (and sorting and filtering) often needs to be handled server side, because users in the finance industry are typically working with very large data sets. If you have hundreds of thousands, or millions, of rows of data available to explore, it's not practical to send all of that data to a client application all at once. Not only will the data set itself be a large amount of data to send over the wire, not all UIs can work effeciently with that data. AG Grid is very sophisticated and can handle large data sets on the client, but AG Grid also provides tools to interact with an API to query paginated data.
In this demo, we're using the AG Grid Server-Side Row Model to do just that.
This is a Next.js project bootstrapped with create-next-app.
Clone this repository, npm install, npm run dev, and you're ready to get going:
git clone git@github.com:lab49/quickbits-recoil-atom-family.git
npm i
npm run dev- Install postgres DB
- Create a database and run the query written in the file
add-db-records.sqllocated in the root of this project to create test data. - Create one file in the project root called
.env.local. - Add the following line to that file and replace the strings
db_username,db_password,port_numberanddb_namewith your local database configuration.
DATABASE_URL = postgresql://db_username:db_password@localhost:port_number/db_name
Open http://localhost:3000 in your browser to get started!