T
TanStack•7mo ago
other-emerald

Preventing pagination calculation on first render

I am storing pagination state for the table in query params and there is a problem with first render of the table where I render skeletons placeholders when data is first loading and this causes the pagination state to reset and it probably doing the recalucation of pagination for first render and then for new data. When i use this approach from the github discussion 
const tableData = useMemo(
    () =>
      isInitialLoading
        ? (Array(state?.pagination?.pageSize || PAGE_SIZES[0]).fill({}) as T[])
        : data,
    [isInitialLoading, data, state?.pagination?.pageSize],
  );

const table = useReactTable({
    data: tableData,
...
})
const tableData = useMemo(
    () =>
      isInitialLoading
        ? (Array(state?.pagination?.pageSize || PAGE_SIZES[0]).fill({}) as T[])
        : data,
    [isInitialLoading, data, state?.pagination?.pageSize],
  );

const table = useReactTable({
    data: tableData,
...
})
If I instead just do data directly the pagination state does not restart 
const table = useReactTable({
    data,
...
})
const table = useReactTable({
    data,
...
})
Is there any way to prevent onPaginationChange or any other calculation on the first render with skeletons approach ??
2 Replies
other-emerald
other-emeraldOP•7mo ago
Well I didnt find a way in table to accommodate for this case and instead of playing with data that is being passed to the table on inital loading I inject skeleton html markup directly instead 
const tableData = useMemo(() => data || [], [data]);
const table = useReactTable({
    data: tableData,
    ...
});
const tableData = useMemo(() => data || [], [data]);
const table = useReactTable({
    data: tableData,
    ...
});
<tbody>
...
{isInitialLoading && Array(state?.pagination?.pageSize || PAGE_SIZES[0])
                .fill(0)
                .map((_, rowIndex) => (
                  <tr key={rowIndex}>
                    {Array(columns.length)
                      .fill(0)
                      .map((_, colIndex) => (
                        <td key={colIndex} className="p-2">
                          <Skeleton />
                        </td>
                      ))}
                  </tr>
                ))}
</tbody>
<tbody>
...
{isInitialLoading && Array(state?.pagination?.pageSize || PAGE_SIZES[0])
                .fill(0)
                .map((_, rowIndex) => (
                  <tr key={rowIndex}>
                    {Array(columns.length)
                      .fill(0)
                      .map((_, colIndex) => (
                        <td key={colIndex} className="p-2">
                          <Skeleton />
                        </td>
                      ))}
                  </tr>
                ))}
</tbody>
grumpy-cyan
grumpy-cyan•7mo ago
Not sure I understand the full issue but, i had a similar problem with pagination resetting and the fix for me was 
autoResetPageIndex: false,
autoResetPageIndex: false,
(useTable parameter)

Did you find this page helpful?