React-Table Filtering unexpected behavior : The table header is updated (and the filter itself) instead of updating just the data

user_1528702 0
Viewed 1418

I'm using React@16.13.1, React-Table@7.2.1 and Axios@0.19.2, to create a table with out of the box server side pagination and filtering. The pagination is working fine but I'm having some difficulties with the filtering. I have two default text filters that filter correctly (they get the correct info from the server), but I'm experiencing strange behaviours:

  • On key press, when the filtering is done (when the axios request gets an answer), the table is totally refreshed including the header where the filters are (and not only its results);
  • Since it refreshes the whole table, the textbox where the user was typing looses the focus, and forces the user to reselect the filter to introduce the second character.

For the filtering, I'm using the DefaultColumnFilter that React-Table offers:

function DefaultColumnFilter({ column: { filterValue, setFilter, id } }) {
  return (
    <input
      value={filterValue || ""}
      onChange={e => {
        setFilter(e.target.value || undefined)
      }}
      placeholder={`Rechercher ...`}
    />
  )
}

So, my questions are:

  • How can I stop the auto filtering after just one char is typed (I've tried to use a setTimeout, but couldn't set it to work correctly...)?
  • How to make it stop refreshing the whole table including the header?

I've created a sandbox with the relevant code here: https://codesandbox.io/s/mystifying-shape-3tbn7

react-table reactjs
1 Answers

We finally understood the problem. It was not related with react-table. React-table is perfectly capable of doing server-side filtering out-of-the-box.

The problem was here. We had:

// Render the UI for your table
if (pageLoading) return <Loading />

pageLoading was activated by filtering, and so we replaced it by:

// Render the UI for your table
if (loading) return <Loading />

We were 'erasing' the HTML of our table every time we used the filters. We were replacing the table by a loading bar '' at that moment.

Now we are using a different variable (loading) that is not activated by filtering. It works like a charm!

user_32318840
Related