Getting data of Material UI DataGrid

Question

I'm working on tables with Material UI. There is data in table. I want to get its data to pass it to the next component. I tried tableRef = useRef() but failed. It returns undefined . How could it be done? Code below:

import React, { useEffect, useRef } from "react";
import { DataGrid, GridRowsProp, GridColDef, GridToolbarContainer, GridToolbarExport } from "@mui/x-data-grid";
import { Stack, Button } from "@mui/material";
import DeleteIcon from "@mui/icons-material/Delete";
import EditIcon from "@mui/icons-material/Edit";
import FolderIcon from "@mui/icons-material/Folder";
import KeyboardTabIcon from "@mui/icons-material/KeyboardTab";

const columnOptions = {
  editable: true,
  headerAlign: "center",
  width: 500,
  align: "center",
  disableColumnMenu: true,
  sortable: false,
};

const rows = [
  { id: 1, col1: "Kontreyler terminali", col2: 0, col3: 0 },
  { id: 2, col1: "Acer", col2: 10, col3: 10 },
  { id: 3, col1: "Microsoft", col2: 20, col3: 20 },
  { id: 4, col1: "Samsung", col2: 30, col3: 30 },
  { id: 5, col1: "Apple", col2: 40, col3: 40 },
];

const columns = [
  { field: "col1", headerName: "Hududlar", ...columnOptions },
  { field: "col2", headerName: "X koordinata", ...columnOptions },
  { field: "col3", headerName: "Y koordinata", ...columnOptions },
];

const Home = () => {
  const tableRef = useRef()

  // Log its value after the component rendered
  useEffect(() => {
    console.log(tableRef.current)
  }, [])

  return (
    <div style={{ height: "92.5vh", width: "100%" }}>
      <DataGrid
        rows={rows}
        columns={columns}
        editMode="cell"
        autoHeight="true"
        density="comfortable"
        hideFooter="true"
        sx={{ fontSize: "20px", "& .MuiDataGrid-cell:hover": { color: "primary.main", }, fontFamily: "'Roboto', sans-serif", fontWeight: 600, }}
      />
      <Stack
        direction={"row"}
        spacing={5}
        sx={{
          mt: "15px",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <Button 
          variant="contained" 
          size="large" 
          startIcon={<FolderIcon />}
          onClick={() => {}}
        >
          Get Data
        </Button>
        <Button variant="outlined" size="large" startIcon={<KeyboardTabIcon />}>
          Next
        </Button>
      </Stack>
    </div>
  );
};

export default Home;

Answer 1

You're not applying a value to the tableRef so undefined is to be expected.

I changed the name of rows to predefinedRows.

const predefinedRows = [
  { id: 1, col1: "Kontreyler terminali", col2: 0, col3: 0 },
  { id: 2, col1: "Acer", col2: 10, col3: 10 },
  { id: 3, col1: "Microsoft", col2: 20, col3: 20 },
  { id: 4, col1: "Samsung", col2: 30, col3: 30 },
  { id: 5, col1: "Apple", col2: 40, col3: 40 },
];

Now we need to keep track of the rows state of the DataGrid. We can solve this by adding a state for the rows and initialized it with the predefinedRows .

const [rows, setRows] = useState(predefinedRows);

To update the state when something changes we need to add some kind of handler. This will receive a newRow and the oldRow from the DataGrid . We create a copy of the rows and map over them. If we find the row which has the same id we return the newRow else we return the oldRow .

const processRowUpdate = (newRow, oldRow) => {
  setRows((prevRows) => {
    const newRows = [...prevRows].map((row) => {
      if (row.id === newRow.id) return newRow;
      return row;
    });
    return newRows;
  });
  // the DataGrid expects the newRow as well
  return newRow;
};

Than in the DataGrid we can add a prop processRowUpdate to handle row changes on our own.

<DataGrid
  rows={rows}
  columns={columns}
  ...
  processRowUpdate={processRowUpdate}
  experimentalFeatures={{ newEditingApi: true }}
/>

And you can you use the rows state for anything you want.