Search code examples
admin-on-rest

AOR: How to route to edit page when user click on a Datagrid row?

Background

I'm using the Admin on rest Datagrid component to render a REST endpoint. Like this:

<Datagrid>
    <TextField source="name" />
    <TextField source="email" />
    <EditButton />        
</Datagrid>

The EditButton routes the User to the corresponding edit page. All works great.

Question

But now I'm trying to work out how to route the user to the edit page on row click instead, without using the EditButton.

My attempts

My first idea was to use the rowOption onCellClick.

<Datagrid rowOptions={ {onClick: rowClick } } >
    <TextField source="name" />
    <TextField source="email" />
</Datagrid>

where the handle function looks like this.

const rowClick = (proxy, event) => {
    console.log(proxy, event);
    // how to get the resource id??
}

This captures the row click, and the event data is logged to the console. But as far as I can see the click event data doesn't contain information about the REST resource id of the row.

Has someone used the row click event to do something similar?

Or would a better approach be create a new component (for example ClickableField) to wrap the TextField's and add click event handlers in this wrapping component? Like so:

<Datagrid>
    <ClickableField><TextField source="name" /></ClickableField>
    <ClickableField><TextField source="email" /></ClickableField>
</Datagrid>
Solution

  • Material UI table property has an onRowSelection property. You can use this to define and set custom actions when row is selected

    http://www.material-ui.com/#/components/table

    You can access these properties in the 'options' prop of the AOR datagrid.

    If this fails your clickable field idea should work.