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.

When tableDnD is disabled it leaves residual css and I can't clear the css

tableDnD (table Drag and Drop) is a jQuery plugin I'm using to be able to re-order rows in my html table. It's a pretty cool library, but the fact that you can click, drag, and drop rows -- disables the ability to select that row by clicking -- it thinks you might be starting a drag and drop, or doing a 0-distance drag.
So you can view my example here, and see what I'm talking about -- http://jsfiddle.net/du31ufts/5/
It starts off as disabled, so enable the row re-ordering and see the library. Then, try to select just one row in the middle. The only way the blue highlighting indicating selection shows up is if you click outside the bounds of the table, and thus you would only be able to select starting from the bottom or top, and not be able to select one row at a time. I need to select these rows to be able to copy-paste these rows into excel.
I've tried looking into the library itself and detaching $('__dragtable_disable_text_selection__'), I've tried jquerys removeAttr for unselectable, I've tried
$('.dragtable-sortable').attr('-moz-user-select', 'none');
Nothing is re-enabling my ability to be able to click and select single rows. I'd like to do this without modifying tableDnD functions.
Which CSS properties could be affecting my ability to select table rows?

Create a textarea somewhere with ID #spot.
Use this code to extract data on click from a row and select it. Its delimited by tab so it should be pastable into excel easily.
$('tr').click(function(){
var copyContent = "";
$(this).children('td').each(function(){
copyContent = copyContent+$(this).text()+"\t";
});
$('#spot').val(copyContent);
$('#spot').select();
});

I asked about this on github and got an answer: It did require modification of the library. Specifically, replacing the if block starting at line 207 of the fiddle in this question with this
if (!$(this).hasClass("nodrag")) {
if (e.target.tagName == "TD") {
$.tableDnD.initialiseDrag(this, table, this, e, config);
return false;
}
}
modified fiddle. Thank you tschqr

How to make a light off effect in an entire Table Row

Can anyone help me how to make a lights off effect in an entire table row if i click a specific textbox and remove the lights off effect if i click again the specific textbox and goes the same with other textboxes with there specific table rows.
My problem is when i click a specific textbox the textbox is the only one who is highlighted. I want it to be the entire table row on that specific textbox.
current code: http://jsfiddle.net/AP6kr/4/

If you target $(this).parent() instead of $(this), you'll get the whole row. See JSfiddle: http://jsfiddle.net/AP6kr/6/
My example is actually targeting the <td> tag, which is the parent of the input. Since it's the only td in the row, it looks the same as if you go up one more parent to the <tr> tag. you can see that effect here: http://jsfiddle.net/AP6kr/8/
It's pretty much indistinguishable now, but if you had more cells per row it would matter.

You could use pointer-events:none; on #overlay : http://jsfiddle.net/AP6kr/5/

Javascript coding seems to stall

Sorry for the vague title but here is my problem :
I have an HTML table that I am generating from Javascript, this is fine and the table generates as expected with no problems.
When the user clicks on a cell it will highlight that cell (or un-highlight if the cell is highlighted), this again works fine.
We then needed the ability to drag over the cells (whilst the mouse is down) and highlight the cells they hovered, this I managed to do but it was not the best solution so it was asked if we could select a cell, then hover to another cell and all the cells in between become highlighted.
For example :
Start Cell = Row 1, Cell 1
End Cell = Row 3, Cell 3
Highlighted Cells = R1C1, R1C2, R1C3, R2C1, R2C2, R2C3, R3C1, R3C2, R3C3.
I have managed to sort of get this solution to work, here is a JSFiddle to show the solution, if you click on the first cell and hold the mouse down and drag to the last cell it works fine.
My Problem is that if you drag from the last cell (bottom left) to the top cell (top right) the highlighting effect seems to stall randomly until you are on row 2 or 3.
Is there any reason why this would be occurring? Is my code incorrect / inefficient for this?
I've been stuck with this for sometime and can't seem to find any reason why it would be occurring.
Any help is greatly appreciated.
P.S. - This solution MUST be a fully Javascript solution, jQuery cannot be used for this solution unfortunately as we require this to be a single HTML File and must be possible to use without an Internet Connection.

When you extract rowNum and cellNum, in ClickCell function, you have to convert value to interger:
var RowNum = parseInt(cellID.substring(1, cellID.indexOf('C')), 10);
var CellNum = parseInt(cellID.substring(cellID.indexOf('C') + 1, cellID.length), 10);

SlickGrid V2.0 Column name/id does not follow column when dragging

I have an application (using SlickGrid) where I need to get the column name or id at any time when user clicks on a cell (this pulls up a menu specific to the data in that column/cell). Grid works fine initially but if the column is moved (drag/drop), the column name/id does not follow the drop but remains mapped to it's initial column position.
Has anyone else seen this and, if so, how did you fix it?
Thanks

Are you trying to reuse the list of columns defined in your html code? You should get the list of columns from the grid instead. The following code should do what you are expecting (i.e. printout the name of the column in which you clicked a cell):
grid.onClick.subscribe(function(e,args) {
var allColumns=grid.getColumns();
console.log(allColumns[args.cell].name);
});
You can add that code in one of the examples provided with the source code (say "example3-editing.html"), drag-drop some columns around and check the console after clicking on a cell.