fix(ui/datatables): sync page count with filtering [EE-5890] (#10010)

app/react/components/datatables/Datatable.tsx

@@ -34,6 +34,20 @@ import { createSelectColumn } from './select-column';
 import { TableRow } from './TableRow';
 import { type TableState as GlobalTableState } from './useTableState';
 
+export type PaginationProps =
+  | {
+      isServerSidePagination?: false;
+      totalCount?: never;
+      page?: never;
+      onPageChange?: never;
+    }
+  | {
+      isServerSidePagination: true;
+      totalCount: number;
+      page: number;
+      onPageChange(page: number): void;
+    };
+
 export interface Props<
   D extends Record<string, unknown>,
   TMeta extends TableMeta<D> = TableMeta<D>
@@ -50,13 +64,8 @@ export interface Props<
   titleIcon?: IconProps['icon'];
   initialTableState?: Partial<TableState>;
   isLoading?: boolean;
-  totalCount?: number;
   description?: ReactNode;
-  pageCount?: number;
   highlightedItemId?: string;
-  page?: number;
-  onPageChange?(page: number): void;
-
   settingsManager: GlobalTableState<BasicTableSettings>;
   renderRow?(row: Row<D>, highlightedItemId?: string): ReactNode;
   getRowCanExpand?(row: Row<D>): boolean;
@@ -80,11 +89,7 @@ export function Datatable<
   emptyContentLabel,
   initialTableState = {},
   isLoading,
-  totalCount = dataset.length,
   description,
-  pageCount,
-  page,
-  onPageChange = () => null,
   settingsManager: settings,
   renderRow = defaultRenderRow,
   highlightedItemId,
@@ -92,8 +97,16 @@ export function Datatable<
   getRowCanExpand,
   'data-cy': dataCy,
   meta,
-}: Props<D, TMeta>) {
-  const isServerSidePagination = typeof pageCount !== 'undefined';
+  onPageChange = () => {},
+  page,
+  totalCount = dataset.length,
+  isServerSidePagination = false,
+}: Props<D, TMeta> & PaginationProps) {
+  const pageCount = useMemo(
+    () => Math.ceil(totalCount / settings.pageSize),
+    [settings.pageSize, totalCount]
+  );
+
   const enableRowSelection = getIsSelectionEnabled(
     disableSelect,
     isRowSelectable
@@ -120,6 +133,7 @@ export function Datatable<
     defaultColumn: {
       enableColumnFilter: false,
       enableHiding: true,
+      sortingFn: 'alphanumeric',
     },
     enableRowSelection,
     autoResetExpanded: false,
@@ -127,7 +141,6 @@ export function Datatable<
     getRowId,
     getCoreRowModel: getCoreRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
-    getSortedRowModel: getSortedRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
     getFacetedRowModel: getFacetedRowModel(),
     getFacetedUniqueValues: getFacetedUniqueValues(),
@@ -135,7 +148,11 @@ export function Datatable<
     getExpandedRowModel: getExpandedRowModel(),
     getRowCanExpand,
     getColumnCanGlobalFilter,
-    ...(isServerSidePagination ? { manualPagination: true, pageCount } : {}),
+    ...(isServerSidePagination
+      ? { manualPagination: true, pageCount }
+      : {
+          getSortedRowModel: getSortedRowModel(),
+        }),
     meta,
   });
 
@@ -178,7 +195,7 @@ export function Datatable<
         onPageSizeChange={handlePageSizeChange}
         page={typeof page === 'number' ? page : tableState.pagination.pageIndex}
         pageSize={tableState.pagination.pageSize}
-        totalCount={totalCount}
+        pageCount={tableInstance.getPageCount()}
         totalSelected={selectedItems.length}
       />
     </Table.Container>

app/react/components/datatables/DatatableFooter.tsx

@@ -8,7 +8,7 @@ interface Props {
   pageSize: number;
   page: number;
   onPageChange(page: number): void;
-  totalCount: number;
+  pageCount: number;
   onPageSizeChange(pageSize: number): void;
 }
 
@@ -17,7 +17,7 @@ export function DatatableFooter({
   pageSize,
   page,
   onPageChange,
-  totalCount,
+  pageCount,
   onPageSizeChange,
 }: Props) {
   return (
@@ -28,7 +28,7 @@ export function DatatableFooter({
         pageLimit={pageSize}
         page={page + 1}
         onPageChange={(page) => onPageChange(page - 1)}
-        totalCount={totalCount}
+        pageCount={pageCount}
         onPageLimitChange={onPageSizeChange}
       />
     </Table.Footer>

app/react/components/datatables/ExpandableDatatable.tsx

@@ -2,7 +2,11 @@ import { Row } from '@tanstack/react-table';
 import { ReactNode } from 'react';
 
 import { ExpandableDatatableTableRow } from './ExpandableDatatableRow';
-import { Datatable, Props as DatatableProps } from './Datatable';
+import {
+  Datatable,
+  Props as DatatableProps,
+  PaginationProps,
+} from './Datatable';
 
 interface Props<D extends Record<string, unknown>>
   extends Omit<DatatableProps<D>, 'renderRow' | 'expandable'> {
@@ -15,7 +19,7 @@ export function ExpandableDatatable<D extends Record<string, unknown>>({
   getRowCanExpand = () => true,
   expandOnRowClick,
   ...props
-}: Props<D>) {
+}: Props<D> & PaginationProps) {
   return (
     <Datatable<D>
       // eslint-disable-next-line react/jsx-props-no-spreading

app/react/components/datatables/NameCell.tsx

@@ -17,7 +17,6 @@ export function buildNameColumn<T extends Record<string, unknown>>(
     cell,
     enableSorting: true,
     enableHiding: false,
-    sortingFn: 'text',
   };
 
   function createCell<T extends Record<string, unknown>>() {