Skip to content

Fix DataTable crashes when its data is not a React primitive #10777

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
slax57 merged 1 commit into from
Jun 10, 2025
Merged

Fix DataTable crashes when its data is not a React primitive #10777

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions packages/ra-ui-materialui/src/list/datatable/DataTable.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
ExpandSingle,
IsRowExpandable,
IsRowSelectable,
NonPrimitiveData,
} from './DataTable.stories';

describe('DataTable', () => {
Expand All @@ -34,6 +35,17 @@ describe('DataTable', () => {
screen.getByText('Author');
screen.getByText('Year');
});
it('should render non React primitive data without crashing', async () => {
render(<NonPrimitiveData />);
await waitFor(() => {
expect(screen.getAllByRole('row')).toHaveLength(6);
});
screen.getByText('War and Peace');
screen.getByText('Pride and Prejudice');
screen.getByText('The Picture of Dorian Gray');
screen.getByText('Le Petit Prince');
screen.getByText('The Alchemist');
});
describe('Sorting', () => {
it('should show the default sort column with the default sort order', async () => {
render(<Basic />);
Expand Down
89 changes: 50 additions & 39 deletions packages/ra-ui-materialui/src/list/datatable/DataTable.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,43 +57,43 @@ const data = {
{
id: 1,
title: 'War and Peace',
author: 'Leo Tolstoy',
author: { name: 'Leo Tolstoy' },
year: 1869,
},
{
id: 2,
title: 'Pride and Prejudice',
author: 'Jane Austen',
author: { name: 'Jane Austen' },
year: 1813,
},
{
id: 3,
title: 'The Picture of Dorian Gray',
author: 'Oscar Wilde',
author: { name: 'Oscar Wilde' },
year: 1890,
},
{
id: 4,
title: 'Le Petit Prince',
author: 'Antoine de Saint-Exupéry',
author: { name: 'Antoine de Saint-Exupéry' },
year: 1943,
},
{
id: 5,
title: 'The Alchemist',
author: 'Paulo Coelho',
author: { name: 'Paulo Coelho' },
year: 1988,
},
{
id: 6,
title: 'Madame Bovary',
author: 'Gustave Flaubert',
author: { name: 'Gustave Flaubert' },
year: 1857,
},
{
id: 7,
title: 'The Lord of the Rings',
author: 'J. R. R. Tolkien',
author: { name: 'J. R. R. Tolkien' },
year: 1954,
},
],
Expand Down Expand Up @@ -137,7 +137,7 @@ export const Basic = () => (
<DataTable>
<DataTable.Col source="id" />
<DataTable.Col source="title" />
<DataTable.Col source="author" />
<DataTable.Col label="Author" source="author.name" />
<DataTable.Col source="year" />
</DataTable>
</Wrapper>
Expand All @@ -154,7 +154,7 @@ export const Columns = () => (
render={record => record.title.toUpperCase()}
/>
<DataTable.Col
source="author"
source="author.name"
sx={{
color: 'darkgray',
'&.MuiTableCell-body': { fontStyle: 'italic' },
Expand Down Expand Up @@ -185,14 +185,14 @@ export const Empty = () => (
<DataTable data={[]} total={0}>
<DataTable.Col source="id" />
<DataTable.Col source="title" />
<DataTable.Col source="author" />
<DataTable.Col source="author.name" />
<DataTable.Col source="year" />
</DataTable>
<h1>Custom</h1>
<DataTable data={[]} total={0} empty={<CustomEmpty />}>
<DataTable.Col source="id" />
<DataTable.Col source="title" />
<DataTable.Col source="author" />
<DataTable.Col source="author.name" />
<DataTable.Col source="year" />
</DataTable>
</Box>
Expand All @@ -204,7 +204,7 @@ export const Hover = () => (
<DataTable hover={false}>
<DataTable.Col source="id" />
<DataTable.Col source="title" />
<DataTable.Col source="author" />
<DataTable.Col source="author.name" />
<DataTable.Col source="year" />
</DataTable>
</Wrapper>
Expand All @@ -217,14 +217,14 @@ export const Size = () => (
<DataTable>
<DataTable.Col source="id" />
<DataTable.Col source="title" />
<DataTable.Col source="author" />
<DataTable.Col source="author.name" />
<DataTable.Col source="year" />
</DataTable>
<h1>Medium</h1>
<DataTable size="medium">
<DataTable.Col source="id" />
<DataTable.Col source="title" />
<DataTable.Col source="author" />
<DataTable.Col source="author.name" />
<DataTable.Col source="year" />
</DataTable>
</Box>
Expand All @@ -242,7 +242,7 @@ export const SX = () => (
>
<DataTable.Col source="id" />
<DataTable.Col source="title" />
<DataTable.Col source="author" />
<DataTable.Col source="author.name" />
<DataTable.Col source="year" />
</DataTable>
</Wrapper>
Expand All @@ -260,7 +260,7 @@ export const RowSx = () => (
>
<DataTable.Col source="id" />
<DataTable.Col source="title" />
<DataTable.Col source="author" />
<DataTable.Col source="author.name" />
<DataTable.Col source="year" />
</DataTable>
</Wrapper>
Expand All @@ -281,7 +281,7 @@ export const StyledComponent = () => (
<StyledDataTable>
<DataTable.Col source="id" />
<DataTable.Col source="title" />
<DataTable.Col source="author" />
<DataTable.Col source="author.name" />
<DataTable.Col source="year" />
</StyledDataTable>
</Wrapper>
Expand All @@ -300,7 +300,7 @@ export const ColumnStyles = () => (
>
<DataTable.Col source="id" />
<DataTable.Col source="title" />
<DataTable.Col source="author" />
<DataTable.Col source="author.name" />
<DataTable.Col source="year" />
</DataTable>
<h1>Cells only</h1>
Expand All @@ -313,7 +313,7 @@ export const ColumnStyles = () => (
>
<DataTable.Col source="id" />
<DataTable.Col source="title" />
<DataTable.Col source="author" />
<DataTable.Col source="author.name" />
<DataTable.Col source="year" />
</DataTable>
<h1>Hidden column on small screens</h1>
Expand All @@ -327,7 +327,7 @@ export const ColumnStyles = () => (
>
<DataTable.Col source="id" />
<DataTable.Col source="title" />
<DataTable.Col source="author" />
<DataTable.Col source="author.name" />
<DataTable.Col source="year" />
</DataTable>
</Box>
Expand Down Expand Up @@ -394,7 +394,7 @@ export const ErrorInFetch = () => (
<DataTable>
<DataTable.Col source="id" />
<DataTable.Col source="title" />
<DataTable.Col source="author" />
<DataTable.Col source="author.name" />
<DataTable.Col source="year" />
</DataTable>
</ResourceContextProvider>
Expand All @@ -407,7 +407,7 @@ export const RowClickFalse = () => (
<DataTable rowClick={false}>
<DataTable.Col source="id" />
<DataTable.Col source="title" />
<DataTable.Col source="author" />
<DataTable.Col source="author.name" />
<DataTable.Col source="year" />
</DataTable>
</Wrapper>
Expand All @@ -417,7 +417,7 @@ const ExpandPanel = () => {
const book = useRecordContext();
return (
<Box data-testid="ExpandPanel" p={2}>
<i>{book?.title}</i>, by {book?.author} ({book?.year})
<i>{book?.title}</i>, by {book?.author.name} ({book?.year})
</Box>
);
};
Expand All @@ -427,7 +427,7 @@ export const Expand = () => (
<DataTable expand={<ExpandPanel />}>
<DataTable.Col source="id" />
<DataTable.Col source="title" />
<DataTable.Col source="author" />
<DataTable.Col source="author.name" />
<DataTable.Col source="year" />
</DataTable>
</Wrapper>
Expand All @@ -438,7 +438,7 @@ export const ExpandSingle = () => (
<DataTable expand={<ExpandPanel />} expandSingle>
<DataTable.Col source="id" />
<DataTable.Col source="title" />
<DataTable.Col source="author" />
<DataTable.Col source="author.name" />
<DataTable.Col source="year" />
</DataTable>
</Wrapper>
Expand All @@ -452,14 +452,14 @@ export const IsRowExpandable = () => (
<SimpleShowLayout>
<TextField source="id" />
<TextField source="title" />
<TextField source="author" />
<TextField source="author.name" />
<TextField source="year" />
</SimpleShowLayout>
}
>
<DataTable.Col source="id" />
<DataTable.Col source="title" />
<DataTable.Col source="author" />
<DataTable.Col source="author.name" />
<DataTable.Col source="year" />
</DataTable>
</Wrapper>
Expand All @@ -479,28 +479,28 @@ export const BulkActionButtons = () => (
<DataTable>
<DataTable.Col source="id" />
<DataTable.Col source="title" />
<DataTable.Col source="author" />
<DataTable.Col source="author.name" />
<DataTable.Col source="year" />
</DataTable>
<h1>Disabled</h1>
<DataTable bulkActionButtons={false}>
<DataTable.Col source="id" />
<DataTable.Col source="title" />
<DataTable.Col source="author" />
<DataTable.Col source="author.name" />
<DataTable.Col source="year" />
</DataTable>
<h1>Custom</h1>
<DataTable bulkActionButtons={<CustomBulkActionButtons />}>
<DataTable.Col source="id" />
<DataTable.Col source="title" />
<DataTable.Col source="author" />
<DataTable.Col source="author.name" />
<DataTable.Col source="year" />
</DataTable>
<h1>Unselectable Rows</h1>
<DataTable isRowSelectable={record => record.id % 2 === 0}>
<DataTable.Col source="id" />
<DataTable.Col source="title" />
<DataTable.Col source="author" />
<DataTable.Col source="author.name" />
<DataTable.Col source="year" />
</DataTable>
</Box>
Expand All @@ -520,7 +520,7 @@ export const SelectAllButton = ({
<DataTable>
<DataTable.Col source="id" />
<DataTable.Col source="title" />
<DataTable.Col source="author" />
<DataTable.Col source="author.name" />
<DataTable.Col source="year" />
</DataTable>
</>
Expand All @@ -537,7 +537,7 @@ export const SelectAllButton = ({
>
<DataTable.Col source="id" />
<DataTable.Col source="title" />
<DataTable.Col source="author" />
<DataTable.Col source="author.name" />
<DataTable.Col source="year" />
</DataTable>
</>
Expand All @@ -558,7 +558,7 @@ export const SelectAllButton = ({
>
<DataTable.Col source="id" />
<DataTable.Col source="title" />
<DataTable.Col source="author" />
<DataTable.Col source="author.name" />
<DataTable.Col source="year" />
</DataTable>
</>
Expand All @@ -572,7 +572,7 @@ export const IsRowSelectable = () => (
<DataTable isRowSelectable={record => Boolean(record.id % 2)}>
<DataTable.Col source="id" />
<DataTable.Col source="title" />
<DataTable.Col source="author" />
<DataTable.Col source="author.name" />
<DataTable.Col source="year" />
</DataTable>
</Wrapper>
Expand Down Expand Up @@ -608,7 +608,7 @@ export const Body = () => (
<DataTable body={MyDataTableBody}>
<DataTable.Col source="id" />
<DataTable.Col source="title" />
<DataTable.Col source="author" />
<DataTable.Col source="author.name" />
<DataTable.Col source="year" />
</DataTable>
</Wrapper>
Expand Down Expand Up @@ -639,7 +639,7 @@ export const Head = () => (
<DataTable head={MyDataTableHead}>
<DataTable.Col source="id" />
<DataTable.Col source="title" />
<DataTable.Col source="author" />
<DataTable.Col source="author.name" />
<DataTable.Col source="year" />
</DataTable>
</Wrapper>
Expand Down Expand Up @@ -767,7 +767,7 @@ export const FullApp = ({
>
<DataTable.Col source="id" />
<DataTable.Col source="title" />
<DataTable.Col source="author" />
<DataTable.Col source="author.name" />
<DataTable.Col source="year" />
</DataTable>
</List>
Expand Down Expand Up @@ -861,7 +861,7 @@ export const AccessControl = ({
<DataTable key={allowedAction}>
<DataTable.Col source="id" />
<DataTable.Col source="title" />
<DataTable.Col source="author" />
<DataTable.Col source="author.name" />
<DataTable.Col source="year" />
</DataTable>
</List>
Expand All @@ -885,3 +885,14 @@ AccessControl.argTypes = {
control: { type: 'select' },
},
};

export const NonPrimitiveData = () => (
<Wrapper i18nProvider={polyglotI18nProvider(() => defaultMessages, 'en')}>
<DataTable>
<DataTable.Col source="id" />
<DataTable.Col source="title" />
<DataTable.Col source="author" />
<DataTable.Col source="year" />
</DataTable>
</Wrapper>
);
6 changes: 5 additions & 1 deletion packages/ra-ui-materialui/src/list/datatable/DataTableCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,8 @@ export const DataTableCell = React.memo(
...(cellSx && record ? cellSx(record) : {}),
...sx,
} as SxProps;

const fieldValue = get(record, source!);
return (
<TableCellStyled
ref={ref}
Expand All @@ -65,7 +67,9 @@ export const DataTableCell = React.memo(
? record && render(record)
: field
? React.createElement(field, { source })
: get(record, source!))}
: fieldValue != null
? fieldValue.toString()
: null)}
</TableCellStyled>
);
}
Expand Down
Loading