React table with pagination counts grouped rows as rows

[jmacboy]

I have a table with 10 rows, it has pagination and grouping enabled and pageSize is 10 also.

I have 3 groups set up on the table.
1st group has 2 rows
2nd group has 1 row
3rd group has 4 rows

The sum of the group rows is 7, but still it fills the entire first page because of the grouping (3 grouping rows) and shows the other 3 missing rows on the second page.
Is there something I need to enable to remove group headers from the row count for one page?

[ashacs]

I'm running into the same issue, but based on the documentation's row grouping sandbox I wonder if that's the library's intended behavior 😞 The default page size is 10, and when you "group by age" it displays 10 grouping rows rather than 10 data rows within the first grouping:

I haven't been able to find any option to change that behavior. But the issue seems to be coming from the row slicing done in react-table's getPaginationRowModel.ts. So in my project I've made a custom getPaginationRowModel which rather than a simple slice has logic to NOT count rows toward the page size if their getIsGrouped() returns true.

Specific docs that were helpful for me:

• https://tanstack.com/table/v8/docs/api/features/grouping#row-api
• https://tanstack.com/table/v8/docs/api/features/pagination#getpaginationrowmodel

[JORDAAAN1495]

Hey @ashacs, I'm running into this same behavior, would it be possible to provide an example of what you done to work around this please? Many thanks!

[ashacs]

hi @JORDAAAN1495 👋 I copy pasted the implementation of Tanstack's getPaginationRowModel into my own function which I supply to useTable. But in my implementation I replaced Tanstack's slicing logic:

table/packages/table-core/src/utils/getPaginationRowModel.ts

Lines 22 to 27 in f7e69bc

	const { pageSize, pageIndex } = pagination
	let { rows, flatRows, rowsById } = rowModel
	const pageStart = pageSize * pageIndex
	const pageEnd = pageStart + pageSize
	rows = rows.slice(pageStart, pageEnd)

to instead only count a row toward the page size if the row is NOT a grouped row:

const { pageSize, pageIndex } = pagination;
const { rows: rawRows, flatRows, rowsById } = rowModel;

const pages = getGroupingCompatiblePages({ rows: rawRows, pageSize });
const rows = pages[pageIndex];

Where the implementation of that getGroupingCompatiblePages helper function is:

/**
 * Given a set of rows and a page size, slice the rows into pages of data that
 * is compatible with grouping. For example: if the `pageSize` is 5 and `rows`
 * contains a grouping row plus 10 rows of data, this function will return 2
 * pages of data where the first page contains the grouping row plus 5 rows of
 * data.
 *
 * This is used by `getPaginationRowModel` to fix a bug in the underlying
 * library where grouping rows were counted towards the total page size.
 */
export function getGroupingCompatiblePages<TData>(args: Args<TData>) {
  const { rows, pageSize } = args;

  const pages: Row<TData>[][] = [[]];

  let currentPageIndex = 0;
  let numDataRowsOnCurrentPage = 0;

  for (let i = 0; i < rows.length; i++) {
    // we haven't reached the page size limit yet, so always push the next
    // row onto the current page
    const row = rows[i];
    pages[currentPageIndex].push(row);

    // if the row is a data row and not a grouped row, then it should
    // contribute to the current page's page size
    if (!row.getIsGrouped()) {
      numDataRowsOnCurrentPage++;
    }

    // if we've now reached the page size limit, then proceed to the next
    // page index and reset our page size counter
    if (numDataRowsOnCurrentPage === pageSize) {
      currentPageIndex++;
      pages[currentPageIndex] = [];
      numDataRowsOnCurrentPage = 0;
    }
  }

  return pages;
}

[JORDAAAN1495]

hi @JORDAAAN1495 👋 I copy pasted the implementation of Tanstack's getPaginationRowModel into my own function which I supply to useTable. But in my implementation I replaced Tanstack's slicing logic:

table/packages/table-core/src/utils/getPaginationRowModel.ts

Lines 22 to 27 in f7e69bc

	const { pageSize, pageIndex } = pagination
	let { rows, flatRows, rowsById } = rowModel
	const pageStart = pageSize * pageIndex
	const pageEnd = pageStart + pageSize
	rows = rows.slice(pageStart, pageEnd)

to instead only count a row toward the page size if the row is NOT a grouped row:

const { pageSize, pageIndex } = pagination;

const { rows: rawRows, flatRows, rowsById } = rowModel;



const pages = getGroupingCompatiblePages({ rows: rawRows, pageSize });

const rows = pages[pageIndex];

Where the implementation of that getGroupingCompatiblePages helper function is:

/**

 * Given a set of rows and a page size, slice the rows into pages of data that

 * is compatible with grouping. For example: if the `pageSize` is 5 and `rows`

 * contains a grouping row plus 10 rows of data, this function will return 2

 * pages of data where the first page contains the grouping row plus 5 rows of

 * data.

 *

 * This is used by `getPaginationRowModel` to fix a bug in the underlying

 * library where grouping rows were counted towards the total page size.

 */

export function getGroupingCompatiblePages<TData>(args: Args<TData>) {

  const { rows, pageSize } = args;



  const pages: Row<TData>[][] = [[]];



  let currentPageIndex = 0;

  let numDataRowsOnCurrentPage = 0;



  for (let i = 0; i < rows.length; i++) {

    // we haven't reached the page size limit yet, so always push the next

    // row onto the current page

    const row = rows[i];

    pages[currentPageIndex].push(row);



    // if the row is a data row and not a grouped row, then it should

    // contribute to the current page's page size

    if (!row.getIsGrouped()) {

      numDataRowsOnCurrentPage++;

    }



    // if we've now reached the page size limit, then proceed to the next

    // page index and reset our page size counter

    if (numDataRowsOnCurrentPage === pageSize) {

      currentPageIndex++;

      pages[currentPageIndex] = [];

      numDataRowsOnCurrentPage = 0;

    }

  }



  return pages;

}

Hey @ashacs, many thanks for this 😄