Merge pull request #4064 from WiXSL/canrowselect-docs-next

Added documentation for canRowSelect prop.
marmelab · Nov 28, 2019 · 2e91924 · 2e91924
2 parents 5edd79b + 5b416dd
commit 2e91924
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 10 deletions.
diff --git 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 `<Field>` children.
 
@@ -906,6 +907,20 @@ const PostList = props => (
     </List>
 )
 ```
+
+### `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 `<DatagridRow>` 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 => (
+    <List {...props}>
+        <Datagrid isRowSelectable={ record => record.id > 300 }>
+            ...
+        </Datagrid>
+    </List>
+);
+```
 {% 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
@@ -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
@@ -24,7 +24,7 @@ const DatagridBody = ({
     selectedIds,
     styles,
     version,
-    canSelectRow,
+    isRowSelectable,
     ...rest
 }) => (
     <TableBody className={classnames('datagrid-body', className)} {...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,
 };