Skip to content

Commit 7554638

Browse files
djhidjhi
authored
Merge pull request #10812 from marmelab/fix-datagrid-empty-standalone
Fix Datagrid empty throws error when used in standalone mode
2 parents 6cb679c + 57f2b0c commit 7554638

6 files changed

Lines changed: 105 additions & 43 deletions

File tree

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

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -155,11 +155,7 @@ export const DataTableBase = function DataTable<
155155
* the DataTable displays the empty component.
156156
*/
157157
if (data == null || data.length === 0 || total === 0) {
158-
if (empty) {
159-
return empty;
160-
}
161-
162-
return null;
158+
return empty ?? null;
163159
}
164160

165161
/**

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

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@ import {
99

1010
import { Button } from '../button';
1111

12-
export const ListNoResults = () => {
12+
export const ListNoResults = (props: ListNoResultsProps) => {
1313
const translate = useTranslate();
14-
const resource = useResourceContext();
15-
const { filterValues, setFilters } = useListContextWithProps();
14+
const resource = useResourceContext(props);
15+
const { filterValues, setFilters } = useListContextWithProps(props);
1616
const getResourceLabel = useGetResourceLabel();
1717
if (!resource) {
1818
throw new Error(
@@ -49,3 +49,9 @@ export const ListNoResults = () => {
4949
</CardContent>
5050
);
5151
};
52+
53+
export interface ListNoResultsProps {
54+
resource?: string;
55+
filterValues?: any;
56+
setFilters?: (filters: any, filterTypes?: string[]) => void;
57+
}

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

Lines changed: 41 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -409,6 +409,7 @@ const MyCustomList = () => {
409409
isPending={isPending}
410410
sort={sort}
411411
bulkActionButtons={false}
412+
resource="books"
412413
>
413414
<TextField source="id" />
414415
<TextField source="title" />
@@ -424,24 +425,52 @@ const MyCustomListInteractive = () => {
424425
const listContext = useList({ data, isPending });
425426

426427
return (
427-
<ListContextProvider value={listContext}>
428-
<Datagrid>
429-
<TextField source="id" />
430-
<TextField source="title" />
431-
</Datagrid>
432-
</ListContextProvider>
428+
<ResourceContextProvider value="books">
429+
<ListContextProvider value={listContext}>
430+
<Datagrid>
431+
<TextField source="id" />
432+
<TextField source="title" />
433+
</Datagrid>
434+
</ListContextProvider>
435+
</ResourceContextProvider>
433436
);
434437
};
435438

436439
export const Standalone = () => (
437440
<ThemeProvider theme={theme}>
438441
<CoreAdminContext dataProvider={dataProvider}>
439-
<ResourceContextProvider value="books">
440-
<h1>Static</h1>
441-
<MyCustomList />
442-
<h1>Dynamic (with useList)</h1>
443-
<MyCustomListInteractive />
444-
</ResourceContextProvider>
442+
<h1>Static</h1>
443+
<MyCustomList />
444+
<h1>Dynamic (with useList)</h1>
445+
<MyCustomListInteractive />
446+
</CoreAdminContext>
447+
</ThemeProvider>
448+
);
449+
450+
const MyCustomListNoResults = () => {
451+
const { data, total, isPending } = useGetList('books', {
452+
filter: { title: 'Non-existing book' },
453+
});
454+
455+
return (
456+
<Datagrid
457+
data={data}
458+
total={total}
459+
isPending={isPending}
460+
sort={sort}
461+
bulkActionButtons={false}
462+
resource="books"
463+
>
464+
<TextField source="id" />
465+
<TextField source="title" />
466+
</Datagrid>
467+
);
468+
};
469+
470+
export const StandaloneNoResults = () => (
471+
<ThemeProvider theme={theme}>
472+
<CoreAdminContext dataProvider={dataProvider}>
473+
<MyCustomListNoResults />
445474
</CoreAdminContext>
446475
</ThemeProvider>
447476
);

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

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
FC,
1010
ComponentType,
1111
ReactElement,
12+
ReactNode,
1213
useMemo,
1314
} from 'react';
1415
import {
@@ -139,7 +140,7 @@ export const Datagrid: React.ForwardRefExoticComponent<
139140
header = DatagridHeader,
140141
children,
141142
className,
142-
empty = DefaultEmpty,
143+
empty,
143144
expand,
144145
bulkActionsToolbar,
145146
bulkActionButtons = canDelete ? defaultBulkActionButtons : false,
@@ -235,11 +236,11 @@ export const Datagrid: React.ForwardRefExoticComponent<
235236
* the Datagrid displays the empty component.
236237
*/
237238
if (data == null || data.length === 0 || total === 0) {
238-
if (empty) {
239-
return empty;
240-
}
241-
242-
return null;
239+
return empty === undefined ? (
240+
<ListNoResults resource={resource} />
241+
) : (
242+
empty
243+
);
243244
}
244245

245246
/**
@@ -464,7 +465,7 @@ export interface DatagridProps<RecordType extends RaRecord = any>
464465
* </List>
465466
* );
466467
*/
467-
empty?: ReactElement;
468+
empty?: ReactNode;
468469

469470
/**
470471
* A function that returns whether the row for a record is expandable.
@@ -608,5 +609,3 @@ const sanitizeRestProps = props =>
608609
.reduce((acc, key) => ({ ...acc, [key]: props[key] }), {});
609610

610611
Datagrid.displayName = 'Datagrid';
611-
612-
const DefaultEmpty = <ListNoResults />;

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

Lines changed: 38 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -342,7 +342,12 @@ const MyCustomList = () => {
342342
});
343343

344344
return (
345-
<DataTable data={data} total={total} isPending={isPending}>
345+
<DataTable
346+
data={data}
347+
total={total}
348+
isPending={isPending}
349+
resource="books"
350+
>
346351
<DataTable.Col source="id" />
347352
<DataTable.Col source="title" />
348353
</DataTable>
@@ -351,9 +356,31 @@ const MyCustomList = () => {
351356

352357
export const StandaloneStatic = () => (
353358
<AdminContext dataProvider={dataProvider} theme={theme}>
354-
<ResourceContextProvider value="books">
355-
<MyCustomList />
356-
</ResourceContextProvider>
359+
<MyCustomList />
360+
</AdminContext>
361+
);
362+
363+
const MyCustomListNoResults = () => {
364+
const { data, total, isPending } = useGetList('books', {
365+
filter: { title: 'Non-existing book' },
366+
});
367+
368+
return (
369+
<DataTable
370+
data={data}
371+
total={total}
372+
isPending={isPending}
373+
resource="books"
374+
>
375+
<DataTable.Col source="id" />
376+
<DataTable.Col source="title" />
377+
</DataTable>
378+
);
379+
};
380+
381+
export const StandaloneNoResults = () => (
382+
<AdminContext dataProvider={dataProvider} theme={theme}>
383+
<MyCustomListNoResults />
357384
</AdminContext>
358385
);
359386

@@ -366,19 +393,19 @@ const MyCustomListInteractive = () => {
366393

367394
return (
368395
<ListContextProvider value={listContext}>
369-
<DataTable sx={{ mt: 6 }}>
370-
<DataTable.Col source="id" />
371-
<DataTable.Col source="title" />
372-
</DataTable>
396+
<ResourceContextProvider value="books">
397+
<DataTable sx={{ mt: 6 }}>
398+
<DataTable.Col source="id" />
399+
<DataTable.Col source="title" />
400+
</DataTable>
401+
</ResourceContextProvider>
373402
</ListContextProvider>
374403
);
375404
};
376405

377406
export const StandaloneDynamic = () => (
378407
<AdminContext dataProvider={dataProvider} theme={theme}>
379-
<ResourceContextProvider value="books">
380-
<MyCustomListInteractive />
381-
</ResourceContextProvider>
408+
<MyCustomListInteractive />
382409
</AdminContext>
383410
);
384411

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

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,6 @@ import { DataTableNumberColumn } from './DataTableNumberColumn';
3939
import { ColumnsSelector } from './ColumnsSelector';
4040
import { DataTableRowSxContext } from './DataTableRowSxContext';
4141

42-
const DefaultEmpty = <ListNoResults />;
4342
const DefaultFoot = (_props: { children: ReactNode }) => null;
4443
const PREFIX = 'RaDataTable';
4544

@@ -148,7 +147,7 @@ export const DataTable = React.forwardRef(function DataTable<
148147
foot: TableFoot = DefaultFoot,
149148
children,
150149
className,
151-
empty = DefaultEmpty,
150+
empty,
152151
expand,
153152
bulkActionsToolbar,
154153
bulkActionButtons = canDelete ? defaultBulkActionButtons : false,
@@ -183,7 +182,13 @@ export const DataTable = React.forwardRef(function DataTable<
183182
{...props}
184183
hasBulkActions={hasBulkActions}
185184
loading={loading}
186-
empty={empty}
185+
empty={
186+
empty === undefined ? (
187+
<ListNoResults resource={resourceFromContext} />
188+
) : (
189+
empty
190+
)
191+
}
187192
>
188193
<DataTableRowSxContext.Provider value={rowSx}>
189194
<DataTableRoot

0 commit comments

Comments
 (0)