How do I make this custom generated table editable? Made it using Ag-grid react-CodePudding

We need to input appraiser, sample and trial number. Once we click "create table" a table is generated according to the input entered. Appraiser is the number of tables, sample is the number of columns in each table, trial is the number of rows in each table. I have to make the table cells editable, which is where im stuck at. Find the working code below to understand it better https://codesandbox.io/s/github/nehav9311/react-ag-grid-updated

I also have to collect the data entered in json format. How do i do that?

CodePudding user response：

There is an option for ag-grid react for changing every cell in a column to a component that for example supports editing in your situation. the complete answer is here available in the ag-grid react documentary. to describe a little bit: there is a frameworkComponents attribute for AgGridReact element where you could add components you want to use instead of regular cell and then you could set cellEditor attribute in AgGridColumn element to your custom component.

CodePudding user response：

As per my knowledge and experience with Ag-grid react, you have to just modify your cell property like given below as :

const dataMapp = RowcountArr.map((v) => ({
  field: v,
  editable: function (params) {
    return params.node.data;
  }
}));

for more detail you can check cell editing briefly ag-grid-react component.

I hope it will work for you! Thanks.