[data grid] noRowsOverlay displays when all rows are pinned

[bwood21]

Steps to reproduce

Link to live example

The noRowsOverlay is displayed when all rows are pinned.

Steps:

1. Pin both rows to either the top or the bottom using the pin button

Current behavior

The noRowsOverlay is displayed

Expected behavior

The noRowsOverlay should not be displayed as there are pinned rows.

Context

I have a table that often mounts with just one row of data, but adds more rows as the user interacts with the application. Users sometimes pin the first row to save it before other rows are added to the table, and then receive a confusing 'no rows' error message. My application has a custom noRowsOverlay that displays instructions to users that are specific to the case for when there are no rows. Showing the no rows error message when the row is pinned causes users to take incorrect actions when using the application.

Your environment

npx @mui/envinfo

``` I'm running this on WSL and using Chrome from a Windows machine, so the info might be a bit strange here. System: OS: Linux 5.10 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish) Binaries: Node: 22.2.0 - ~/.nvm/versions/node/v22.2.0/bin/node npm: 10.7.0 - ~/.nvm/versions/node/v22.2.0/bin/npm pnpm: 9.1.0 - ~/.nvm/versions/node/v22.2.0/bin/pnpm Browsers: Chrome: 130.0.6723.70 (Official Build) (64-bit) ```

Search keywords: overlay pin pinning Order ID: 87442

[michelengelen]

Hey @bwood21 and thanks for opening this issue.

I am not sure if this behavior was intentional, but I agree that it is a bit misleading. Fortunately this can be fixed quite easy with this:

diff --git a/packages/x-data-grid/src/hooks/features/overlays/useGridOverlays.ts b/packages/x-data-grid/src/hooks/features/overlays/useGridOverlays.ts
index f3f9f3998..0876bb2de 100644
--- a/packages/x-data-grid/src/hooks/features/overlays/useGridOverlays.ts
+++ b/packages/x-data-grid/src/hooks/features/overlays/useGridOverlays.ts
@@ -2,7 +2,11 @@ import { useGridSelector } from '../../utils';
 import { useGridApiContext } from '../../utils/useGridApiContext';
 import { useGridRootProps } from '../../utils/useGridRootProps';
 import { gridExpandedRowCountSelector } from '../filter';
-import { gridRowCountSelector, gridRowsLoadingSelector } from '../rows';
+import {
+  gridRowCountSelector,
+  gridRowsLoadingSelector,
+  gridPinnedRowsCountSelector,
+} from '../rows';
 import { GridLoadingOverlayVariant } from '../../../components/GridLoadingOverlay';
 import { GridSlotsComponent } from '../../../models/gridSlotsComponent';

@@ -20,7 +24,8 @@ export const useGridOverlays = () => {

   const totalRowCount = useGridSelector(apiRef, gridRowCountSelector);
   const visibleRowCount = useGridSelector(apiRef, gridExpandedRowCountSelector);
-  const noRows = totalRowCount === 0;
+  const pinnedRowsCount = useGridSelector(apiRef, gridPinnedRowsCountSelector);
+  const noRows = totalRowCount === 0 && pinnedRowsCount === 0;
   const loading = useGridSelector(apiRef, gridRowsLoadingSelector);

   const showNoRowsOverlay = !loading && noRows;
diff --git a/packages/x-data-grid/src/hooks/features/rows/index.ts b/packages/x-data-grid/src/hooks/features/rows/index.ts
index c946d4621..10b383859 100644
--- a/packages/x-data-grid/src/hooks/features/rows/index.ts
+++ b/packages/x-data-grid/src/hooks/features/rows/index.ts
@@ -11,6 +11,7 @@ export {
   gridRowTreeDepthsSelector,
   gridRowMaximumTreeDepthSelector,
   gridDataRowIdsSelector,
+  gridPinnedRowsCountSelector,
 } from './gridRowsSelector';
 export type { GridRowsState, GridRowIdToModelLookup } from './gridRowsInterfaces';
 export { GRID_ROOT_GROUP_ID, checkGridRowIdIsValid, isAutogeneratedRow } from './gridRowsUtils';

I'll open this up as a good first issue! 👍🏼