In this article, I will be using rest API ( JSON placeholder ) with fake data instead of static js object. Real apps work with APIs.
If you want t...
For further actions, you may consider blocking this person and/or reporting abuse
Nice One,Similarly can we add edit function also inside the table,please do let me know whether it can be done.
Yes beside delete, create Edit button, then for edit either you need to have form for edit or just replace each cell of row into input and edit the value there.
Thanks for your reply,it was useful :),Keep posting more topics like this
So i just tried this for our project,when i try to edit I got struck with edit functionality
i'm not able to edit the rows based on the id.Please give us some idea to proceed on
:)
What's your approach? Did you create the form for add and edit data?
1.We are not planning to create a form as of now,we like to edit it in the table itself.
2.If we want to create a form for editing how can we do it,
Note : Currently we are using React-Router Package for routing purpose,can we use the same package or any other suggestions....
3.How to apply Responsiveness in a easy way.?
It would be really great if you can help us with these questions so that we can proceed on with our project.
For first approach, define a key
isEditingin the state that would be false initially. When you click the edit button theisEditingwill become true. So now you can render conditionally, ifisEditingis true, render the input filled with editable values, otherwise render table row. You may find this implementation on codepen.As far as the responsiveness concern you can use react responsive table package.
what If I want to route to a different url when view button is clicked to view entire details(initially only id and name is shown and onclick should render a component where all details are seen) based on the passed id .I am not able to route to different component ?
Now suppose I click any of the view buttons from any row ,pass its id to onclick function... do a state change ..set the id to ID and conditionally do routing when ID is set:true ..does that work ?
delete a row from db table on clicking button using redux??
Thank you Basit Bhai :)
Were you going to be adding the examples of this with a sortable table possibly by clicking on the headers to sort alphabetically or a search to narrow down with key characters
Not that difficult. Just make a sorting function and call it on click where you want.
Material ui and antd table already have sorting functionality you can use that too.
Thanks it's my first react project so wrapping my head around all of it still lol
Nice post!
hello , tnx in advance , I am new in react I would to know how can I add pagination to this table?
This code is reuable table
Hi Abdul,
I am kinda beginner on React. It is possible to have a page with one button, then when I press the button I render the table with one row, then I add more rows each time I press the button
Yes. It is... You will add data to your state on pressing button.
delete a row from db table on clicking button using redux??