material-uimui-x-data-grid

MaterialUI (MUI). How to pass handlers via props to DataGrid component (for using them in column type=actions)


The docs say: https://mui.com/components/data-grid/columns/

If the column type is 'actions', you need to provide a getActions function that returns an array of actions available for each row (React elements). You can add the showInMenu prop on the returned React elements to signal the data grid to group these actions inside a row menu.

{
  field: 'actions',
  type: 'actions',
  getActions: (params: GridRowParams) => [
    <GridActionsCellItem icon={...} onClick={...} label="Delete" />,
    <GridActionsCellItem icon={...} onClick={...} label="Print" showInMenu />,
  ]
}

How to pass via props onClick handlers?

<DataGrid deleteHandler={...} printHandler={...} /> 

Solution

  • I'm sorry for stupid question. Of course we can pass handlers in columns prop :))) But I have found even better solution. I don't use calback handlers in action column, but I use component.

    getActions: (params: any) => [
                    <GridActionsCellItem
                        icon={<OpenIcon />}
                        label='Open'
                        component={Link}
                        to={`/counterparties/${params.id}`}
                    />