#Preventing pagination calculation on first render

3 messages · Page 1 of 1 (latest)

grand forge
#

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,
...
})

If I instead just do data directly the pagination state does not restart

const table = useReactTable({
    data,
...
})

Is there any way to prevent onPaginationChange or any other calculation on the first render with skeletons approach ??

grand forge
#

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,
    ...
});
<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>
wheat swan
#

Not sure I understand the full issue but, i had a similar problem with pagination resetting and the fix for me was

autoResetPageIndex: false,