[RFC] Improve custom datagrid columns UX

[Janpot]

What's the problem? 🤔

Creating custom datagrid columns is cumbersome:

• You have to create a new custom component, and change all properties to the ones described in the docs. This could introduce typos
• Then you'll have to locate the component in the dropdown amidst code components that are not cell renderers

What are the requirements? ❓

The workflow should be easier

What are our options? 💡

In the datagrid column definitions:

• change the dropdown to an autocomplete
• add a "create" option to the autocomplete that initializes a new custom component file and automatically selects it for the column. The file is prefilled with a different template that the regular custom components:

import * as React from "react";
import { createComponent, CellRendererProps } from "@mui/toolpad-core";

function CellRenderer({ value }: CellRendererProps) {
  return <>{value}</>;
}

export default createComponent(CellRenderer);

We could optionally take this one step further by introducing a createCellRenderer API that allows us to differentiate this component from regular custom components. The benefit of this would be that we'd be able to exclude these components from the component library, and exclude regular code components from the datagrid custom column selector

[apedroferreira]

+1 for having a template help the user as opposed to them having to follow the docs manually.

createCellRenderer also sounds like a good concept, as I'd imagine the components most users would create for custom columns would not be meant to be used anywhere else.

Restricting the selection to "useful" components and having an autocomplete instead of dropdown would also be clear improvements, especially for large projects.