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 😄

[ladderschool]

Genius! This has worked well I wish this could be an option in the official library

[harryheman]

Here if (numDataRowsOnCurrentPage === pageSize) { you also need to check that there are rows left using && rows[i + 1]. Otherwise you can get pages = [Array(10), Array(0)], for example.

[harryheman]

Removing group headers from the row count is a bad idea, 'cause it conflicts with many internal states of react table. You can use paginateExpandedRows option to exclude expanded rows from pagination:

const tableInstance = useTable({
    columns,
    data: tableData,
    enableGrouping: true,
    enablePagination: true,
    paginateExpandedRows: false,
  });

[harryheman]

If group header rows are ignored, there might be a situation when all such rows will be rendered on the first page (if all such rows are collapsed).

[barry166]

There is no built-in option for “page size counts only leaf rows, but group header rows do not count”. Group headers are rows in the row model, and getPaginationRowModel() slices rowModel.rows by pageSize, so grouped rows count toward the page.

paginateExpandedRows: false is related, but it only changes how expanded subRows are handled after pagination; it does not make grouping header rows free. If you need 10 data rows plus whatever group headers are needed to display them, the practical options are to paginate before grouping, use server-side/manual pagination, or provide a custom getPaginationRowModel that slices by leaf rows instead of top-level rows.