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.
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 :)
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.
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.
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?
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?
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 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);
{ items.map((prod)=>(......... ....................... ) ----------------------------------------------------------- in filter.js i have my menu item props.setItems("Price")} >Lowest Highest
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!
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.
Your explanation is simply the best. You are an excellent teacher.
Welcome brother
@@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
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 👍👍👍
Welcome. Happy to know that brother
@@CodewithVoran I'm more like a sister, but thanx anyway 😅
@@АннаСеменова-е1р sorry sister
true. don't know why everyone is like {label, accessor, sortable} or some library
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 :)
very informative i applied this concept today
Thanks brother
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.
Nice to meet you sir. If you need any help in react, i can help you sir
Really a great and simple explanation ❤❤❤
Thanks Singhvi
Thanks Voran, you helped me a lot!
Welcome brother
You just saved my life.. thanks for great video 😊
Welcome brother
excellent excellent excellent video..... another simple way of code, another idea of coding... thank u so much sir...
Thank you vignesh 😍😍. Subscribe to my channel for more useful tutorials
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.
Glad it helped
Thanks for the video!
You're welcome!
Im new in that and sound crazy but you save me today , thank you!
Welcome benjamin
Awesome man but if you also do for numbers then it will be more than awesome but still loves it
Hi, Table working fine in local, when code is uploaded to server , table data freeze.
hi. which service did you use to host?
bro ,just saved my life bro , that's it.
Happy to know 😍😍
Very very helpful, thank you sir.
You are welcome
Thank you so much!! It helped me a lot!
Glad it helped you ❤️❤️
You saved my day :)
Happy to know 🥰🥰
You have a new subscriber!
Thanks analista
thank you good sir, it's clear simple and short. awesome!
Welcome anang
Hey! How can we give some arrows icon and change it as per the order ?
Thank you bro 🙏
It helped a lot
Glad it helped
Good one man, exactly what I was looking for
thanks arjun
You saved me brother
🥰🥰🥰
Thank you so much it is a great video and u used the simplest way to do things thank you so much ...
Welcome brother
Bro you just simplified everything in 7-min video.
thanks a lot brother. subscribe for more tutorials
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?
great video but what happens when we wantonly one column to be sorted?
Thanks a lot! Helped me figure out tables in react
Welcome paal
How to write this in typescript? I have to declare a type for col. I mean: const sorting = (col: *what type?*) => {...}
Give 'any' or obj
how would you sort integers? do you have code for that?
I converted my integers to strings, that seemed to work fine.
how to give color on sorting
Thanks man, you saved me today!!!
Welcome buddy
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?
sort all fields and then paste the empty fields at the end
Hey I need to sort ip address...can you plz help here
in this case, you don't need to convert toLowercase. a[col] > b[col]
Great video! How would the sorting work if you are trying to target nested data in a json object?
you can use optional chaining. refer this documentation developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
Great content Sir 🥰🥰
thanks Gayen
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
Did you use class component?
@@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
Sorry for the late reply. I'll check and let you know.
Thank brother 😊 I
Welcome brother
thank you so much this video is very helpful
Welcome rohit
mera data ek api sai aa rha hai mai data,setdata ki place pai ky likhu
great video!!
Thanks abhishek
Thanks man
Welcome vishal
why do we have to clone the data [...data], why can't we just use data.sort() ???
All the columns are strings, can we do the similar for Number data type in column ? Any one ??
Yes. You can
It doesn't map and rows don't show up. Any help please?
I found solution :) Maybe some can use it. You MUST refresh the page or restart React to see results of map method :)
Can I get the source code Sir, Please!
Nothing but a lifesaver bro... Thanks a bunch! Can I ask why we are mapping the mock data to state before rendering it?
Because react components will only re-render when there are chances to state or props
Tqs bro u made that easy😙😙
Welcome bro
thanks bhaiyaji
Thanks brother
Nice!! Thanks
Welcome colton. Subscribe to my channel for more useful tutorials
wonderfull
Many thanks
Hi..this video helped me a lot.But how do you sort a column with numbers as data
Same way
Same code
but toLowerCase doesn't break the code?
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');
}
};
Thank you!
Welcome. Subscribe for more tutorials
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!
Hi Juguetes. I will do a tutorial of table with both functionalities
You're a great person. Hopefully you will achieve all your dreams !!
Thanks mate. Thank you for your words
@@CodewithVoran plz do it yet u have not done
nice
Thankyouu
Welcome shivam
upload regularly ..
yes brother. i will
Hello, thank you for the vidéo
You should remove the music in the background, your voice is enough
background music is annoying
sorry brother. I will reduce the sound of background music in upcoming tutorials.
@@CodewithVoran Great content , appreciated 👌🏻
@@abheemk thanks brother