[data grid] How to move checked row from one grid to another grid in MUI Datagrid premium?

[yashwant-raut]

Summary

I have two MUI datagrid side by side let say left grid a sending grid and right grid a receiving grid I have added checkbox selection to the sending grid and one button in the Grid toolbar. What I want is user will select a row using checkbox and click on assign row and that selected row will be added to the receiving grid

Examples

Currently How I have done it. This is codesandbox link please check this out
I want know is this correct way to do it are there any other way where I can use MUI API. I have premium subscription so I can access all the API's. Is there any example.

My method

Created context which will be consumed by both sending grid and receiving grid and whenever user select row and click on assign button. context will be updated and it will save selected row data in that context. As receiving grid also consuming that context It will get re rendered and it will use stored data in context and append in its rows and this is how new row will be added.

1. Select row using checkbox this will trigger onRowSelectionModelChange and on this callback I have retrieved selected row data using this method

const onRowsSelectionHandler = (ids) => {
    const selectedRowsData = ids.map((id) => rows.find((row) => row.id === id));
    setSelectedRows(selectedRowsData);

  };

and set this data in state to use it later. on Assign button click I will store saved array data in context

const { updateArray } = useArrayContext();
  
 function Assigntoolbar() {
    const handleClick = () => {   
      updateArray(selectedRow);
    };

    return (
      <GridToolbarContainer>
        <Button
          color="primary"
          startIcon={<ArrowForwardIcon />}
          onClick={handleClick}
        >
          Assingn Selected
        </Button>
      </GridToolbarContainer>
    );
  

And in receiving grid I have updated row like this

export default function ReceivingGrid() {
  const [rowsData, setRows] = React.useState(rows);
  const { array } = useArrayContext();
 
 
  
React.useMemo(() => {
   if (array.length > 0) {
    setRows((prevRows) => [...prevRows, ...array]);
  }
}, [array])

  return (
    <div style={{ height: 400, width: "100%" }}>
      <DataGridPro
        rows={rowsData}
        columns={columns}
        checkboxSelection
      />
    </div>
  );
}

Motivation

I have application where user should have ability to add data from one grid to another grid. We also thought about using drag and drop approach but that approach does not involve ease of access to user.

Search keywords: How to move checked row from one grid to another grid in MUI Datagrid premium?

[cherniavskii]

Hi @yashwant-raut
Interesting use case!
Overall, your approach makes sense to me!
A few comments from me:

1. Using React context works just fine here. A bit simpler solution would be to use a pubsub pattern for communication between the grids.
   For example, using mitt():

   const emitter = mitt();
   
   // Send the selected rows in grid 1
   emitter.emit('moveRows', { rows });
   
   // Receive the selected rows in grid 2
   React.useEffect(() => {
       const onMoveRows = ({ rows }) =>  {
   	  // ...
   	};
   	emitter.on('moveRows', onMoveRows);
   	return () => emitter.off('moveRows', onMoveRows);
   })

2. You have to make sure you don't have duplicated row ids, which is currently the case in the linked demo:
   

[yashwant-raut]

@cherniavskii Thanks for going thorugh codesandbox and my question.
I have never heard about pubsub pattern for communication between the grids. Thanks for giving me context.
I will go through this and try to implement pubsub pattern. It would be great if you could point me to a link to a hosted example where this pattern is used in MUI datagrid.

"You have to make sure you don't have duplicated row ids, which is currently the case in the linked demo:
"
yes for that part I am thinking about creating a dynamic GUID and assign to the rows.

MUI has this method updateRows
"Is it more appropriate to use this method instead of what I have already done?" does this have more performance benefits?
I am going to handle a large dataset in Grid.

Again thanks for the help.

[michelengelen]

@cherniavskii Thanks for going thorugh codesandbox and my question. I have never heard about pubsub pattern for communication between the grids. Thanks for giving me context. I will go through this and try to implement pubsub pattern. It would be great if you could point me to a link to a hosted example where this pattern is used in MUI datagrid.

The pubsub pattern is nothing we came up with, but a software design pattern that can be used in a multitude of ways. Here is a basic overview of the pattern explained: Pub/Sub Pattern. In your case both grids could be publishing and subscribing to the events to allow for a bidirectional interaction

"You have to make sure you don't have duplicated row ids, which is currently the case in the linked demo: " yes for that part I am thinking about creating a dynamic GUID and assign to the rows.

👍

MUI has this method updateRows "Is it more appropriate to use this method instead of what I have already done?" does this have more performance benefits? I am going to handle a large dataset in Grid.

Since updateRows can be used to update a subset of rows it certainly has perf benefits.

[yashwant-raut]

@michelengelen thanks for the reply will try to implement this way.

[github-actions]

⚠️ This issue has been closed.
If you have a similar problem, please open a new issue and provide details about your specific problem.
If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.

How did we do @yashwant-raut?
Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.