Fix Datagrid empty throws error when used in standalone mode

packages/ra-core/src/dataTable/DataTableBase.tsx

@@ -155,11 +155,7 @@ export const DataTableBase = function DataTable<
      * the DataTable displays the empty component.
      */
     if (data == null || data.length === 0 || total === 0) {
-        if (empty) {
-            return empty;
-        }
-
-        return null;
+        return empty ?? null;
     }
 
     /**

packages/ra-ui-materialui/src/list/ListNoResults.tsx

@@ -9,10 +9,10 @@ import {
 
 import { Button } from '../button';
 
-export const ListNoResults = () => {
+export const ListNoResults = (props: ListNoResultsProps) => {
     const translate = useTranslate();
-    const resource = useResourceContext();
-    const { filterValues, setFilters } = useListContextWithProps();
+    const resource = useResourceContext(props);
+    const { filterValues, setFilters } = useListContextWithProps(props);
     const getResourceLabel = useGetResourceLabel();
     if (!resource) {
         throw new Error(
@@ -49,3 +49,9 @@ export const ListNoResults = () => {
         </CardContent>
     );
 };
+
+export interface ListNoResultsProps {
+    resource?: string;
+    filterValues?: any;
+    setFilters?: (filters: any, filterTypes?: string[]) => void;
+}

packages/ra-ui-materialui/src/list/datagrid/Datagrid.stories.tsx

@@ -409,6 +409,7 @@ const MyCustomList = () => {
             isPending={isPending}
             sort={sort}
             bulkActionButtons={false}
+            resource="books"
         >
             <TextField source="id" />
             <TextField source="title" />
@@ -424,24 +425,52 @@ const MyCustomListInteractive = () => {
     const listContext = useList({ data, isPending });
 
     return (
-        <ListContextProvider value={listContext}>
-            <Datagrid>
-                <TextField source="id" />
-                <TextField source="title" />
-            </Datagrid>
-        </ListContextProvider>
+        <ResourceContextProvider value="books">
+            <ListContextProvider value={listContext}>
+                <Datagrid>
+                    <TextField source="id" />
+                    <TextField source="title" />
+                </Datagrid>
+            </ListContextProvider>
+        </ResourceContextProvider>
     );
 };
 
 export const Standalone = () => (
     <ThemeProvider theme={theme}>
         <CoreAdminContext dataProvider={dataProvider}>
-            <ResourceContextProvider value="books">
-                <h1>Static</h1>
-                <MyCustomList />
-                <h1>Dynamic (with useList)</h1>
-                <MyCustomListInteractive />
-            </ResourceContextProvider>
+            <h1>Static</h1>
+            <MyCustomList />
+            <h1>Dynamic (with useList)</h1>
+            <MyCustomListInteractive />
+        </CoreAdminContext>
+    </ThemeProvider>
+);
+
+const MyCustomListNoResults = () => {
+    const { data, total, isPending } = useGetList('books', {
+        filter: { title: 'Non-existing book' },
+    });
+
+    return (
+        <Datagrid
+            data={data}
+            total={total}
+            isPending={isPending}
+            sort={sort}
+            bulkActionButtons={false}
+            resource="books"
+        >
+            <TextField source="id" />
+            <TextField source="title" />
+        </Datagrid>
+    );
+};
+
+export const StandaloneNoResults = () => (
+    <ThemeProvider theme={theme}>
+        <CoreAdminContext dataProvider={dataProvider}>
+            <MyCustomListNoResults />
         </CoreAdminContext>
     </ThemeProvider>
 );

packages/ra-ui-materialui/src/list/datagrid/Datagrid.tsx

@@ -9,6 +9,7 @@ import {
     FC,
     ComponentType,
     ReactElement,
+    ReactNode,
     useMemo,
 } from 'react';
 import {
@@ -139,7 +140,7 @@ export const Datagrid: React.ForwardRefExoticComponent<
         header = DatagridHeader,
         children,
         className,
-        empty = DefaultEmpty,
+        empty,
         expand,
         bulkActionsToolbar,
         bulkActionButtons = canDelete ? defaultBulkActionButtons : false,
@@ -235,11 +236,11 @@ export const Datagrid: React.ForwardRefExoticComponent<
      * the Datagrid displays the empty component.
      */
     if (data == null || data.length === 0 || total === 0) {
-        if (empty) {
-            return empty;
-        }
-
-        return null;
+        return empty === undefined ? (
+            <ListNoResults resource={resource} />
+        ) : (
+            empty
+        );
     }
 
     /**
@@ -464,7 +465,7 @@ export interface DatagridProps<RecordType extends RaRecord = any>
      *     </List>
      * );
      */
-    empty?: ReactElement;
+    empty?: ReactNode;
 
     /**
      * A function that returns whether the row for a record is expandable.
@@ -608,5 +609,3 @@ const sanitizeRestProps = props =>
         .reduce((acc, key) => ({ ...acc, [key]: props[key] }), {});
 
 Datagrid.displayName = 'Datagrid';
-
-const DefaultEmpty = <ListNoResults />;

packages/ra-ui-materialui/src/list/datatable/DataTable.stories.tsx

@@ -342,7 +342,12 @@ const MyCustomList = () => {
     });
 
     return (
-        <DataTable data={data} total={total} isPending={isPending}>
+        <DataTable
+            data={data}
+            total={total}
+            isPending={isPending}
+            resource="books"
+        >
             <DataTable.Col source="id" />
             <DataTable.Col source="title" />
         </DataTable>
@@ -351,9 +356,31 @@ const MyCustomList = () => {
 
 export const StandaloneStatic = () => (
     <AdminContext dataProvider={dataProvider} theme={theme}>
-        <ResourceContextProvider value="books">
-            <MyCustomList />
-        </ResourceContextProvider>
+        <MyCustomList />
+    </AdminContext>
+);
+
+const MyCustomListNoResults = () => {
+    const { data, total, isPending } = useGetList('books', {
+        filter: { title: 'Non-existing book' },
+    });
+
+    return (
+        <DataTable
+            data={data}
+            total={total}
+            isPending={isPending}
+            resource="books"
+        >
+            <DataTable.Col source="id" />
+            <DataTable.Col source="title" />
+        </DataTable>
+    );
+};
+
+export const StandaloneNoResults = () => (
+    <AdminContext dataProvider={dataProvider} theme={theme}>
+        <MyCustomListNoResults />
     </AdminContext>
 );
 
@@ -366,19 +393,19 @@ const MyCustomListInteractive = () => {
 
     return (
         <ListContextProvider value={listContext}>
-            <DataTable sx={{ mt: 6 }}>
-                <DataTable.Col source="id" />
-                <DataTable.Col source="title" />
-            </DataTable>
+            <ResourceContextProvider value="books">
+                <DataTable sx={{ mt: 6 }}>
+                    <DataTable.Col source="id" />
+                    <DataTable.Col source="title" />
+                </DataTable>
+            </ResourceContextProvider>
         </ListContextProvider>
     );
 };
 
 export const StandaloneDynamic = () => (
     <AdminContext dataProvider={dataProvider} theme={theme}>
-        <ResourceContextProvider value="books">
-            <MyCustomListInteractive />
-        </ResourceContextProvider>
+        <MyCustomListInteractive />
     </AdminContext>
 );
 

packages/ra-ui-materialui/src/list/datatable/DataTable.tsx

@@ -39,7 +39,6 @@ import { DataTableNumberColumn } from './DataTableNumberColumn';
 import { ColumnsSelector } from './ColumnsSelector';
 import { DataTableRowSxContext } from './DataTableRowSxContext';
 
-const DefaultEmpty = <ListNoResults />;
 const DefaultFoot = (_props: { children: ReactNode }) => null;
 const PREFIX = 'RaDataTable';
 
@@ -148,7 +147,7 @@ export const DataTable = React.forwardRef(function DataTable<
         foot: TableFoot = DefaultFoot,
         children,
         className,
-        empty = DefaultEmpty,
+        empty,
         expand,
         bulkActionsToolbar,
         bulkActionButtons = canDelete ? defaultBulkActionButtons : false,
@@ -183,7 +182,13 @@ export const DataTable = React.forwardRef(function DataTable<
             {...props}
             hasBulkActions={hasBulkActions}
             loading={loading}
-            empty={empty}
+            empty={
+                empty === undefined ? (
+                    <ListNoResults resource={resourceFromContext} />
+                ) : (
+                    empty
+                )
+            }
         >
             <DataTableRowSxContext.Provider value={rowSx}>
                 <DataTableRoot