diff --git a/docs/List.md b/docs/List.md
index a3a412174e0..5c0d6cf0f74 100644
--- a/docs/List.md
+++ b/docs/List.md
@@ -2819,15 +2819,13 @@ export const UserList = ({ permissions, ...props }) => {
### Rendering `` With A Custom Query
-You can use the `` component with [custom queries](./Actions.md#usequery-hook), provided you pass the result to a ``:
+You can use the `` component with [custom queries](./Actions.md#usequery-hook):
{% raw %}
```jsx
import keyBy from 'lodash/keyBy'
import {
useQuery,
- ResourceContextProvider,
- ListContextProvider,
Datagrid,
TextField,
Pagination,
@@ -2836,13 +2834,14 @@ import {
const CustomList = () => {
const [page, setPage] = useState(1);
- const perPage = 50;
+ const [perPage, setPerPage] = useState(25);
+ const [sort, setSort] = useState({ field: 'id', order: 'ASC' })
const { data, total, loading, error } = useQuery({
type: 'getList',
resource: 'posts',
payload: {
pagination: { page, perPage },
- sort: { field: 'id', order: 'ASC' },
+ sort,
filter: {},
}
});
@@ -2854,33 +2853,29 @@ const CustomList = () => {
return ERROR: {error}
}
return (
-
- id),
- currentSort: { field: 'id', order: 'ASC' },
- selectedIds: [],
- }}
- >
-
-
-
-
-
-
-
+ id)}
+ currentSort={sort}
+ setSort={(field, order) => setSort({ field, order })}
+ >
+
+
+
+
);
}
```
{% endraw %}
+**Tip**: If you use the `` prop in this case, you must also set the `basePath` prop to let the `` compute the link to the record pages.
+
## Third-Party Components
You can find components for react-admin in third-party repositories.
diff --git a/examples/simple/src/customRouteLayout.tsx b/examples/simple/src/customRouteLayout.tsx
index b18666178d9..761eaeea956 100644
--- a/examples/simple/src/customRouteLayout.tsx
+++ b/examples/simple/src/customRouteLayout.tsx
@@ -26,13 +26,13 @@ const CustomRouteLayout = () => {
Found {total} posts !
diff --git a/packages/ra-ui-materialui/src/list/datagrid/Datagrid.tsx b/packages/ra-ui-materialui/src/list/datagrid/Datagrid.tsx
index b813ea10a0d..a5b5cf127c6 100644
--- a/packages/ra-ui-materialui/src/list/datagrid/Datagrid.tsx
+++ b/packages/ra-ui-materialui/src/list/datagrid/Datagrid.tsx
@@ -147,7 +147,7 @@ const Datagrid: FC = React.forwardRef((props, ref) => {
isRowExpandable,
]);
- const updateSort = useCallback(
+ const updateSortCallback = useCallback(
event => {
event.stopPropagation();
const newField = event.currentTarget.dataset.field;
@@ -163,6 +163,8 @@ const Datagrid: FC = React.forwardRef((props, ref) => {
[currentSort.field, currentSort.order, setSort]
);
+ const updateSort = setSort ? updateSortCallback : null;
+
const handleSelectAll = useCallback(
event => {
if (event.target.checked) {
@@ -184,10 +186,10 @@ const Datagrid: FC = React.forwardRef((props, ref) => {
const lastSelected = useRef(null);
useEffect(() => {
- if (selectedIds.length === 0) {
+ if (!selectedIds || selectedIds.length === 0) {
lastSelected.current = null;
}
- }, [selectedIds.length]);
+ }, [JSON.stringify(selectedIds)]); // eslint-disable-line react-hooks/exhaustive-deps
const handleToggleItem = useCallback(
(id, event) => {
@@ -276,7 +278,7 @@ const Datagrid: FC = React.forwardRef((props, ref) => {
)}
/>
)}
- {hasBulkActions && (
+ {hasBulkActions && selectedIds && (
size?: 'medium' | 'small';
// can be injected when using the component without context
basePath?: string;
- currentsort?: SortPayload;
+ currentSort?: SortPayload;
data?: RecordMap;
ids?: Identifier[];
loaded?: boolean;
diff --git a/packages/ra-ui-materialui/src/list/datagrid/DatagridBody.tsx b/packages/ra-ui-materialui/src/list/datagrid/DatagridBody.tsx
index c4d3d99468d..26517af90a5 100644
--- a/packages/ra-ui-materialui/src/list/datagrid/DatagridBody.tsx
+++ b/packages/ra-ui-materialui/src/list/datagrid/DatagridBody.tsx
@@ -49,7 +49,7 @@ const DatagridBody: FC = React.forwardRef(
[classes.clickableRow]: rowClick,
}),
expand,
- hasBulkActions,
+ hasBulkActions: hasBulkActions && selectedIds,
hover,
id,
key: id,
diff --git a/packages/ra-ui-materialui/src/list/datagrid/DatagridHeaderCell.tsx b/packages/ra-ui-materialui/src/list/datagrid/DatagridHeaderCell.tsx
index 59af2028ea9..1465e562f31 100644
--- a/packages/ra-ui-materialui/src/list/datagrid/DatagridHeaderCell.tsx
+++ b/packages/ra-ui-materialui/src/list/datagrid/DatagridHeaderCell.tsx
@@ -52,7 +52,8 @@ export const DatagridHeaderCell = (
variant="head"
{...rest}
>
- {field.props.sortable !== false &&
+ {updateSort &&
+ field.props.sortable !== false &&
(field.props.sortBy || field.props.source) ? (
void;
+ updateSort?: (event: any) => void;
}
export default memo(
diff --git a/packages/ra-ui-materialui/src/list/datagrid/DatagridRow.tsx b/packages/ra-ui-materialui/src/list/datagrid/DatagridRow.tsx
index 2259dfcf7d2..80d4f8a15e1 100644
--- a/packages/ra-ui-materialui/src/list/datagrid/DatagridRow.tsx
+++ b/packages/ra-ui-materialui/src/list/datagrid/DatagridRow.tsx
@@ -110,14 +110,16 @@ const DatagridRow: FC = React.forwardRef((props, ref) => {
const effect =
typeof rowClick === 'function'
- ? await rowClick(id, basePath, record)
+ ? await rowClick(id, basePath || `/${resource}`, record)
: rowClick;
switch (effect) {
case 'edit':
- history.push(linkToRecord(basePath, id));
+ history.push(linkToRecord(basePath || `/${resource}`, id));
return;
case 'show':
- history.push(linkToRecord(basePath, id, 'show'));
+ history.push(
+ linkToRecord(basePath || `/${resource}`, id, 'show')
+ );
return;
case 'expand':
handleToggleExpand(event);
@@ -137,6 +139,7 @@ const DatagridRow: FC = React.forwardRef((props, ref) => {
handleToggleSelection,
id,
record,
+ resource,
rowClick,
]
);