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

Loading...

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

Loading...

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

Loading...