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.

Clear previous selection only if checkbox is not clicked in jQgrid?

I have a grid setup with multiselect: true because I need to be able to delete more than one row at the same time. On the onSelectRow event I am loading some data based on the ID and displaying it to the end user. So far so good.
This is the example where everything works fine, the data for ID=219109 is being displayed:
Now look at the following example:
In the example above the first row still highlighted and then I clicked a second one. Because of multiselect is enabled I was able to select both at the same time. The onSelectRow event still working properly which means is loading the data for the ID=282006 but visually it could be confusing for the end user.
What I want to do is to reset the previous selected rows and just highlight the last one I have clicked.
For example using the same images:
Load a fresh grid with no rows selected
Click on ID=219109: highlight and select this row
Click on ID=282006: clear the grid and highlight this row
However this should only happen when I click in any other place than the checkbox.
In the image above if I click on any column rather than the first one (the one having the checkbox) I should be able to clear the grid selection and choose the last one but if I click on the checkbox it does not matter because is the only way to delete more than one at the time.
I have tried the following:
onSelectRow: function () {
var rowid = $(this).jqGrid('getGridParam', 'selrow');
$(this).jqGrid("resetSelection");
$(this).jqGrid("setSelection", rowid);
}
But it's not working since the behavior is not consistent. You can check the demo here.
Any ideas in how to achieve this?

It seems to me that you need just add the option
multiboxonly: true
and remove your current onSelectRow code. See https://jsfiddle.net/OlegKi/949pLpfv/3/. If the user clicks multiple times on checkbox the rows will be selected. The click on another part of the row will deselect all previously selected rows and select only the clicked row.

SlideToggle closes when Filter is chosen

Info:
I've added a button on my homepage, which triggers a div to expand. The div shows 3 different filters, which you can choose.
The problem is:
After choosing the first filter, the div closes again. To choose the 2nd and 3rd filter, you got to press the button again to expand the div. And the problem happens again when clicking on the 2nd filter.
Question:
How can I prevent closing of my div, while choosing filters?
My code:
$(document).ready(function() {
if($(window).width()<768) $("#button-opl").on('click',function(){
$("#views-exposed-form-attraktioner-block").slideToggle();
});
});

Changing the tabular data to another table using jquery

I tried to implement to display data in a table with the button click. Now I am trying to move the data from the table to the below the continue table. In this code, when I enter the input value from the json object and click the submit button, data will display in a table with a continue button and a empty table below.When I click continue the data in the above table should move to table which is located below the continue button. Here is my code [Sample http://jsfiddle.net/e254w/6/] Can anyone please suggest the idea of implement the scenario?
Krish

One way to approach this would be to remove the row from the first table and append it to the second.
This line finds the second row in the first table, removes it if it exists and appends it to the second table.
$('#datatable').find('tr').eq(1).remove().appendTo($('#seconddatatable'));
updated fiddle
Updated fiddle - this works for me first entering 122233334444, then entering 122223355552

Show row after pressing button

I want to show Row #1 on default and then when you press the "load more" button, load another row each time. I already have the content in the rows (no need for AJAX) but I just want to be able to show it when the button's pressed.

See this jsFiddle example.
The JavaScript part, with jQuery:
$('#loadmore').click(function(){
$('tr.hide').first().removeClass('hide').addClass('show');
});

Use display: none; by default on all rows (except row #1).
Then on each click, use .show() on the given row or :
$('BUTTON_SELECTOR').click(function(){
$('ROWS_CONTAINER_SELECTOR:hidden:first').show();
});

If you already have the data then you can simply set the container div to overflow: hidden and resize it to display an extra row with each click.
$("#button").click(function(){
$("#container").css("height","+=150");
});