diff --git a/packages/ra-core/src/dataTable/DataTableBase.tsx b/packages/ra-core/src/dataTable/DataTableBase.tsx
index b16e732da00..1453a08da99 100644
--- a/packages/ra-core/src/dataTable/DataTableBase.tsx
+++ b/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;
}
/**
diff --git a/packages/ra-ui-materialui/src/list/ListNoResults.tsx b/packages/ra-ui-materialui/src/list/ListNoResults.tsx
index dff2f3f1fb4..d8cab360ec3 100644
--- a/packages/ra-ui-materialui/src/list/ListNoResults.tsx
+++ b/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 = () => {
);
};
+
+export interface ListNoResultsProps {
+ resource?: string;
+ filterValues?: any;
+ setFilters?: (filters: any, filterTypes?: string[]) => void;
+}
diff --git a/packages/ra-ui-materialui/src/list/datagrid/Datagrid.stories.tsx b/packages/ra-ui-materialui/src/list/datagrid/Datagrid.stories.tsx
index 08245ea1e42..07e791d16e1 100644
--- a/packages/ra-ui-materialui/src/list/datagrid/Datagrid.stories.tsx
+++ b/packages/ra-ui-materialui/src/list/datagrid/Datagrid.stories.tsx
@@ -409,6 +409,7 @@ const MyCustomList = () => {
isPending={isPending}
sort={sort}
bulkActionButtons={false}
+ resource="books"
>
@@ -424,24 +425,52 @@ const MyCustomListInteractive = () => {
const listContext = useList({ data, isPending });
return (
-
-
-
-
-
-
+
+
+
+
+
+
+
+
);
};
export const Standalone = () => (
-
- Static
-
- Dynamic (with useList)
-
-
+ Static
+
+ Dynamic (with useList)
+
+
+
+);
+
+const MyCustomListNoResults = () => {
+ const { data, total, isPending } = useGetList('books', {
+ filter: { title: 'Non-existing book' },
+ });
+
+ return (
+
+
+
+
+ );
+};
+
+export const StandaloneNoResults = () => (
+
+
+
);
diff --git a/packages/ra-ui-materialui/src/list/datagrid/Datagrid.tsx b/packages/ra-ui-materialui/src/list/datagrid/Datagrid.tsx
index 4d6f2fe95b2..95b0be7aa57 100644
--- a/packages/ra-ui-materialui/src/list/datagrid/Datagrid.tsx
+++ b/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 ? (
+
+ ) : (
+ empty
+ );
}
/**
@@ -464,7 +465,7 @@ export interface DatagridProps
*
* );
*/
- 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 = ;
diff --git a/packages/ra-ui-materialui/src/list/datatable/DataTable.stories.tsx b/packages/ra-ui-materialui/src/list/datatable/DataTable.stories.tsx
index b2912d9e0f5..b3c5252ba87 100644
--- a/packages/ra-ui-materialui/src/list/datatable/DataTable.stories.tsx
+++ b/packages/ra-ui-materialui/src/list/datatable/DataTable.stories.tsx
@@ -342,7 +342,12 @@ const MyCustomList = () => {
});
return (
-
+
@@ -351,9 +356,31 @@ const MyCustomList = () => {
export const StandaloneStatic = () => (
-
-
-
+
+
+);
+
+const MyCustomListNoResults = () => {
+ const { data, total, isPending } = useGetList('books', {
+ filter: { title: 'Non-existing book' },
+ });
+
+ return (
+
+
+
+
+ );
+};
+
+export const StandaloneNoResults = () => (
+
+
);
@@ -366,19 +393,19 @@ const MyCustomListInteractive = () => {
return (
-
-
-
-
+
+
+
+
+
+
);
};
export const StandaloneDynamic = () => (
-
-
-
+
);
diff --git a/packages/ra-ui-materialui/src/list/datatable/DataTable.tsx b/packages/ra-ui-materialui/src/list/datatable/DataTable.tsx
index 91c7c7059f5..8ccbfdf3927 100644
--- a/packages/ra-ui-materialui/src/list/datatable/DataTable.tsx
+++ b/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 = ;
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 ? (
+
+ ) : (
+ empty
+ )
+ }
>