We Keep Coding

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.

Slickgrid: value entered in a cell disappears after moving out of cell

In a Slickgrid cell, i click and enter a value. Once i move out of this cell using a mouse click the value entered disappears. But if i enter the value in the cell and tab out then the value stays in the cell. I would like to know if this should be manually handled.
OnClick event i am calling
grid.updateRow(grid.getDataItem(args.row));
grid.invalidate();
grid.render();
Thanks,
Asha

You're doing something wrong, updateRow() argument is a row index in the grid but you're passing an item object so that won't work, also if I remember correctly updateRow is only used for re-rendering or refreshing a specific row index, it's not for updating the data but more for rendering purposes (perhaps the naming is confusing).
I personally only use the SlickGrid DataView and the functions to call for updating items are different, you can see how to that in this other Stack Overflow answer Change slickgrid cell data after edit
If you're using the grid object, as it's written in the other SO answer I referenced earlier, then it would be
grid.invalidateRow(args.row);
data[args.row][grid.getColumns()[args.cell].field] = a.msg;
grid.render();
Personally I always use the SlickGrid DataView as it's much more user friendly and comes with a lot more benefit like data grouping and many other functionalities. Again take a look at the other SO answer that I wrote in previous paragraph, that is the correct way to do it

How to add empty data row in Datatable using angular2+?

I want to add empty data row. My requirement is like columns are dynamic. I have tried using dtInstance to add the row. it's throwing some error.
here is the link
https://stackblitz.com/edit/how-to-replace-all-the-columns-dynamically-in-data-table-gvfose?file=app/app.component.ts
Please let me know if more details required.

I dont think that's possible with Angular-datatables out of the box, but you can use Angular-xeditable to achieve that as in this question. A better way to do it in my humble opinion would be, when the user clicks the 'add' button, we show a pop-up, they fill the data, we update the back-end or the reference table and rerender the table.

You gave the Data table wrong model. you are mixing between different models in your code.
I've fixed it as well adding two empty rows, make sure to align with the model defined by columnsDataObj
https://stackblitz.com/edit/how-to-replace-all-the-columns-dynamically-in-data-table-zemuq2?file=app/app.component.ts

There is a simple demo for your requirement that puts the other button to save the empty column you want to access the data.
For easy to use, add DATA button that would be shown the blank row with input, the style you desire to set up the CSS and don't forgot the CSS scope for your by Encapsulation.
DEMO
If the operation field is superfluous, rid it off and place the event for three columns after entering with your logical condition.
Annoying Button
The add DATA could be replaced with the below code, setup the life hook instead for insert the method in the constructor.
ngAfterViewInit (){
this.addData();
}

One form by row (fields for every column) with buttons for each: how to manage the dirty state?

I would like to handle the dirty state for every single row I have in my table. Unfortunately, adding a form around a would break the table, and I can't create it inside since I have a field for every different column. My last column for each row contains buttons: Delete and Update. Update appears only if one of the field of this row has been made dirty.
Somehow, it works already but I am checking each .pristine for every field on that row (#name="ngModel"). My rows are created through something like *ngFor="let row of rows". I believe it would be better to check the .dirty or .pristine on a form rather than on every single element.
Also, if I actually to the update, there is no way I can remove that .dirty status (I tried replacing the data for that row by removing from the array and re-adding it but it is still dirty).
Is there a technique to go around that?

You could use ngModelGroup around each of your rows. Then you can check the dirty flag for the group.

jqgrid hide() row issue

I'm using latest version of JqGrid, and I've learned here that there is now build-in hding method. I figured out how to hide rows using
$("#"+rowid).hide();
But here I faced the very big issue. My jgrid is limited to display not more than 10 rows per page, and often happen that after using the above code, my items starting to be displayed at i.e. 10th page.
Thanks in advance .

The hide method is not part of jqGrid, but rather is part of jQuery itself:
Hide the matched elements.
So that probably explains why it is not working the way you expect. What exactly are you trying to do?

jqgrid allows to delete rows. See "Live data manipulation - Delete row" example on examples page.
$("#dedata").click(function() {
var gr = jQuery("#delgrid").jqGrid('getGridParam','selrow');
if( gr != null )
jQuery("#delgrid").jqGrid('delGridRow',gr,{reloadAfterSubmit:false});
else
alert("Please Select Row to delete!");
});
See also delGridRow method documentation.
Another option is to change data source (it depends on method was used for filling the table), delete rows from it and re-fill the table.