Search code examples
datagridcellreact-admin

In cell grid editing in react-admin

Is there any way we could do incell editing in the datagrid component instead of opening an edit component for each record. I know we can pass an edit component to the expand prop but that requires a click to show a form. I was hoping for direct in cell editing.

Solution

  • React-admin doesn't provide that feature by default. But since every component is replaceable in react-admin, nothing forbids you from doing it.

    A proof-of-concept implementation based on react-data-grid was proposed in a pull request in the react-admin repository, see https://github.com/marmelab/react-admin/pull/1923.

    const columns = [
    { key: 'id', name: 'ID', resizable: true, locked: true, sortable: true },
    {
        key: 'name',
        name: 'Name',
        editable: true,
        resizable: true,
        sortable: true,
    },
];
const UserList = props => (
   <List {...props}>
       <EditableDatagrid columns={columns} pageSize={5} />
   </List>
)