[DataGrid] Alternative actions column definition API

[cherniavskii]

Closes #12429

Before:

function Demo() {
  const deleteUser = (id) => {
    console.log('deleteUser', id);
  };
  const toggleAdmin = (id) => {
    console.log('toggleAdmin', id);
  };

  const columns: GridColDef[] = [
    {
      field: 'actions',
      type: 'actions',
      getActions: (params) => [
        <GridActionsCellItem
          icon={<DeleteIcon />}
          label="Delete"
          onClick={() => deleteUser(params.id)}
        />,
        <GridActionsCellItem
          icon={<SecurityIcon />}
          label="Toggle Admin"
          onClick={() => toggleAdmin(params.id)}
          showInMenu
        />,
      ],
    },
  ];

  return <DataGrid columns={columns} rows={[{ id: 1 }]} />;
}

After:

interface ActionHandlers {
  deleteUser: (id: GridRowId) => void;
  toggleAdmin: (id: GridRowId) => void;
}

const ActionHandlersContext = React.createContext<ActionHandlers>({
  deleteUser: () => {},
  toggleAdmin: () => {},
});

function ActionsCell(props: GridRenderCellParams) {
  const { deleteUser, toggleAdmin } = React.useContext(ActionHandlersContext);

  return (
    <GridActionsCell {...props}>
      <GridActionsCell.Item
        icon={<DeleteIcon />}
        label="Delete"
        onClick={() => deleteUser(props.id)}
      />
      <GridActionsCell.Item
        icon={<SecurityIcon />}
        label="Toggle Admin"
        onClick={() => toggleAdmin(props.id)}
        showInMenu
      />
    </GridActionsCell>
  );
}

const columns: GridColDef[] = [{
  field: 'actions',
  type: 'actions',
  renderCell: (params) => <ActionsCell {...params} />,
}];

function Demo() {
  const actionsHandlers = React.useMemo<ActionHandlers>(
    () => ({
      deleteUser: (id) => {
        console.log('deleteUser', id);
      },
      toggleAdmin: (id) => {
        console.log('toggleAdmin', id);
      },
    }),
    [],
  );

  return (
    <ActionHandlersContext.Provider value={actionsHandlers}>
      <DataGrid columns={columns} rows={[{ id: 1 }]} />
    </ActionHandlersContext.Provider>
  );
}

The biggest benefit is that it's easy to use React Context for passing virtually anything to actions – renderCell returns a single element, as opposed to getActions: https://deploy-preview-15041--material-ui-x.netlify.app/x/react-data-grid/editing/#full-featured-crud

TODO:

• description with examples

[mui-bot]

Deploy preview: https://deploy-preview-15041--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against 42d33ab