MUI Editors

Just like you can use MUI to render filters, you can also use it to render editors.

Basic Example

Live Editor

function App() { const columns = [ { ...createColumn("firstName", "string", "First Name"), editOptions: { enableEdit: true, editStartMode: EditStartMode.Click, editorRenderer: TextInputEditor, }, }, { ...createColumn("lastName", "string", "Last Name"), editOptions: { enableEdit: true, editStartMode: EditStartMode.Click, editorRenderer: TextInputEditor, }, }, { ...createColumn("stateCode", "string", "Territory"), editOptions: { enableEdit: true, editStartMode: EditStartMode.Click, editorRenderer: SelectEditor, }, }, { ...createColumn("department", "string", "Department"), editOptions: { enableEdit: true, editStartMode: EditStartMode.DoubleClick, editorRenderer: SelectEditor, }, }, ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ adapter: materialAdapter, enableFocusCellHighlight: true, behaviors: [createEditBehavior({}), createFilterBehavior({})], dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, enableFilters: false, }} /> ); }

function App() {
  const columns = [
    {
      ...createColumn("firstName", "string", "First Name"),
      editOptions: {
        enableEdit: true,
        editStartMode: EditStartMode.Click,
        editorRenderer: TextInputEditor,
      },
    },
    {
      ...createColumn("lastName", "string", "Last Name"),
      editOptions: {
        enableEdit: true,
        editStartMode: EditStartMode.Click,
        editorRenderer: TextInputEditor,
      },
    },
    {
      ...createColumn("stateCode", "string", "Territory"),
      editOptions: {
        enableEdit: true,
        editStartMode: EditStartMode.Click,
        editorRenderer: SelectEditor,
      },
    },
    {
      ...createColumn("department", "string", "Department"),
      editOptions: {
        enableEdit: true,
        editStartMode: EditStartMode.DoubleClick,
        editorRenderer: SelectEditor,
      },
    },
  ];

  return (
    <ReactDataGrid
      style={{ height: "400px", width: "100%" }}
      gridOptions={{
        adapter: materialAdapter,
        enableFocusCellHighlight: true,
        behaviors: [createEditBehavior({}), createFilterBehavior({})],
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
        enableFilters: false,
      }}
    />
  );
}

Result

Demo

First Name

Last Name

Territory

Department

Brice

Rittwage

TX

Sales

CHUN-FEN

Hukill

NY

IT

Takahiro

Aksu

NY

HR

Corinthians

Orchard

TX

Sales

Karna

Arledge

CA

HR

Takehisa

Akmanligil

NJ

Sales

Ranjana

Anupoju

NY

Accounting

Erico

Riddell

CA

HR

Llora

Lovig

NY

Sales

TIBBY

Iburg

NY

HR

Masanori

ASENCIO

CA

Sales

Jeevan

EEddddy@

NJ

Sales

FAYIZ

Ayman

TX

Accounting

Rassoul

Asaba

TX

HR

Emerito

Meussner

NY

HR

Luigia

Uisprapassorn

CA

Sales

Gwenda

Weilert

TX

IT

|

466 item(s)

Let's pick apart the code above:

• We're using the materialAdapter to render the grid.
• We're using the createEditBehavior to enable editing. This is required for the enableEdit option to work.
• We're using the createFilterBehavior to enable filtering. This is required for dropdown editors to work, because they use the same distinct value detection logic as the filter behavior.
• We're using the TextInputEditor to render the firstName and lastName columns.
• We're using the SelectEditor to render the stateCode and department columns.
• We're using the enableFocusCellHighlight option to highlight the cell that has focus.
• We're using the enableFilters option to disable filtering (even though we're using the createFilterBehavior behavior - because we just need the distinct value detection logic)
• We're using the editStartMode option to specify when editing should start. In this case, we're using EditStartMode.Click for the firstName and lastName columns and EditStartMode.DoubleClick for the stateCode and department columns. (There is also Excel-like editing, but we'll cover that in a later section.)
• We're using the editorRenderer option to specify the editor - this ensure you only bundle the editors you need, (although the editors are very small, so it's not a big deal if you bundle them all).

Editor Source Code

You can find the source code for the All the editors in the ReactDataGrid GitHub repo. Note, the code for the regular editors is in the editors folder, is the EXACT same code as the MUI editors, because the swap of the MUI components happens in the adapter, so the editors, filters, and renderers all just work with the MUI adapter.

MUI Custom Editor

Lets use the MUI Switch control to render a custom editor.

Live Editor

function App() { const CustomEditor = (props) => { const node = props.node; const api = getApi(node); const { rowIdentifier, columnIdentifier } = getRowColFromNode(node); const chg = api.hasChange(rowIdentifier, columnIdentifier); const val = chg ? chg.newValue : resolveExpression( node.rowPosition.data, node.columnPosition.column.dataField ); const checked = val; const handleChange = (newVal /* : boolean */) => { api.addChange(node.rowPosition, node.columnPosition, newVal); }; return ( <Switch checked={checked} onChange={(e) => { handleChange(e.target.checked); }} /> ); }; const columns = [ { ...createColumn("firstName", "string", "First Name"), editOptions: { enableEdit: true, editStartMode: EditStartMode.Click, editorRenderer: TextInputEditor, }, }, { ...createColumn("lastName", "string", "Last Name"), editOptions: { enableEdit: true, editStartMode: EditStartMode.Click, editorRenderer: TextInputEditor, }, }, { ...createColumn("isActive", "boolean", "Is Active"), editOptions: { enableEdit: true, editStartMode: EditStartMode.Click, editorRenderer: CustomEditor, }, }, ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ adapter: materialAdapter, enableFocusCellHighlight: true, behaviors: [createEditBehavior({}), createFilterBehavior({})], dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, enableFilters: false, }} /> ); }

function App() {
  const CustomEditor = (props) => {
    const node = props.node;
    const api = getApi(node);
    const { rowIdentifier, columnIdentifier } = getRowColFromNode(node);
    const chg = api.hasChange(rowIdentifier, columnIdentifier);
    const val = chg
      ? chg.newValue
      : resolveExpression(
          node.rowPosition.data,
          node.columnPosition.column.dataField
        );
    const checked = val;
    const handleChange = (newVal /* : boolean */) => {
      api.addChange(node.rowPosition, node.columnPosition, newVal);
    };

    return (
      <Switch
        checked={checked}
        onChange={(e) => {
          handleChange(e.target.checked);
        }}
      />
    );
  };
  const columns = [
    {
      ...createColumn("firstName", "string", "First Name"),
      editOptions: {
        enableEdit: true,
        editStartMode: EditStartMode.Click,
        editorRenderer: TextInputEditor,
      },
    },
    {
      ...createColumn("lastName", "string", "Last Name"),
      editOptions: {
        enableEdit: true,
        editStartMode: EditStartMode.Click,
        editorRenderer: TextInputEditor,
      },
    },
    {
      ...createColumn("isActive", "boolean", "Is Active"),
      editOptions: {
        enableEdit: true,
        editStartMode: EditStartMode.Click,
        editorRenderer: CustomEditor,
      },
    },
  ];

  return (
    <ReactDataGrid
      style={{ height: "400px", width: "100%" }}
      gridOptions={{
        adapter: materialAdapter,
        enableFocusCellHighlight: true,
        behaviors: [createEditBehavior({}), createFilterBehavior({})],
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
        enableFilters: false,
      }}
    />
  );
}

Result

Demo

First Name

Last Name

Is Active

Brice

Rittwage

No

CHUN-FEN

Hukill

No

Takahiro

Aksu

No

Corinthians

Orchard

Yes

Karna

Arledge

No

Takehisa

Akmanligil

Yes

Ranjana

Anupoju

Yes

Erico

Riddell

No

Llora

Lovig

Yes

TIBBY

Iburg

No

Masanori

ASENCIO

No

Jeevan

EEddddy@

Yes

FAYIZ

Ayman

No

Rassoul

Asaba

Yes

Emerito

Meussner

Yes

Luigia

Uisprapassorn

No

Gwenda

Weilert

No

|

466 item(s)

The code above is very similar to the previous example, but we're using a custom editor for the isActive column. If you look at the code for the custom editor, you'll see that it's very similar to the editors in the ReactDataGrid GitHub repo

Saving changes

The grid does not automatically save changes. It will not modify your data. You need to save the changes yourself. The api object has a getChanges method that returns an array of changes. You can then save the changes to your data however you want.

Adding a custom MUI editor

As you can see from the previous example, it's very easy to add a custom editor. You just need to create a component that renders the editor and pass it to the editorRenderer option. The editor component will receive the following props:

• node - The node for the cell being edited. The node is an object of type VirtualTreeNode, you can see the documentation for it here. But in a nutshell, this will give you access to all the properties of the grid.

Let's look at how we can use the excellent AutoComplete control from MUI to render a custom editor. We will also use a MUI dialog to render the editor.

Live Editor

function App() { const CustomEditor = (props) => { const node = props.node; const api = getApi(node); const [value, setValue] = useState/* <string[]> */([]); const handleClose = (e/* : PreventableEvent */) => { api.cancelEdit(); e.stopPropagation(); //this is needed otherwise the grid thinks you clicked on the cell and will open the editor again }; const onSave = (e/* : PreventableEvent */) => { api.addChange(node.rowPosition, node.columnPosition, value); api.cancelEdit(); e.stopPropagation(); //this is needed otherwise the grid thinks you clicked on the cell and will open the editor again }; const { rowIdentifier, columnIdentifier } = getRowColFromNode(node); const defaultValue = (api.hasChange(rowIdentifier, columnIdentifier) && api.hasChange(rowIdentifier, columnIdentifier).newValue) || resolveExpression( node.rowPosition.data, node.columnPosition.column.dataField ) || []; return ( <div> <Dialog open={true} onClose={handleClose}> <DialogTitle>Edit Distinct Values</DialogTitle> <DialogContent> <DialogContentText> Please select the countries this employee has traveled to. </DialogContentText> <Autocomplete multiple id="tags-filled" defaultValue={defaultValue /* as string[] */} freeSolo options={["United States", "United Kingdom", "France", "Canada"]} onKeyDown={(e) => { if (e.key === "Enter") { e.stopPropagation(); } }} onChange={(e, value) => { setValue(value); }} renderTags={(value/* : readonly string[] */, getTagProps) => value.map((option/* : string */, index/* : number */) => ( <Chip variant="outlined" label={option} {...getTagProps({ index })} /> )) } renderInput={(params) => ( <TextField {...params} variant="filled" placeholder="Distinct Values" /> )} /> </DialogContent> <DialogActions> <Button onClick={handleClose}>Cancel</Button> <Button onClick={onSave}>Save</Button> </DialogActions> </Dialog> </div> ); }; const columns = [ { ...createColumn("firstName", "string", "First Name"), editOptions: { enableEdit: true, editStartMode: EditStartMode.Click, editorRenderer: TextInputEditor, }, }, { ...createColumn("lastName", "string", "Last Name"), editOptions: { enableEdit: true, editStartMode: EditStartMode.Click, editorRenderer: TextInputEditor, }, }, { ...createColumn("country", "string", "Country"), editOptions: { enableEdit: true, editStartMode: EditStartMode.Click, editorRenderer: CustomEditor, }, }, ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ adapter: materialAdapter, enableFocusCellHighlight: true, behaviors: [createEditBehavior({}), createFilterBehavior({})], dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, enableFilters: false, }} /> ); }

function App() {
  const CustomEditor = (props) => {
    const node = props.node;
    const api = getApi(node);
    const [value, setValue] = useState/* <string[]> */([]);
    const handleClose = (e/* : PreventableEvent */) => {
      api.cancelEdit();
      e.stopPropagation(); //this is needed otherwise the grid thinks you clicked on the cell and will open the editor again
    };
    const onSave = (e/* : PreventableEvent */) => {
      api.addChange(node.rowPosition, node.columnPosition, value);
      api.cancelEdit();
      e.stopPropagation(); //this is needed otherwise the grid thinks you clicked on the cell and will open the editor again
    };
    const { rowIdentifier, columnIdentifier } = getRowColFromNode(node);
    const defaultValue =
      (api.hasChange(rowIdentifier, columnIdentifier) &&  api.hasChange(rowIdentifier, columnIdentifier).newValue) || 
      resolveExpression(
        node.rowPosition.data,
        node.columnPosition.column.dataField
      ) ||
      [];

    return (
      <div>
        <Dialog open={true} onClose={handleClose}>
          <DialogTitle>Edit Distinct Values</DialogTitle>
          <DialogContent>
            <DialogContentText>
              Please select the countries this employee has traveled to.
            </DialogContentText>
            <Autocomplete
              multiple
              id="tags-filled"
              defaultValue={defaultValue /* as string[] */}
              freeSolo
              options={["United States", "United Kingdom", "France", "Canada"]}
              onKeyDown={(e) => {
                if (e.key === "Enter") {
                  e.stopPropagation();
                }
              }}
              onChange={(e, value) => {
                setValue(value);
              }}
              renderTags={(value/* : readonly string[] */, getTagProps) =>
                value.map((option/* : string */, index/* : number */) => (
                  <Chip
                    variant="outlined"
                    label={option}
                    {...getTagProps({ index })}
                  />
                ))
              }
              renderInput={(params) => (
                <TextField
                  {...params}
                  variant="filled"
                  placeholder="Distinct Values"
                />
              )}
            />
          </DialogContent>
          <DialogActions>
            <Button onClick={handleClose}>Cancel</Button>
            <Button onClick={onSave}>Save</Button>
          </DialogActions>
        </Dialog>
      </div>
    );
  };

  const columns = [
    {
      ...createColumn("firstName", "string", "First Name"),
      editOptions: {
        enableEdit: true,
        editStartMode: EditStartMode.Click,
        editorRenderer: TextInputEditor,
      },
    },
    {
      ...createColumn("lastName", "string", "Last Name"),
      editOptions: {
        enableEdit: true,
        editStartMode: EditStartMode.Click,
        editorRenderer: TextInputEditor,
      },
    },
    {
      ...createColumn("country", "string", "Country"),
      editOptions: {
        enableEdit: true,
        editStartMode: EditStartMode.Click,
        editorRenderer: CustomEditor,
      },
    },
  ];

  return (
    <ReactDataGrid
      style={{ height: "400px", width: "100%" }}
      gridOptions={{
        adapter: materialAdapter,
        enableFocusCellHighlight: true,
        behaviors: [createEditBehavior({}), createFilterBehavior({})],
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
        enableFilters: false,
      }}
    />
  );
}

Result

Demo

First Name

Last Name

Country

Brice

Rittwage

CHUN-FEN

Hukill

Takahiro

Aksu

Corinthians

Orchard

Karna

Arledge

Takehisa

Akmanligil

Ranjana

Anupoju

Erico

Riddell

Llora

Lovig

TIBBY

Iburg

Masanori

ASENCIO

Jeevan

EEddddy@

FAYIZ

Ayman

Rassoul

Asaba

Emerito

Meussner

Luigia

Uisprapassorn

Gwenda

Weilert

|

466 item(s)