A server side external sorting and filtering example

[matthewma7]

It would be great if we could have an example of server-side external sorting and filtering example

[vdelrio]

Hey, I'm looking for this too!

[ProdigyXY]

You can try this hack...pass the global filter value to your data fetch callback and then disable autoResetGlobalFilter https://react-table-v7.tanstack.com/docs/api/useGlobalFilter
useEffect(() => {
fetchData && fetchData({ pageIndex, pageSize, globalFilter });
}, [fetchData, pageIndex, pageSize, globalFilter]);

[Ajaay]

Same here - anyone had any joy? If I watch the table filters state in my useEffect hook and pass it to my fetchData callback I just get an infinite loop.

Also there isn't an equivalent 'manualFilter' of 'manualPagination' so I don't think it's implemented that way here.

[Ajaay]

It would help if I searched for manualFilters not manualFilter :)

I'll try knocking something up using this and let you know how I get on.

[himat]

I'm having trouble too, and ran into an infinite loop at one point, I posted this question, but didn't get a response yet #2068

[matthewma7]

Hi, thank you for your reply. I would like you guys to know that because I feel this library is focused on the client data source, in the end, I stopped using this library and use the react-window directly.

[adamrodrigues11]

The infinite loop might be caused by setting initalState.filters to an empty array that has not been memoized

[fnn]

1. Setup your table UI for sorting.
   <th {...column.getHeaderProps(column.getSortByToggleProps())}>
   and the other stuff you want to have in your UI.

2. Turn on manual sorting and get the sort state.

const {
    state: { sortBy }
  } = useTable(
    {
      columns,
      data,
      manualSortBy: true
    },
    useSortBy
  )

3. Fetch data on sortBy changes.

React.useEffect(() => {
    fetchData({ sortBy })
  }, [fetchData, sortBy])

Almost all plugins have a 'manual' property to build a controlled table.

[giacomoalonzi]

but this triggers a fetch data every time the table is loaded. There's no way to prevent the useEffect if the data are already been loaded.

[fnn]

Why can't you check if your data is already available inside the useEffect?

[saysmaster]

useEffect may run multiple times even if sortBy is not changed. Actually it fires twice before the user clicks on any header. I think, for a truly controlled sorting state the table hook should accept a setSortBy callback that would be fired only when actual change on sorting happens (through user interaction).

If using useEffect then any external fetching data or setting an external state, should be debounced to at least avoid excessive network requests. I think you can't avoid at least one request without the user having clicked a header though.

[stereobooster]

useEffect called twice only in dev mode.

And https://tanstack.com/query/latest can take care of caching data.

[armenic]

I was able to do server-side Global filtering. In essence I did not use any of the plugins that react-table provides (e.g. useGlobalFilter). The FAQ gives you a hint about how you can trigger data fetching. I also used the useAsyncDebounce, similar how it is used in the official client-side example. Hopefully the Gist can help you. I still think that authors (@tannerlinsley) should publish a good, simple example of server-side filtering, sorting. I really like the pagination example, excellent job!!! Thanks ahead for the time spent on a new example.

[jowens1]

I too would be absolutely thrilled to see a server-side sorting example by the authors.

[fcFn]

The gist is no longer accessible 😢 It was helpful.

[luiznasciment0]

pls republish the gist 🙏

[jpsuchy]

I myself was struggling with implementing a server-side sorting (data were a query to postgres) and came up with a solution that works perfectly but needs some writing.

In my case react-table is a reusable component, written in .tsx .

1. So, in the Table component a function was passed as an additional props:

export function Table({
  columns,
  data,
  onHeaderClick
}: {
  columns: Array<Column>;
  data: Array<object>;
  onHeaderClick: Function;
})

Setting manualSort is also crucial in this case:

const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(
    {
      columns,
      data,
      manualSortBy: true
    },
    useSortBy
  );

As well as setting the table UI itself for sorting:

<th {...column.getHeaderProps(column.getSortByToggleProps())}>

2. Because of adding an additional function that's triggered by the click on the header, the element had to be rewritten:

<th
  {...column.getHeaderProps(column.getSortByToggleProps())}
  onClick={() => onHeaderClick(column)}
>
  <div>
    <span>{column.render('Header')}</span>
    <span>
      {column.sortDirection === 'ASC' ? (
        <ArrowDropUp />
      ) : column.sortDirection === 'DESC' ? (
        <ArrowDropDown />
      ) : null}
    </span>
  </div>
</th>

Property sortDirection is custom and is a part of columns array (more in next steps).

3. In the component that uses previously exported Table I wrote a helper function that's triggered on the header cell:

<Table
  columns={columns}
  data={data}
  onHeaderClick={columnHeaderClick}
/>

Nextly, an additional useState necessary for the sort to work was added:

const [sort, setSort] = useState({ sortDirection: 'none', accessor: 'some_accessor' });

Now, the columns array which is usually passed to the table, now has objects with extra property sortDirection, eg. :

{
    Header: 'ID,
    accessor: 'client_id',
    sortType: 'basic',
    sortDirection: sort.accessor === 'client_id' ? sort.direction : 'none'
}

Object sort being held in state has a property named accessor which value may only be one of the column id's.

Now, the final step was writing the columnHeaderClick async function that takes care of changing the sort direction on the table as well as fetching sorted data and updating the table:

const columnHeaderClick = async (column: any) => {
    switch (column.sortDirection) {
      case 'none':
        setSort({ direction: 'ASC', accessor: column.id });
        const desc = await getClients( 'ASC', column.id );
        setData(desc);
        break;
      case 'ASC':
        setSort({ direction: 'DESC', accessor: column.id });
        const asc = await getClients('DESC', column.id);
        setData(asc);
        break;
      case 'DESC':
        setSort({ direction: 'none', accessor: column.id });
        const newData = await getClients('none', column.id);
        setData(newData);
        break;
    }
  };

And VOILA ! The table now has server side sorting and 'arrows' on the header behaving as expected :)

Hope that helps ;)

[Niks218]

In my case table is also separate component in which I pass dictionary of filter function like this

type FilterFunctionDict<T extends Record<string, unknown>> = Record<
  IdType<T>,
  (value?: FilterValue) => Promise<void> | void
>;

const filterFunctions = useMemo<FilterFunctionDict<User>>(
    () => ({
      created: (filterValue) =>
        setFilter((filter) =>
          filterValue
            ? { ...filter, createdFrom: filterValue[0], createdTo: filterValue[1] }
            : { ...filter, createdFrom: undefined, createdTo: undefined }
        ),
      privacyNotes: (filterValue) =>
        setFilter((filter) => ({ ...filter, privacyNotes: filterValue ? IncludeFlag.YES : IncludeFlag.ALL })),
    }),
    []
  );

and then trigger these function directly using state reducer

stateReducer: (newState, action, prevState) => {
    if (action.type === 'setAllFilters' && !action.filters.length) {
        Object.values(filterFunctions).forEach((fn) => fn());
    } else if (action.type === 'setFilter') {
        filterFunctions[action.columnId] && filterFunctions[action.columnId](action.filterValue);
    }

    return newState;
},

[PenguinDetective]

Might be something more specific to my use case, but using @fnn 's solution only worked partially for me. The reason was that react-table only add's an onClick event to the column header, if the column has a truthy canSort value. (https://react-table.tanstack.com/docs/api/useSortBy#column-properties)

However, the canSort value was by default falsy and can only be turned to truthy by setting all columns to be sortable:

const {
    state: { sortBy }
  } = useTable(
    {
      columns,
      data,
      manualSortBy: true
      defaultCanSort: true
    },
    useSortBy
  )

Or by specifically setting the canSort property on a column item

const column = [
	{
		Header: "Organization",
		accessor: "organization",
		canSort: true
	},
]

After that, I was finally able to trigger an onClick and listen for sortBy state updates.

(Dropping my 2 cents here as it didn't work for me otherwhise)

[joeyfigaro]

Any updates here for managing to get server-side global filtering (search) working? The gist mentioned above appears to no longer exist.

[srsandy]

Hey guys.

I tired the following for the server side pagination and filtering. Not sure how good the solution is. Hope this helps someone
https://gist.github.com/srsandy/033aeb3d3f5b0cba3553fe65b6c0de09
Feel free to add comments in the gist.

[osmancakir]

we really need this good example asap 🙏

[haihuynhngoc]

Here is an example that I just made today. I hope it can be useful for you.
There are only 2 points that we need to notice:

Firstly, we need to set manualSortBy to true in the useTable hook to tell react-table that we will handle sorting manually.
Secondly, we need to get the sortBy value from the table state, then use it as an argument for fetching new data.

Check my example on Codesanbox

Or you can also check the code below. I make it as simple as I can to reduce the complexity.

import React from "react";
import { useTable, useSortBy } from "react-table";
import { fetchUserList } from "./utils";

export default function App() {
  const [data, setData] = React.useState([]);
  const [isLoading, setLoading] = React.useState(false);

  const columns = React.useMemo(
    () => [
      {
        Header: "Name",
        accessor: "fullName"
      },
      {
        Header: "Age",
        accessor: "age"
      },
      {
        Header: "Status",
        accessor: "status"
      }
    ],
    []
  );

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
    // We need to get 'sortBy' from the table state, then use it as an argument to fetch new data
    state: { sortBy }
  } = useTable(
    {
      columns,
      data,
      // we need to tell react-table that we will handle sorting manually
      manualSortBy: true
    },
    useSortBy
  );

  React.useEffect(() => {
    setData([]);
    setLoading(true);
    fetchUserList({ sortBy })
      .then((response) => {
        setData(response);
      })
      .catch((err) => {
        console.log(err);
      })
      .finally(() => {
        setLoading(false);
      });
  }, [sortBy]);

  return (
    <>
      <table {...getTableProps()}>
        <thead>
          {headerGroups.map((headerGroup) => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map((column) => (
                // Add the sorting props to control sorting. For this example
                // we can add them into the header props
                <th {...column.getHeaderProps(column.getSortByToggleProps())}>
                  {column.render("Header")}
                  {/* Add a sort direction indicator */}
                  <span>
                    {column.isSorted
                      ? column.isSortedDesc
                        ? " 🔽"
                        : " 🔼"
                      : ""}
                  </span>
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {isLoading && <span>Loading..</span>}
          {rows.map((row, i) => {
            prepareRow(row);
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map((cell) => {
                  return (
                    <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
                  );
                })}
              </tr>
            );
          })}
        </tbody>
      </table>
    </>
  );
}

[NixBiks]

I tried to do something similar using latest react-table alpha but I'm getting an infnite loop when I have the following

  const [state, setState] = React.useState(instance.initialState);

  instance.setOptions((prev) => ({
    ...prev,
    state,
    onStateChange: setState,
  }));

  React.useEffect(() => {
    setData([]);
    setLoading(true);
    fetchData(state)
      .then((data) => {
        setData(data);
      })
      .catch((e) => console.error(e))
      .finally(() => setLoading(false));
  }, [state, fetchData]);

Did anyone succeed to do this in latest alpha?

[NixBiks]

It seems that resetting data will reset the state. E.g. see sorting example. If you refresh the data then you lose the sorting state. Is this not a bug?

[saysmaster]

If I am not mistaken, it is not a bug. This behavior is controlled by setting autoResetSortBy: false in the useTable props.

[emmaakachukwu]

Hi everyone. I have gone through everyone's comments here. I can't seem to find a solution for my issue. So basically I set manual prop to true because I was doing a server side pagination but then I want react to still handle the sorting for me. Any idea on how to achieve this please ? Here is a SO question for this. Thanks.

[HiLuLiT]

am i the only one thinking how come no one has used react-query with this? 🤣

[KevinVandy]

https://www.material-react-table.com/docs/examples/react-query

This is a component based on react table v8 with react query

[HiLuLiT]

@KevinVandy that's really cool! is there any good example with v7? haven't migrated yet

[Pete-Fowler]

I almost have a solution, but is there a way to stop the filter inputs from losing focus? It seems like the table's headerGroups are unmounted and re rendering from scratch each time new data is fetched and passed to React Table v7 via the columns prop.