Pagination not returning all MaterialReactTable values when sorting by a column with NULL values

[jvisint]

I have an interesting problem affecting multiple applications where MaterialReactTable rows are not displaying. This is occurring if a column is sorted that has NULL values. If the 1st page displayed has no NULL values and the 2nd page begins with NULL values (or 1st page has ALL NULL values, and following page do not), all the following pages will only display rows where that column is not NULL (if 1st page not NULL) or NULL (if the 1st page had all NULL values in the sorted column)

Example: If pagination is adjusted so the 1st page for sorted column shows both non-NULL and NULL values, then the following pages will show all the rows.

(next page shows more rows)

However, if I change pagination to 5 and move to page 2 - no further rows display.

Is this is known issue?

[jvisint]

..to confirm, if I remove the SORTING for column Lastname, I'm able to see the following rows with pagination 5:

(next page shows more rows)

[JerryNixon]

@Aniruddh25 Is this related? #2887

[jvisint]

I don't think so. My query is calling a procedure, but it is returning the total query count correctly each time. Example call and query format:

export function build_ABC_QUERY(id, sorting, searchTerm, filters) {
. . .
query get_abc($endCursor: String, $pageSize: Int, $sqlFilter: String, $sqlFilterString: String ) {
abc_views(after: $endCursor, first: $pageSize,
orderBy: {
${order_by_filter}
}
filter: {
${idVal}
${search_filter}
${filterString}
}) {
items {
column1
firstname
lastname
. . .
}
endCursor
}
executegetABCCount(
v_tablename: "abc_view",
v_id: "id",
v_search_filter: $sqlFilter,
v_filter_string: $sqlFilterString
) {
count
}
}
}

[aaronburtle]

Hi @jvisint will take a look at this and get back to you.

[jvisint]

This appears to possibly be related to using manualPagination vs native pagination in MaterialReactTable. I switch an application that was working properly to manualPagination and I'm now having the same problem with dropped rows if sorting by columns with NULLS.

EXAMPLE
--native pagination app sorting by Description (NULL 1st)

-->2nd page good:

However, when switching to manualPagination and all values on 1st page NULL the 2nd page will show no rows.

I added the following to my MaterialReactTable that resulted in the sorting problem happening....
rowCount={count}
state={{
pagination,
sorting,
}}
manualPagination={true}
onPaginationChange={setPagination}
onSortingChange={setSorting}
muiTablePaginationProps={{
showFirstButton: false,
showLastButton: false,
sx: Styles.wbMaterialReactStyles,
}}

I can confirm when I pass the endCursor returned by the 1st page as the 2nd page input, no results return and the endCursor returned is NULL, confirming the issue.

[jvisint]

Hi @jvisint will take a look at this and get back to you.

Aaron, any luck? My from research it appears my one solution is to change my query to return blank strings vs NULL values. I can update my view to do that. Not ideal if I want values to actually return NULL vs a blank string, but for purposes of the query search may be my only solution - at lease for fields I allow sorting on.