diff --git a/docs/List.md b/docs/List.md index 57d8b234d3d..7af1cf7f59e 100644 --- a/docs/List.md +++ b/docs/List.md @@ -756,6 +756,7 @@ Here are all the props accepted by the component: * [`rowStyle`](#row-style-function) * [`rowClick`](#rowclick) * [`expand`](#expand) +* [`isRowSelectable`](#isrowselectable) It renders as many columns as it receives `` children. @@ -906,6 +907,20 @@ const PostList = props => ( ) ``` + +### `isRowSelectable` + +You can customize which rows will show a selection checkbox using the `isRowSelectable` prop. It expects a function that will receive the record of each `` and returns a boolean expression. For instance, this code shows a checkbox only for rows with an id greater than 300: + +```jsx +export const PostList = props => ( + + record.id > 300 }> + ... + + +); +``` {% endraw %} ![expandable panel](./img/datagrid_expand.gif) diff --git a/packages/ra-ui-materialui/src/list/Datagrid.js b/packages/ra-ui-materialui/src/list/Datagrid.js index 865a34f632d..bbd4d1da8a7 100644 --- a/packages/ra-ui-materialui/src/list/Datagrid.js +++ b/packages/ra-ui-materialui/src/list/Datagrid.js @@ -113,7 +113,7 @@ function Datagrid({ classes: classesOverride, ...props }) { setSort, size = 'small', total, - canSelectRow, + isRowSelectable, version, ...rest } = props; @@ -133,15 +133,15 @@ function Datagrid({ classes: classesOverride, ...props }) { selectedIds.filter(id => !ids.includes(id)) ); onSelect( - canSelectRow - ? all.filter(id => canSelectRow(data[id])) + isRowSelectable + ? all.filter(id => isRowSelectable(data[id])) : all ); } else { onSelect([]); } }, - [data, ids, onSelect, canSelectRow, selectedIds] + [data, ids, onSelect, isRowSelectable, selectedIds] ); /** @@ -171,7 +171,9 @@ function Datagrid({ classes: classesOverride, ...props }) { return null; } - const all = canSelectRow ? ids.filter(id => canSelectRow(data[id])) : ids; + const all = isRowSelectable + ? ids.filter(id => isRowSelectable(data[id])) + : ids; /** * After the initial load, if the data for the list isn't empty, @@ -242,7 +244,7 @@ function Datagrid({ classes: classesOverride, ...props }) { resource, rowStyle, selectedIds, - canSelectRow, + isRowSelectable, version, }, children @@ -276,7 +278,7 @@ Datagrid.propTypes = { setSort: PropTypes.func, total: PropTypes.number, version: PropTypes.number, - canSelectRow: PropTypes.func, + isRowSelectable: PropTypes.func, }; Datagrid.defaultProps = { diff --git a/packages/ra-ui-materialui/src/list/DatagridBody.js b/packages/ra-ui-materialui/src/list/DatagridBody.js index 26982582a72..84064c1d54e 100644 --- a/packages/ra-ui-materialui/src/list/DatagridBody.js +++ b/packages/ra-ui-materialui/src/list/DatagridBody.js @@ -24,7 +24,7 @@ const DatagridBody = ({ selectedIds, styles, version, - canSelectRow, + isRowSelectable, ...rest }) => ( @@ -48,7 +48,7 @@ const DatagridBody = ({ record: data[id], resource, rowClick, - selectable: !canSelectRow || canSelectRow(data[id]), + selectable: !isRowSelectable || isRowSelectable(data[id]), selected: selectedIds.includes(id), style: rowStyle ? rowStyle(data[id], rowIndex) : null, }, @@ -75,7 +75,7 @@ DatagridBody.propTypes = { rowStyle: PropTypes.func, selectedIds: PropTypes.arrayOf(PropTypes.any), styles: PropTypes.object, - canSelectRow: PropTypes.func, + isRowSelectable: PropTypes.func, version: PropTypes.number, };