React Data Grid - Able To View But Not Able To Edit Cells

Question

I am using Adazzle's React Data Grid to display data of users which I obtain from my REST service successfully but I am unable to edit and change any of the cells' values despite setting the property editable : true. How can I enable edit cells for my React Data Grid?

Here's my index.js:

import React, {useState, useEffect} from "react";
import ReactDataGrid from 'react-data-grid';
import ReactDOM from 'react-dom';


export default function App() {
  const [isLoaded,setIsLoaded] = useState(false);
  const [rowData,setRowData] = useState([]);


  
  useEffect(() => {
    const axios = require('axios').default;
       

    axios
      .get('http://localhost:3000/users')

      .then((response) => {

          setIsLoaded(true);
          console.log(response.data);
          setRowData(response.data);
          response.data.forEach(user => {

        });
            

      });


  }, []);


  const columns = [
    { key: "_id", name: "_id", width: 250 },
    { key: "id", name: "ID", width: 100 },
    { key: "userName", name: "User Name", width: 250, editable: true },
    { key: "userTelNo", name: "Tel No", width: 250, editable: true },
    { key: "userEmail", name: "EMail", width: 250, editable: true },
    { key: "userRole", name: "Role", width: 150, editable: true },
    { key: "dateSaved", name: "Date Saved", width: 250 },
];


return( 
  <div style={{ height: 700, width: '100%' }}>
      <div style={{ display: 'flex', height: '100%' }}>
        <div style={{ flexGrow: 1 }}>

            <ReactDataGrid 
              columns={columns}
              rows={rowData}
              getRowId ={(row) => row._id}
              id="_id"
            />

          </div>
      </div>
    </div>
);


}

score 0 · Answer 1 · answered Apr 19 '21 at 19:26

From the docs:

In order for the cells of a column to be editable, you need to do the following:

Set the editable property of the column to be true.

Provide an onGridRowsUpdated handler function. The below snippet is an example handler that handles all the above update scenarios.

onGridRowsUpdated = ({ fromRow, toRow, updated }) => {
    this.setState(state => {
      const rows = state.rows.slice();
      for (let i = fromRow; i <= toRow; i++) {
        rows[i] = { ...rows[i], ...updated };
      }
      return { rows };
    });
  };

React Data Grid - Able To View But Not Able To Edit Cells

1 Answers1