We Keep Coding

Dependable dropdown in inline row editing in 2 ag grid cell

I started implementing ag grid in angular. Everything is good in listing. But for inline full row editing I am facing 2 issues.
I have 2 cells having dropdown. I am using custom cell editor component for each dropdown cell. now I want that If I change the value of dropdown in first cell then it should change the dropdown data in second cell.
I have an action column. having edit button. So When I click on edit, I hide the edit button and show save and cancel button and call this function. It make all columns editable.
this.gridApi.startEditingCell()
But issue is even if I click any row below current editing row then my editable row become non editable and my action column still show save and cancel. Now I do not know how to change the cell renderer of a column when row become non editable or how to prevent this action

I will suggest you to use cellRenderer with editable: true inside cellRendererParams .
This will resolve the issue of becoming previous row non-editable while clicking on another row or outside the grid as in this state all of grid row's will be behave as editable.
And to manage your action items i think it's better to manage them by comparing the previous rowData and updated rowData.
If you will use the cellEditor with cellEditorParams then the issue of non-editable row will come in the picture as in this case you can make only single row editable at a point of time.
Please let me know if i can help you further in this .
Thank you.

Copying the row of table in react

Hi I have a reqirement in react. I need to copy the row of table in UI. means once user clicks on the highlighted icon in yellow in below image. the same row should be duplicated .
Could you guide me , how can I approach for the same?
so the below row should appear twice.

If you have the object that represents the row then just push the same into the array that consists of all this rows
array.push(clickedrow);
And let this array be a state so when you change it will rerender and you can see the updated list on UI.

How to add a textField to a specific row inside a table onclick of a button using reactjs & material ui

I want to add multiple textfield on to a specific row inside a table whenever the specific row add button is clicked, currently I am able to add text field onclick of add button but whenever the add button is clicked the textfield is getting added in every row of the table. Also the add icon needs to be next to the last text field but currently I could only achieve it having it on the 1st text field. Please someone help me out here. Image of what i have achieved so far.
As you can see I'm trying to add textfields on 1st row ,but it is automatically adding textfields in every row of table.
Working codesandbox:
https://codesandbox.io/s/broken-dream-7nncc?file=/src/App.js

There are a few ways to do it. A quick way is to (as Muhammad said) handle the button click for each row.
Meaning that you need to pass to the addCustomFile method the row Id and store this in your array.
Then when you map the customRow array in your main TableBody make sure to add the two custom columns only if there is a match between the customRow.rowID and the row ID you are currently rendering.
I`ve modified your sandbox https://codesandbox.io/s/infallible-resonance-qn64l?file=/src/App.js:1807-1820

you have to handle button click for each row. right now just one state so therefore it is showing in each cell

Maybe give this a try
https://www.w3schools.com/code/tryit.asp?filename=GQP3C100TJZH
hopefully it solves what you are looking for, if not please provide me with a bit more detailed issue of what exactly you want
This at the moment just works for one row and maybe for two rows you can try it by adding a it is not exactly a text field area but it should be a similar fix.

Angular JS add row to ng-repeat table with different controls than other rows

I have a table populated with json data and an ng-repeat, as in
I need to add rows to the top with a button, as in the screenshot, but the added row(s) has to have editable cells where I have blank rows. The data in the existing rows cannot be editable.
I am adding the row with an ng-click handler on the "add" button on the page:
$scope.addRow = function () {
$scope.hsCodes.unshift({});
};
This works, but of course adds a row just like the others, with empty TDs.
How can I add input (text) controls only to the added row(s)?

It would be helpful to have a demo to more accurately answer, but generally what I would do is:
Add a boolean property to the row object such as isEditable.
Set a template for the cell using ng-if="row.isEditable"
If the row.isEditable property is not there, that would be false, so you don't have to worry about adding it if you are dealing with remote data.

adding rows inside grid extjs

I am trying to add rows dynamically inside a grid using a button and remove individual rows using an action column function. I have two text fields (name, email) inside the grid on each row. So when the user hits the add button, a new row should appear with name and email fields. The third column would be an action column and when the button in the action column is clicked the entire row should be removed.
It would greatly help me out if somebody could share some sample code for me to get started.

There are some great code examples in the docs. This is where you have to head first, before asking here.
Look at this row editing example.