editableCell | turning table cells into selectable , editable cells | Grid library

I am making the interactive table using react-table on my application.

My goal is to make a table that can be an editable per row when clicking on a button in a table cell.

I designed an EditableCell like the following.

I'm new to TS. I'm getting no error with this code:

I'm trying to use a component written in javascript in a page written in typescript.

I don't want to re-write the component in tsx, is there a way to have tsx avoid looking at this component, or to set types for the component as any for all the inputs?

Thanks in advance, and here is the component below and the codesandbox for the example I'm using for it https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/kitchen-sink,

What I am doing is that I am rendering data in ant design table, and each column of each row is editable now when wrong data is rendered for example email is in bad format there should be validation message down to email that email is not valid & when user start typing I also need to validate user input also that was for editing. like when the user starts typing I also need to validate each input change either it is right email or wrong, similarly, I need to use custom regex for each column of the row, I hope I tried my best to collaborate the problem what I am facing.

What I tried soo far is below.

1 - When Data is rendered to the table I got two editable columns for each row. Data is rendered

2 - When User Start Editing User Editing

3 - Validation Is failed when the text box is empty my objective is to validate each keystroke also, either the email is correct or not that is being entered when validation pass error goes away. Validation Failed

Below is the code I tried soo far

I am following this example https://codesandbox.io/s/little-star-yq2h8 which use state. Now I make the same example using hooks

but getting this error

I am new to ReactJS and I've been having some trouble of getting ReactTable working.

I've defined Cells to be editable like this:

I want to put a QLineEdit and QLable to the same cell in QTableWidget. This cell widget has created the code below I modified from the internet.

I have a 3 select inside a table inside a form. Im calling the api to populate this one select on the componentdidmount. the next one gets populated depending on the value selected in the first one. and the last one gets populated depending on the value selected in the second one. How can I do this. Im using a editable table component from ANT design.

Im using axios for the api.

the component shown is an editable table. i need to send data of this component and the parent component to a seperate component on a submit button click in the parent form. Im new to this. Can someone help me? i have to access the datasource on the button click. is there some kind of expression to call the data from child directly in the parent? i have to access the datasource on the button click. is there some kind of expression to call the data from child directly in the parent?