Custom Control in a standard grid

Question

I need to add a react custom control in a grid column. Can I do it without make a custom grid from scratch?

What I'm thinking about is something like this ReactPeoplePicker, but added to an existing grid.

Answer 1

Three weeks later I can answer myself: yes, I can. This is what I did:

Create a PCF with Powerapps CLI (I choose dataset template) and installs dependencies:

npm install
npm install react @types/react react-dom @types/react-dom @fluentui/react

Create a peoplepicker.tsx and copy-paste react component code from https://developer.microsoft.com/es-ES/fluentui#/controls/web/peoplepicker.

In index.ts file I import react, react-dom and component:

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { picker } from './components/peoplepicker'

Define and initialize context and container variables:

export class PeoplePicker implements ComponentFramework.StandardControl<IInputs, IOutputs> {

private context:ComponentFramework.Context<IInputs>;
private container:HTMLDivElement;

/**
 * Empty constructor.
 */
constructor() { }

public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container: HTMLDivElement)
{
    // Add control initialization code
    this.context = context;
    this.container = container;

Render the react component and append to container:

public updateView(context: ComponentFramework.Context<IInputs>): void
{
    ReactDOM.render(
        React.createElement(PeoplePicker),
        this.container);

Build solution and import to Power Apps portal:

npm run build
pac pcf push --publisher-prefix myPrefix

Finally, in Power Apps Portal, navigate to grid (or subgrid) properties and add a custom control. Keep in mind may be classic mode will be required.