Create Table with remote sorting, pagination, filtering

Question

I am really new in react / redux.

I have read and studied all the documentation and examples, now I'm trying to create a table (not fixed-data-table), that the data collected from the server, allows me to perform paging, sorting and filtering content.

Unfortunately I have no idea how to proceed, and I can not find examples useful to understand how to do.

There is someone who could give me some examples in order to build these components and that they can communicate via redux?

Answer 1

Thinking in React is a great guide aimed at getting you comfortable with React state model. It explains how to build a table with filtering, but sorting can be implemented in a similar way. This example doesn’t use Redux, but a Redux implementation would be similar, with the exception that the state would be managed by reducers instead of the top-level component.

To make filtering and sorting efficient in Redux, it is usually combined with memoization. Computing Derived Data shows how you can use Reselect to create composable data selectors that can filter and sort it.

As for pagination, the real-world example in Redux repo shows how to implement it. It requires a deeper understanding of topics such as state normalization so don’t jump into it too soon. But the basic idea is to store the rows separately from a list of their IDs, and use a data structure like { ids: array, isFetching: bool, nextPageUrl: string? } to represent the pagination state.