Custom React Table With Filter and Sorting - No Libraries

Learn how to create React Table without any libraries. You don't always need a library for React table. We will create a custom table with sorting in filtering and real API to fetch data.
TIMESTAMPS
0:00 Introduction
0:49 Fetching data for react table
4:06 Rendering table markup
9:56 React table sorting
16:52 React table filtering
► CHECK MY COURSES - monsterlessons-academy.com/co...
FOLLOW ME
► TWITTER - / monster_lessons
REFERENCES
► Source code - github.com/monsterlessonsacad...
STUFF I USE
► My imac for home on Amazon - amzn.to/3MgtZAC
► Mac macbook to go on Amazon - amzn.to/3yr3UJg
► My monitors on Amazon - amzn.to/3yw6lKD
► My mouse on Amazon - amzn.to/3CEFCNt
► My keyboard on Amazon - amzn.to/3fOzNVL
► My monitor arm on Amazon - amzn.to/3CHr5BA
► My speakers on Amazon - amzn.to/3T4uf7W
► My coffee machine on Amazon - amzn.to/3rI9DGQ
► My Synology NAS on Amazon - amzn.to/3MjIpQz
► My Seagate IronWolf 4TB HDD on Amazon - amzn.to/3Cndm1B
► My external SSD drive on Amazon - amzn.to/3rFPQb1
► My external HDD drive on Amazon - amzn.to/3MmrsVE
► My microphone - amzn.to/3SMCE08
► Audio interface - amzn.to/3ecWv9O
► Camera - amzn.to/3RNOLIM
Disclosures: All opinions are my own. Sponsors are acknowledged. Some links in the description are affiliate links that if you click on one of the product links, I’ll receive a commission at no additional cost to you. As an Amazon Associate I earn a small commission from qualifying purchases.

[@zoki5388]

Thanks for this video, I've requested it few weeks ago.💚

[@MonsterlessonsAcademy]

No problem 😊

[@ahsanahmed800]

Your are doing very good work. love from Bangladesh ....🙂🙂🙂

[@MonsterlessonsAcademy]

Thank you!

[@Dclap1]

muchas gracias :D

[@MonsterlessonsAcademy]

Thank you!

[@denisdezest9599]

Great video as always 😉 Just wondering if we may directly pass the parent state searchValue and related setter to the SearchBar component. This way the parent holds the state and related logic, and SearchBar does not need its own state. Thanks again for your videos and keep up the good work 🙏

[@MonsterlessonsAcademy]

Sure you can. Do what is comfortable for you.

[@hadricheaymen91]

I have a problem. search bar dosn't let me type

[@GeraldOfori-pr3zt]

Thanks for this video. which editor how you using?? it is confusing to watch tutorials on.

[@MonsterlessonsAcademy]

It's Vim

[@kenzafilali9115]

hello is there any way to apply the sort on every column when we don't use an api simply when we are working on frontend thanks

[@MonsterlessonsAcademy]

Instead of API call you just need to sort your data on the client with array sort of something similar

[@disgracefulsense7882]

Почему вы не сохраняете параметры фильтров в урле? Можно подробнее узнать, когда их сохранять, а когда не нужно

[@toohee8561]

Better to use .filter function rather than API directly, more fluid and more reactive

[@MonsterlessonsAcademy]

No it's not better. If you have 100k data on backend you don't want to load them at once on the client and filter. It is extremely slow.

[@kananfarzali1806]

using json-db is cheating. in real life you won't be able to use it. I wanted to see client-side sorting.

[@MonsterlessonsAcademy]

It's not cheating. This is how it is done in all real projects. Client side sorting is useless when you have lots of data so nobody loads all data on the client and sorts it there.