Create a table with remote sorting, pagination, filtering

Question

I am really new to reaction / redux.

I read and studied all the documentation and examples, now I'm trying to create a table (not a fixed data table) that the data collected from the server allows me to pager, sort and filter the content,

Unfortunately, I have no idea how to proceed further, and I cannot find examples useful for understanding how to do this.

Is there someone who could give me some examples for creating these components and so that they can communicate through redux?

Answer 1

Thinking in Response is a great guide aimed at making you feel comfortable with the React state model. It explains how to create a table with filtering, but sorting can be done in a similar way. Redux is not used in this example, but the Redux implementation will be similar, except that reducers will be used to control the state instead of the top-level component.

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

Regarding pagination, the real-world example in the Redux repository shows how to implement it. This requires a deeper understanding of topics such as state normalization, so do not jump into it too soon. But the main idea is to store the strings separately from the list of their identifiers and use a data structure, for example { ids: array, isFetching: bool, nextPageUrl: string? } { ids: array, isFetching: bool, nextPageUrl: string? } to represent the pagination status.

Answer 2

I wrote a package called violet-paginator to handle pagination, sorting and filtering of any list. There are many ways to override the default assumptions made to communicate with the server, so it should work in most cases. It provides all the steps necessary to create your own pagination components, as well as many ready-made components, including pagination controls, sorting links, and data tables.