How can I load new data in UI DataGrid when I select another DataGrid row correctly?

Question

I have two DataGrid:

<DataGrid density="compact" disableDensitySelector
    rows={data}
    columns={columns}
    onRowClick={handleRowClick}
    style={{ width: '70%', height: '350px', marginTop: '15px', marginLeft: '10px', marginRight: '15px' }}
    />

<DataGrid density="compact" disableDensitySelector
    rows={teamPerson} //teamPerson will not have values ​​until I click a row in the first grid
    columns={columns2}
    style={{ width: '30%', height: '350px', marginTop: '15px', marginRight: '10px' }}

In my data, I have a column that is a list of strings, that instead of being in the first Grid, I want it to be the data for the second Grid, and when I click a row, I execute the onRowClick of the first Grid:

const handleRowClick = (
    params
) => {
    teamPerson = splitData(params.row.Users);
};

That teamPerson will have the new data that I want to have in the second Grid (the USers column of the data is the one that has the Array).

const columns = [ 
    { headerName: "Team Id", field: "TeamId", width: 200 },
    { headerName: "Team Name", field: "TeamName", width: 200 },
    { headerName: "Email", field: "Email", width: 150 }
]

const columns2 = [
    { headerName: "Team members", field: "user", width: 200 }
]

function splitData(str: any) {
    const response = [];
    let cont = 0;

    str.forEach((element) => teamPerson.push(
        { id: cont++, user: element }
    ));

    return response;
}

How can I access the second grid or update its value?

Answer 1

You can update the 2nd DataGrid's rows dynamically based on what row the user selected in the 1st DataGrid.

I added users as part of each team. Which helps me filter and set data for teamPerson state. Check the example below: 👇

import React, { useState } from 'react';
import { DataGrid } from '@mui/x-data-grid';

// Sample data for the first grid
const data = [
  { id: 1, TeamId: 'T001', TeamName: 'Team A', Email: '[email protected]', Users: ['User1', 'User2'] },
  { id: 2, TeamId: 'T002', TeamName: 'Team B', Email: '[email protected]', Users: ['User3', 'User4'] },
];

const columns = [
  { headerName: "Team Id", field: "TeamId", width: 200 },
  { headerName: "Team Name", field: "TeamName", width: 200 },
  { headerName: "Email", field: "Email", width: 150 }
];

const columns2 = [
  { headerName: "Team members", field: "user", width: 200 }
];

// Splitting data into the desired format for the second grid
function splitData(str) {
  const response = [];
  let cont = 0;

  str.forEach((element) => response.push(
    { id: cont++, user: element }
  ));

  return response;
}

const MyComponent = () => {
  const [teamPerson, setTeamPerson] = useState([]);

  const handleRowClick = (params) => {
    const newTeamPerson = splitData(params.row.Users);
    setTeamPerson(newTeamPerson);
  };

  return (
    <div>
      <DataGrid
        rows={data}
        columns={columns}
        onRowClick={handleRowClick}
      />
      <DataGrid
        rows={teamPerson}
        columns={columns2}
      />
    </div>
  );
};

export default MyComponent;