React Table Sorting

In this video, I implemented a table with sorting functionality. The column can be ordered in ascending and descending order.
I generated dummy data from mockaroo.com
I used bootstrap for the design. you can get the CDN from the link below.
getbootstrap.com/docs/4.4/get...
If you have any doubts, please comment below.
Don't forget to subscribe and like.
Thank you
Voranzov

[@RagnarD3]

I struggled with building this out for two days straight, copying from multiple other examples. None of them worked and were extremely complex. This worked, I understand it, was even able to expand on its function with ease in around 30 minutes. Absolutely wonderful. Thank you so much. So much.

[@aparnas1613]

Excellent simple code to do multi column sorting in one go :) I was struggling with lengthy algorithms to find a fix .. It really helped me a lot. Thank u very much for your knowledge share and effort :)

[@user-mm1uk3pr5k]

THANK YOU!!!! Before this tutorial I had to do SOOO many twisted ways to do sorting! Im glad it appeared to be this easy, thanks to you 👍👍👍

[@CodewithVoran]

Welcome. Happy to know that brother

[@user-mm1uk3pr5k]

@@CodewithVoran I'm more like a sister, but thanx anyway 😅

[@CodewithVoran]

@@user-mm1uk3pr5k sorry sister

[@piyushaggarwal5207]

true. don't know why everyone is like {label, accessor, sortable} or some library

[@matheuspombeiro1675]

Thanks Voran, you helped me a lot!

[@CodewithVoran]

Welcome brother

[@paschalynukwuani6930]

Your explanation is simply the best. You are an excellent teacher.

[@CodewithVoran]

Welcome brother

[@alimammadov3744]

@@CodewithVoran Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. i get data as a props and get this error

[@arjun-de6dr]

Good one man, exactly what I was looking for

[@CodewithVoran]

thanks arjun

[@anangyoga1381]

thank you good sir, it's clear simple and short. awesome!

[@CodewithVoran]

Welcome anang

[@PadawanNica]

Im new in that and sound crazy but you save me today , thank you!

[@Voranzov]

Welcome benjamin

[@vigneshlokeshbabu1686]

excellent excellent excellent video..... another simple way of code, another idea of coding... thank u so much sir...

[@CodewithVoran]

Thank you vignesh 😍😍. Subscribe to my channel for more useful tutorials

[@Dev-Phantom]

very informative i applied this concept today

[@CodewithVoran]

Thanks brother

[@abcd9967]

You just saved my life.. thanks for great video 😊

[@CodewithVoran]

Welcome brother

[@paalaleksander]

Thanks a lot! Helped me figure out tables in react

[@CodewithVoran]

Welcome paal

[@irenek8150]

Thank you so much!! It helped me a lot!

[@CodewithVoran]

Glad it helped you ❤️❤️

[@shashidharrai8110]

Thank you so much it is a great video and u used the simplest way to do things thank you so much ...

[@CodewithVoran]

Welcome brother

[@davidverano444]

Thanks Voran. I'm an Engineer (Facilities / Maintenance , 53 yr old), and i wan to automate some tables, or output for work. Hopefully i will be able to use React to do just that. Your video helps.

[@CodewithVoran]

Nice to meet you sir. If you need any help in react, i can help you sir

[@vallishbharadwaja9126]

Thank you bro 🙏 It helped a lot

[@CodewithVoran]

Glad it helped

[@Sirius39170]

Thanks for the video!

[@CodewithVoran]

You're welcome!

[@MoMoney75314]

Very very helpful, thank you sir.

[@CodewithVoran]

You are welcome

[@shubhamsinghvi9338]

Really a great and simple explanation ❤❤❤

[@CodewithVoran]

Thanks Singhvi

[@prajulsahu9838]

Thanks man, you saved me today!!!

[@CodewithVoran]

Welcome buddy

[@analistadesistemas]

You have a new subscriber!

[@CodewithVoran]

Thanks analista

[@RabbagunduMadhavi]

This is very interesting . Thanks you because, I solved my problem with your video. before I saw many related videos but i am not able to solve my problem.

[@CodewithVoran]

Glad it helped

[@techKnowCoding]

Awesome man but if you also do for numbers then it will be more than awesome but still loves it

[@mvsrcm6413]

bro ,just saved my life bro , that's it.

[@CodewithVoran]

Happy to know 😍😍

[@rohitmandaliya]

thank you so much this video is very helpful

[@CodewithVoran]

Welcome rohit

[@keerthanachar]

You saved my day :)

[@CodewithVoran]

Happy to know 🥰🥰

[@zahidshaikh3122]

Bro you just simplified everything in 7-min video.

[@CodewithVoran]

thanks a lot brother. subscribe for more tutorials

[@BalaramGayen]

Great content Sir 🥰🥰

[@CodewithVoran]

thanks Gayen

[@AbhishekSingh-ot2dv]

great video!!

[@CodewithVoran]

Thanks abhishek

[@ankushdas6896]

You saved me brother

[@CodewithVoran]

🥰🥰🥰

[@ayoabimbola777]

Nothing but a lifesaver bro... Thanks a bunch! Can I ask why we are mapping the mock data to state before rendering it?

[@CodewithVoran]

Because react components will only re-render when there are chances to state or props

[@arunaru7561]

Tqs bro u made that easy😙😙

[@CodewithVoran]

Welcome bro

[@ryroio]

Thank you!

[@CodewithVoran]

Welcome. Subscribe for more tutorials

[@vishalgatla4606]

Thanks man

[@CodewithVoran]

Welcome vishal

[@amankumarsingh7456]

thanks bhaiyaji

[@CodewithVoran]

Thanks brother

[@colton3507]

Nice!! Thanks

[@CodewithVoran]

Welcome colton. Subscribe to my channel for more useful tutorials

[@zishanali2161]

Thank brother 😊 I

[@CodewithVoran]

Welcome brother

[@mikepl92]

Great video! How would the sorting work if you are trying to target nested data in a json object?

[@CodewithVoran]

you can use optional chaining. refer this documentation developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

[@ruhitbaidya1681]

wonderfull

[@CodewithVoran]

Many thanks

[@qweqw1359]

nice

[@juguetestoys1137]

Excellent video. It would be very powerful to be able to join in REACT both functions: react table sorting with the react search filter table. I have tried to join both concepts but I can't do it. Maybe you know how to do it .... Thank you very much for sharing your knowledge!

[@CodewithVoran]

Hi Juguetes. I will do a tutorial of table with both functionalities

[@juguetestoys1137]

You're a great person. Hopefully you will achieve all your dreams !!

[@CodewithVoran]

Thanks mate. Thank you for your words

[@varshakotwal3407]

@@CodewithVoran plz do it yet u have not done

[@sweta3251]

Hey I need to sort ip address...can you plz help here

[@CodewithVoran]

in this case, you don't need to convert toLowercase. a[col] > b[col]

[@prempanchal8166]

Great video!! I have a question, How would I be able to sort if one of the fields is empty (null)? Like let's say if some of the email fields are empty, how can I make it sort with empty fields?

[@VeraVeraniego]

sort all fields and then paste the empty fields at the end

[@n.dclothing8529]

great video but what happens when we wantonly one column to be sorted?

[@rupalgupta5524]

Hey! How can we give some arrows icon and change it as per the order ?

[@ishivamgupta1]

Thankyouu

[@CodewithVoran]

Welcome shivam

[@fajarhidayat457]

but how if i added the new data, then the new data is automatically sorting ? the problem is when the new data is added, the position is lower not automatically sorting... do u have solution in this case?

[@arupde6320]

upload regularly ..

[@CodewithVoran]

yes brother. i will

[@kekoHere0610]

Hi..this video helped me a lot.But how do you sort a column with numbers as data

[@CodewithVoran]

Same way

[@CodewithVoran]

Same code

[@davilima6995]

but toLowerCase doesn't break the code?

[@trups11trupti]

Try this for number: const sortingNumber = () => { if (order === 'DSC') { const sorted = [...orders].sort((a, b) => a.subTotal.exclVat - b.subTotal.exclVat); setOrders(sorted); setOrder('ASC'); } else { const sorted = [...orders].sort((a, b) => b.subTotal.exclVat - a.subTotal.exclVat); setOrders(sorted); setOrder('DSC'); } };

[@bishaladhikari8691]

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. could u please help

[@CodewithVoran]

Did you use class component?

[@bishaladhikari8691]

@@CodewithVoran my case was little different , i had try to explain u but it became little long i have to sort from ascending or desending to this data according to price export const products=[ { id:"1", image:"/images/p1.jpg", title:"Brand Levi WHite Tshirt", description:"This impressive paella is a perfect party dish and a fun meal to cook together with yourguests. Add 1 cup of frozen peas along with the mussels, if you like. " , availableSizes:["xs","l","xl"], Price:"$50" }, { id:"2", image:"/images/p2.jpg", title:"Women's New fashion Jacket", description:"This impressive paella is a perfect party dish and a fun meal to cook together with yourguests. Add 1 cup of frozen peas along with the mussels, if you like. ", availableSizes:["x","l","xl"], Price:"$90" }, ] .................................................................. i have to do filter and sort the above data , i had completed the filter but not sort const [items,setItems]=React.useState(products); const filterItem=(item)=>{ const updatedItem=products.filter((product)=>{ return product.availableSizes.indexOf(item)>=0; }); setItems(updatedItem) } const sortItem=(item)=>{ const sorted=[...items].sort((a,b)=> a[item].toLowerCase()>b[item].toLowerCase() ? 1:-1) setItems(sorted); } --------------------------------------------------------------- { items.map((prod)=>(......... ....................... ) ----------------------------------------------------------- in filter.js i have my menu item props.setItems("Price")} >Lowest Highest

[@CodewithVoran]

Sorry for the late reply. I'll check and let you know.

[@treatfortreat2105]

Hi, Table working fine in local, when code is uploaded to server , table data freeze.

[@CodewithVoran]

hi. which service did you use to host?

[@akkishivakumar6502]

how to give color on sorting

[@marcofabiopavone5027]

How to write this in typescript? I have to declare a type for col. I mean: const sorting = (col: *what type?*) => {...}

[@CodewithVoran]

Give 'any' or obj

[@DylanL9]

how would you sort integers? do you have code for that?

[@blobbyblue02]

I converted my integers to strings, that seemed to work fine.

[@dude9835]

mera data ek api sai aa rha hai mai data,setdata ki place pai ky likhu

[@DeadShot-gm1jj]

why do we have to clone the data [...data], why can't we just use data.sort() ???

[@VivekBabuBanasuri-pl4zj]

All the columns are strings, can we do the similar for Number data type in column ? Any one ??

[@CodewithVoran]

Yes. You can

[@rashmanfathima952]

Can I get the source code Sir, Please!

[@thebestchillsounds4780]

It doesn't map and rows don't show up. Any help please?

[@thebestchillsounds4780]

I found solution :) Maybe some can use it. You MUST refresh the page or restart React to see results of map method :)

[@lee4551]

Hello, thank you for the vidéo You should remove the music in the background, your voice is enough

[@abheemk]

background music is annoying

[@CodewithVoran]

sorry brother. I will reduce the sound of background music in upcoming tutorials.

[@abheemk]

@@CodewithVoran Great content , appreciated 👌🏻

[@CodewithVoran]

@@abheemk thanks brother