account for client side filtering on total row count for grid

Author: rdonigian

src/components/Grid/Toolbar.tsx

@@ -1,10 +1,31 @@
 import { Stack, Typography } from '@mui/material';
-import { useGridRootProps } from '@mui/x-data-grid-pro';
+import {
+  gridFilteredSortedRowIdsSelector,
+  gridFilterModelSelector,
+  useGridApiContext,
+  useGridRootProps,
+  useGridSelector,
+} from '@mui/x-data-grid-pro';
+import { useMemo } from 'react';
 import { ChildrenProp, extendSx, StyleProps } from '~/common';
 import { FormattedNumber } from '../Formatters';
 
 export const Toolbar = (props: ChildrenProp & StyleProps) => {
   const rootProps = useGridRootProps();
+  const apiRef = useGridApiContext();
+  const filteredRowIds = useGridSelector(
+    apiRef,
+    gridFilteredSortedRowIdsSelector
+  );
+  const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
+
+  const displayCount = useMemo(() => {
+    const { items } = filterModel;
+    const hasFilters = items.length > 0;
+    const count = hasFilters ? filteredRowIds.length : rootProps.rowCount;
+
+    return count;
+  }, [filterModel, filteredRowIds.length, rootProps.rowCount]);
 
   return (
     <Stack
@@ -24,11 +45,9 @@ export const Toolbar = (props: ChildrenProp & StyleProps) => {
       ]}
     >
       {props.children}
-      {rootProps.rowCount && (
-        <Typography>
-          Total Rows: <FormattedNumber value={rootProps.rowCount} />
-        </Typography>
-      )}
+      <Typography minWidth={100}>
+        Total Rows: {displayCount && <FormattedNumber value={displayCount} />}
+      </Typography>
     </Stack>
   );
 };