I am using react-admin version 3.19.8
I find the way to use the Datagrid component with custom queries from Use the Datagrid component with custom queries - react-admin
It's work fine, but I would like to use expand to show more information instead of using edit in this example.
For example, I changed the rowClick to expand, but the expand button not showing anything. What should I do pass the data source to expand to make it work?
import React, { useState } from 'react';
import keyBy from 'lodash/keyBy'
import { useQuery, Datagrid, TextField, Pagination, Loading, ListContextProvider } from 'react-admin'
const ExpandList = ({ id, record, resource }) => (
<TextField source="date" />
<TextField source="status" />
);
export const CustomList = () => {
const [page, setPage] = useState(1);
const perPage = 50;
const { data, total, loading, error } = useQuery({
type: 'GET_LIST',
resource: 'posts',
payload: {
pagination: { page, perPage },
sort: { field: 'id', order: 'ASC' },
filter: {},
}
});
if (loading) {
return <Loading />
}
if (error) {
return <p>ERROR: {error}</p>
}
return (
<ListContextProvider value={{
data: keyBy(data, 'id'),
ids: data.map(({ id }) => id),
total,
page,
perPage,
setPage,
currentSort: { field: 'id', order: 'ASC' },
basePath: "/posts",
resource: 'posts',
selectedIds: []
}}>
<Datagrid rowClick="expand" expand={<ExpandList />}>
<TextField source="id" />
<TextField source="name" />
</Datagrid>
<Pagination />
</ListContextProvider >
)
}