T
TanStack•11mo ago
adverse-sapphire

How to properly filter data in tanstack table?

const orders = useGetManagerOrders(
    {
      page: pagination.pageIndex + 1,
      per_page: perPage,
      status_id: statusId
    },
    {
      query: {
        queryKey: ['orders', pagination, statusId],
        placeholderData: keepPreviousData,

        initialData: initialData,
        refetchOnMount: false
      },
      request: {
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
          Authorization: `Bearer ${session?.token}`
        }
      }
    }
  );

  const defaultData = React.useMemo(() => [], []);

  const table = useReactTable({
    columns,
    data: orders.data?.data.data ?? defaultData,
    rowCount: orders.data?.data?.meta?.total ?? 0,
    state: {
      pagination
    },
    onPaginationChange: setPagination,
    getCoreRowModel: getCoreRowModel(),
    manualPagination: true
  });
const orders = useGetManagerOrders(
    {
      page: pagination.pageIndex + 1,
      per_page: perPage,
      status_id: statusId
    },
    {
      query: {
        queryKey: ['orders', pagination, statusId],
        placeholderData: keepPreviousData,

        initialData: initialData,
        refetchOnMount: false
      },
      request: {
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
          Authorization: `Bearer ${session?.token}`
        }
      }
    }
  );

  const defaultData = React.useMemo(() => [], []);

  const table = useReactTable({
    columns,
    data: orders.data?.data.data ?? defaultData,
    rowCount: orders.data?.data?.meta?.total ?? 0,
    state: {
      pagination
    },
    onPaginationChange: setPagination,
    getCoreRowModel: getCoreRowModel(),
    manualPagination: true
  });
there is such a code, initialData I get from outside the component in which this code is called at the server level. The problem is that when statusId changes, I have a data fetch and during their loading, it seems that the data from initialData is shown, that is, incorrect, after successful loading everything is fine, but this "blink" of false data worries me. If I remove initialData and placeholderData, then everything is ok, but then the entire table is cleared, since there is no data. How can I solve this problem? Perhaps I initially used the wrong approach, but it seems that placeholderData: keepPreviousdata is needed just to solve this problem.
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?