--- title: Building a Paginated, Sortable Table in React with MobX description: A hands-on walkthrough builds a reusable React table component that handles server-side pagination and column sorting using MobX for state management, without... canonical: https://daily.dev/posts/building-a-paginated-sortable-table-in-react-with-mobx-86v3ajhsw twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Building a Paginated, Sortable Table in React with MobX | daily.dev og:description: A hands-on walkthrough builds a reusable React table component that handles server-side pagination and column sorting using MobX for state management, without... og:url: https://daily.dev/posts/building-a-paginated-sortable-table-in-react-with-mobx-86v3ajhsw og:image: https://api.daily.dev/og/posts/86V3AjHsW.png og:image:alt: Building a Paginated, Sortable Table in React with MobX og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Building a Paginated, Sortable Table in React with MobX **[Sergio Lema](https://daily.dev/sources/sergiolema-dev)** · 8 min read · 15 upvotes · 3 comments ## Summary A hands-on walkthrough builds a reusable React table component that handles server-side pagination and column sorting using MobX for state management, without relying on a third-party table library. It covers a base Table component, a PaginationStore built with makeAutoObservable, a Pagination component wired to the store, and a full UserList example that fetches paginated, sorted data from an API. Filtering and autocomplete search are noted as the next installment in the series. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I implement server-side pagination and sorting in a React table without using a table library? Create a MobX observable PaginationStore holding currentPage, maxPages, sortByColumnIndex, and sortOrder, then pass it into a Table component wrapped with mobx-react-lite's observer. The table's header cells call store.setSort on click, and a separate Pagination component reads store.currentPage and store.maxPages to enable or disable navigation buttons, triggering a refetch whenever those observables change. _daily.dev surfaces more patterns like this for developers wiring custom data grids with MobX._ ### Why should I use server-side pagination instead of loading all rows into a React table at once? Fetching only one page of data at a time keeps browser memory usage and response times low, since large datasets are never fully loaded into the client. The backend returns just the requested page along with total page count, letting the frontend render a fixed, small number of rows regardless of how large the full dataset grows. _Developers weighing client-side versus server-side table strategies can track approaches like this on daily.dev._ ## Community discussion Top comments from developers on daily.dev. **@mikesniegovsky** · 0 upvotes > That's cool, but why use `useEffect` when you can use `computed` from MobX? It looks a bit like a waste of potential. From experience, I know that you get much better performance when the entire state, selectors, and side effects are handled by MobX. **@bob72** · 0 upvotes > Kinda interesting that syntax highlighting is very minimal there. Reminded me about the times when I was writing code in notepad or needed to update a script on a remote server where nothing installed but vi, pretty cool skill being able to read code like that. **@ristotoldsep** · 0 upvotes > Server-side sorting without a giant table package? Nice, honestly. ## Similar posts on daily.dev - [Medium](https://daily.dev/posts/medium-3pxcxwtng) · Medium · 0 upvotes · 0 comments - [Build a headless table engine in Vue 3](https://daily.dev/posts/build-a-headless-table-engine-in-vue-3-nbnigh8la) · LogRocket · 4 upvotes · 0 comments - [Sortable Tables with Progressive Enhancement :: Aaron Gustafson](https://daily.dev/posts/sortable-tables-with-progressive-enhancement-aaron-gustafson-tjo6h9n90) · Aaron Gustafson · 1 upvotes · 0 comments - [How to build a sales dashboard on a million real rows in React DataGrid](https://daily.dev/posts/how-to-build-a-sales-dashboard-on-a-million-real-rows-in-react-datagrid-omh9sxwju) · DEV · 1 upvotes · 0 comments - [Building an Optimistic UI Task App with React 19 and Next.js](https://daily.dev/posts/building-an-optimistic-ui-task-app-with-react-19-and-next-js-7j4u3qvmm) · Syncfusion · 1 upvotes · 0 comments --- Tags: [#react](https://daily.dev/tags/react), [#typescript](https://daily.dev/tags/typescript) [View this post on daily.dev](https://daily.dev/posts/building-a-paginated-sortable-table-in-react-with-mobx-86v3ajhsw) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Building a Paginated, Sortable Table in React with MobX","url":"https://daily.dev/posts/building-a-paginated-sortable-table-in-react-with-mobx-86v3ajhsw","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/building-a-paginated-sortable-table-in-react-with-mobx-86v3ajhsw"},"datePublished":"2026-09-21T05:04:03.902Z","dateModified":"2026-09-21T05:04:38.601Z","description":"A hands-on walkthrough builds a reusable React table component that handles server-side pagination and column sorting using MobX for state management, without...","image":"https://i0.wp.com/sergiolema.dev/wp-content/uploads/2026/05/pexels-photo-31896555.jpeg?fit=1200%2C800&ssl=1","thumbnailUrl":"https://i0.wp.com/sergiolema.dev/wp-content/uploads/2026/05/pexels-photo-31896555.jpeg?fit=1200%2C800&ssl=1","isAccessibleForFree":true,"articleSection":"Sergio Lema","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Sergio Lema","logo":"https://media.daily.dev/image/upload/s--SxVeO2EZ--/f_auto,q_auto/v1774964060/logos/sergiolema-dev?_a=BAMAMiWQ0","url":"https://daily.dev/sources/sergiolema-dev"},"commentCount":3,"discussionUrl":"https://daily.dev/posts/building-a-paginated-sortable-table-in-react-with-mobx-86v3ajhsw","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":15},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":3}],"keywords":"react,typescript","timeRequired":"PT8M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Sergio Lema","item":"https://daily.dev/sources/sergiolema-dev"},{"@type":"ListItem","position":3,"name":"Building a Paginated, Sortable Table in React with MobX"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/building-a-paginated-sortable-table-in-react-with-mobx-86v3ajhsw","comment":[{"@type":"Comment","text":"That’s cool, but why use useEffect when you can use computed from MobX? It looks a bit like a waste of potential. From experience, I know that you get much better performance when the entire state, selectors, and side effects are handled by MobX.","datePublished":"2026-09-21T09:34:26.640Z","url":"https://daily.dev/posts/86V3AjHsW#c-99OVFLVOU","author":{"@type":"Person","name":"Michał","url":"https://daily.dev/mikesniegovsky","image":"https://avatars.githubusercontent.com/u/25125099?v=4"}},{"@type":"Comment","text":"Kinda interesting that syntax highlighting is very minimal there. Reminded me about the times when I was writing code in notepad or needed to update a script on a remote server where nothing installed but vi, pretty cool skill being able to read code like that.","datePublished":"2026-09-21T20:25:57.335Z","url":"https://daily.dev/posts/86V3AjHsW#c-Z0H5XSz7y","author":{"@type":"Person","name":"Bob","url":"https://daily.dev/bob72","image":"https://avatars.githubusercontent.com/u/193962566?v=4"}},{"@type":"Comment","text":"Server-side sorting without a giant table package? Nice, honestly.","datePublished":"2026-09-25T08:18:06.330Z","url":"https://daily.dev/posts/86V3AjHsW#c-UxFshsY53","author":{"@type":"Person","name":"Risto Tõldsep","url":"https://daily.dev/ristotoldsep","image":"https://lh3.googleusercontent.com/a/ACg8ocLDWc6mZn0JwNmXXw6WY0L_HJ6pegzRttooC5VgtXESHSj3MNYx=s96-c"}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/building-a-paginated-sortable-table-in-react-with-mobx-86v3ajhsw#faq","mainEntity":[{"@type":"Question","name":"How do I implement server-side pagination and sorting in a React table without using a table library?","acceptedAnswer":{"@type":"Answer","text":"Create a MobX observable PaginationStore holding currentPage, maxPages, sortByColumnIndex, and sortOrder, then pass it into a Table component wrapped with mobx-react-lite's observer. The table's header cells call store.setSort on click, and a separate Pagination component reads store.currentPage and store.maxPages to enable or disable navigation buttons, triggering a refetch whenever those observables change. daily.dev surfaces more patterns like this for developers wiring custom data grids with MobX."}},{"@type":"Question","name":"Why should I use server-side pagination instead of loading all rows into a React table at once?","acceptedAnswer":{"@type":"Answer","text":"Fetching only one page of data at a time keeps browser memory usage and response times low, since large datasets are never fully loaded into the client. The backend returns just the requested page along with total page count, letting the frontend render a fixed, small number of rows regardless of how large the full dataset grows. Developers weighing client-side versus server-side table strategies can track approaches like this on daily.dev."}}]} ```