How to change the row selection outside the DataGrid in materialUI

I am trying to provide the names of selected rows and on click of the close button of the selected element I want to reflect that in the DataGrid.

How to achieve the same ?

Here Designer Cake is removed from the selected cakes in the top but it is not reflected in the data grid

Code goes like:

const [rows, setRows] = useState([]);
const [selectedRows, setSelectedRows] = useState([]);

return <div className="min-vh-100 min-vw-100 d-flex flex-column">
            <div className="m-4">
                Selected Cakes:
                {selectedRows.map((tag) => (
                    <span className="m-2  bg-success border border-2 px-2 py-1 rounded-pill border-bg-primary">
                        <span className="text-white">{tag}</span>
                        <GrClose
                            color="bg-white"
                            size="1rem"
                            className="ms-2"
                            // This will remove just from the selectedRows but doesn't reflect in the data grid.
                            onClick={(event) => {
                                setSelectedRows(
                                    selectedRows.filter((e) => e !== tag)
                                );
                            }}
                        />
                    </span>
                ))}
            </div>
            <div className="flex-grow-1 ">
                <DataGrid
                    className="min-vh-100"
                    getRowId={(row) => row._id}
                    rows={rows}
                    columns={columns}
                    pageSize={30}
                    rowsPerPageOptions={[30]}
                    checkboxSelection
                    disableSelectionOnClick
                    experimentalFeatures={{ newEditingApi: true }}
                    autoHeight={true}
                    autoPageSize={true}
                    onSelectionModelChange={(ids) => {
                        const selectedIDs = new Set(ids);
                        setSelectedRows(
                            rows
                                .filter((row) =>
                                    selectedIDs.has(row._id.toString())
                                )
                                .map((e) => e.name)
                        );
                    }}
                />
            </div>
        </div>

Solution

There is a selectionModel prop which let you set the ids of the rows you want to have selected by default. I updated the functionality to only store the ids of the selected fields. When rendering the "Selected Cakes" I loop over all the row and check if their id is in the selectedRows array, if true, render the tag. Updated the onClick on the tags to filter the array based on the id.

I hope this helps, goodluck.

const [rows, setRows] = useState([]);
const [selectedRows, setSelectedRows] = useState([]);

return (
  <div className="min-vh-100 min-vw-100 d-flex flex-column">
    <div className="m-4">
      Selected Cakes:
      {rows.map((tag) =>
        selectedRows.includes(tag.id) ? (
          <span
            key={tag.id}
            className="m-2  bg-success border border-2 px-2 py-1 rounded-pill border-bg-primary"
          >
            <span className="text-white">{tag.name}</span>
            <GrClose
              color="bg-white"
              size="1rem"
              className="ms-2"
              onClick={(event) => {
                setSelectedRows((prevSelectedRows) =>
                  prevSelectedRows.filter((id) => id !== tag._id)
                );
              }}
            />
          </span>
        ) : null
      )}
    </div>
    <div className="flex-grow-1 ">
      <DataGrid
        className="min-vh-100"
        getRowId={(row) => row._id}
        rows={rows}
        columns={columns}
        pageSize={30}
        rowsPerPageOptions={[30]}
        checkboxSelection
        disableSelectionOnClick
        experimentalFeatures={{ newEditingApi: true }}
        autoHeight={true}
        autoPageSize={true}
        onSelectionModelChange={(ids) => {
          setSelectedRows(ids);
        }}
        selectionModel={selectedRows}
      />
    </div>
  </div>
);