For this implementation, we have used useSWRhook to fetch data on the client side.

For the table, we have used a reusable component PaginationDataTable which contains our main table component DataTable created with @tanstack/table library.

For the page and search value, we have used query params instead of react states. As you change the page or search input value, the query params are updated accordingly and is used to fetch the data as necessary.

Remember that if we update the params the official way, it will cause a server request of the page. But we don't want that since the query params are used only inside the client components. So we need a way that the updating query params only cause the re-render of the client components that makes use of those values. It is quite hacky to get that functionality currently so, the implementation makes use of nuqs, a query param update library for NextJs. It supports shallow updates and can be used for both pages and app router.

That's all it takes to get one of the most common features for content display in the web world.