Skip to content
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

Jump to bottom

Update Datagrid's isRowSelectable description and examples #8901

Merged
merged 1 commit into from
May 10, 2023
Merged

Update Datagrid's isRowSelectable description and examples #8901

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
19 changes: 10 additions & 9 deletions docs/Datagrid.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ Additional props are passed down to [the Material UI `<Table>` element](https://

By default, `<Datagrid>` renders its body using `<DatagridBody>`, an internal react-admin component. You can pass a custom component as the `body` prop to override that default. And by the way, `<DatagridBody>` has a `row` prop set to `<DatagridRow>` by default for the same purpose. `<DatagridRow>` receives the row `record`, the `resource`, and a copy of the `<Datagrid>` children. That means you can create custom `<Datagrid>` logic without copying several components from the react-admin source.

For instance, the `<Datagrid isRowSelectable>` prop allows to hide the selection checkbox for some records. To show a *disabled* checkbox instead of hiding it, you can override `<DatagridRow>` and `<DatagridBody>` as follows:
For instance, the `<Datagrid isRowSelectable>` prop allows to disable the selection checkbox for some records. To *hide* checkboxes instead of disabling them, you can override `<DatagridRow>` and `<DatagridBody>` as follows:

```jsx
// in src/PostList.js
Expand All @@ -74,12 +74,13 @@ const MyDatagridRow = ({ record, id, onToggleItem, children, selected, selectabl
<TableRow>
{/* first column: selection checkbox */}
<TableCell padding="none">
<Checkbox
disabled={selectable}
checked={selected}
onClick={event => onToggleItem(id, event)}
/>
</TableCell>
{selectable && (
<Checkbox
checked={selected}
onClick={event => onToggleItem(id, event)}
/>
)}
</TableCell>
{/* data columns based on children */}
{React.Children.map(children, field => (
<TableCell key={`${id}-${field.props.source}`}>
Expand Down Expand Up @@ -581,9 +582,9 @@ const PostList = () => (

## `isRowSelectable`

You can customize which rows show a selection checkbox using the `isRowSelectable` prop. It expects a function that receives the row record and returns a boolean.
You can customize which rows show an enabled selection checkbox using the `isRowSelectable` prop. It expects a function that receives the row record and returns a boolean.

For instance, this code shows a checkbox only for rows with an id greater than 300:
For instance, this code enables a checkbox only for rows with an id greater than 300:

```jsx
import { List, Datagrid } from 'react-admin';
Expand Down