Make an Editable Table in React (Add/Edit/Delete Rows) | Beginner Friendly Tutorial

Подписаться 10 тыс.

Просмотров 89 тыс.

50% 1

If you're new to React and looking to build a dynamic and fully editable table, you've come to the right place! In this tutorial, we'll walk you through the process of creating an editable table in React step-by-step, complete with add, edit, and delete functionality.
Throughout the tutorial, we'll cover the basics of React and demonstrate how to use React hooks and state management to create a table that can be edited, added to, and deleted from dynamically. Whether you're a beginner or an experienced React developer, this tutorial is for you!
By the end of the tutorial, you'll have a fully functional and professional-looking editable table component that can be used in any type of web application. So don't wait any longer, start building your own editable table in React today!
🚨 Break into a software dev career with this free course from CourseCareers! - coursecareers.... 🚨
Discord - / discord
Subscribe - / @code_complete
☕ Donate to support the channel! - www.buymeacoff...
-- 🌟 Useful Tools and Software 🌟 --
🌐 10% off domains at Domain.com (use code DOMAIN10) - domain.mno8.ne...
☁️ FREE $100 for server hosting on Linode - linode.gvw92c....
📚 30% off annual Skillshare membership (use code annual30aff) - skillshare.eqc...
-- 🔗 Links 🔗 --
💻 Code - github.com/Cod...
DISCLAIMER: Some of the links in the description are affiliate links. The channel will receive a small commission from any sales from these links, but there is no extra charge to you. Thanks for supporting the channel so I can keep making these free tutorials!

Опубликовано:

13 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 41

@Code_Complete 8 месяцев назад

Have questions or feedback? Head over to our Discord server! discord.gg/TWBtv5an7N Solve advanced programming challenges and become an expert software engineer with CodeCrafters! 40% discount on your membership - app.codecrafters.io/join?via=CodeCompleteYT

@Be_simple_and_give_Knowledge 6 месяцев назад

i need the source code plz send me

@ShwetaJha-y6h Год назад

Clean, detailed code with clear explanation, no fancy libraries for creating understanding gap for beginners.

@sukdipkar8108 Год назад

Please upload this kind of video every week. This will definitely help in the machine coding round. Thank You.

@Code_Complete Год назад

Glad it helped! Will try to make more

@tahaansari5621 Год назад

I really liked ur plain html css approach instead of using frameworks like bootstrap. Really impressive stuff!

@Code_Complete Год назад

Glad you liked it!

@ipreet6850 Год назад

the way to explain every small logic ,helps me clear my all doubts. thankyou

@Code_Complete Год назад

Glad your doubts were cleared, thanks for watching!

@user-dp7cx3kg4t 6 месяцев назад

Спасибо) Твой код понятен, логичен, краток. В нем ничего лишнего, приятно смотреть. И CRUD действительно есть, в отличие от многих роликов на эту тематику: в них упускают режим редактирования. Мне будет очень полезно для моего приложения. Хочу еще подобных уроков)

@Code_Complete 6 месяцев назад

Glad you liked it!

@ScavengerYT9 6 месяцев назад

@@Code_Complete is this like todo app ??

@svenmcarby4141 Год назад

Amazing tutorial video keep updating new React videos, we love you

@brianmanguriu9960 Год назад

this kind of videos. this is what i needed to make that next step, in my coding career

@Code_Complete Год назад

Glad it helped!

@duvanm2483 9 месяцев назад

Thank you very much! this I what I needed. Greetings from Colombia

@hariraghu1537 10 месяцев назад

Thanks for your video. Really useful for me

@H.s.c-1 Год назад

thanks very helpful

@user-ce7te5vq8o Год назад

Hi, This is great and practical, But what will be more interesting is if you can add: - Filter option by status. for example, to show the three status on somewhere above the header and when any status is clicked it filters only those relevant to the status. - Additional Search box option by status or item name - Add a configuration of google firebase so when a new item added, edited, or deleted it automatically update the firestore database same time . what I mean is can you make it a more useful CRUD on firebase using 'useEffect, useState functions. By the way it is clear and good start for crud operation in React.

@Deqike_Michael12 6 месяцев назад

Best tutorial, only one comment=> if the vs code takes 2/3 all full width of your screen will be better for following some wrapped or hided codes. the rest all are the best.

@Mohammad-sd3yy Год назад

Thank you , Keep going.

@anjanasanthosh1040 3 месяца назад

thanku for the video

@malcomk 6 месяцев назад

Hi could you make an instruction video how to add / delete columns on the table you just made on this video? That would be really helpful.

@aisismailm 10 месяцев назад

Grate! Thanks

@simplyizustic6122 Год назад

Can you make the same table using Material UI using datagrid

@felixcenteno2003 11 месяцев назад

An observation: when modifing the useState variable using the previous value you need to use a function in th setState: example: const handleDeleteRow = (targetIndex) => { setRows((prevRows)=>{ const newRows = prevRows.filter((_,idx)=> idx !== targetIndex); return newRows; }); };

@hydrogoalpicker1542 Год назад

Superb bro🙏

@Code_Complete Год назад

Thank you so much 😀

@yashlad9412 9 месяцев назад

Hello Creator, I like the way you have explained the CRUD Operations in React JS. However, I have a suggestion: In the Table.jsx file: Instead of using the statusText variable, you can simply add a CSS property: "text-transform: capitalize" in label class. Better to use exiting CSS Property, than making a custom JS variable for same purpose 😅

@Code_Complete 7 месяцев назад

Great suggestion!