Does the Clarity datagrid trust an external total count, or must the application clamp page requests when the backend bounds rows?

The Clarity datagrid treats an externally supplied total count as authoritative for calculating UI boundaries, but the application is responsible for clamping page requests.

p>In Angular Clarity, the clr-datagrid does not own the state of the dataset. It uses the totalCount property provided by the application to calculate the total number of pages and enable/disable pagination controls. However, it does not automatically correct or clamp the active page index if the backend returns fewer rows than expected due to dynamic filtering or page-size changes.

The Pagination Contract

The relationship between the grid and your data follows these rules in modern Clarity versions (v4 and later):

• The Grid's Role: It renders the controls based on totalCount / pageSize. It emits events when the user interacts with these controls.
• The Application's Role: It must listen for pagination events, fetch the data slice, and—crucially—validate that the requested page index is still valid given the new total count.

Handling Filter and Page Size Changes

When a user applies a filter or changes the page size, the grid may emit a page index based on the previous state. If the user was on page 10 (100 items) and a filter reduces the total results to 2 pages, the grid might still attempt to request page 10 until the application state is updated.

To prevent out-of-range offsets, you must implement manual clamping logic in your data service:

1. Listen for the (paginationChange) or filter-applied events.
2. Receive the new totalCount from the backend.
3. Calculate the max allowable page: Math.ceil(totalCount / pageSize) - 1.
4. If the current page index exceeds this max, manually reset the index to the max page before triggering the next API call.

Implementation Strategy

// Example logic for clamping the offset in your component
onPaginationChange(event: ClrPaginationEvent) {
  const maxPage = Math.ceil(this.totalCount / event.pageSize) - 1;
  let targetPage = event.page;

  if (targetPage > maxPage) {
    targetPage = maxPage;
    // Update the grid state to force the UI to sync
    this.paginationState.page = targetPage;
  }
  
  this.fetchData(targetPage, event.pageSize);
}

p>Note: This server-driven contract is the standard for Clarity 4.0+. In legacy versions, the state management was more imperative, but the requirement for application-side clamping remains consistent for stability.