DEV Community

Cover image for Learn how to create React JS table with delete functionality using API and hooks

Learn how to create React JS table with delete functionality using API and hooks

Abdul Basit on May 25, 2020

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...
Collapse
 
lavanyamahendran97 profile image
lavanya • Edited

Nice One,Similarly can we add edit function also inside the table,please do let me know whether it can be done.

Collapse
 
abdulbasit313 profile image
Abdul Basit

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.

Collapse
 
lavanyamahendran97 profile image
lavanya

Thanks for your reply,it was useful :),Keep posting more topics like this

Collapse
 
lavanyamahendran97 profile image
lavanya

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
:)

Thread Thread
 
abdulbasit313 profile image
Abdul Basit

What's your approach? Did you create the form for add and edit data?

Thread Thread
 
lavanyamahendran97 profile image
lavanya • Edited

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.

Collapse
 
yougotwill profile image
Will G

Nice post!

Collapse
 
kennyward85 profile image
Kenneth Wardlow

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

Collapse
 
abdulbasit313 profile image
Abdul Basit

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.

Collapse
 
kennyward85 profile image
Kenneth Wardlow

Thanks it's my first react project so wrapping my head around all of it still lol

Collapse
 
muhammadaligabol profile image
Ali

Thank you Basit Bhai :)

Collapse
 
hina profile image
Hina Qammar

delete a row from db table on clicking button using redux??

Collapse
 
ronaldomaiacorrea profile image
Ronaldo Maia Correa

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

Collapse
 
abdulbasit313 profile image
Abdul Basit

Yes. It is... You will add data to your state on pressing button.

Collapse
 
rachayyamathapati profile image
RachayyaMathapati

This code is reuable table

Collapse
 
salimeh1364 profile image
Salimeh1364

hello , tnx in advance , I am new in react I would to know how can I add pagination to this table?