@@ADDHYANKUMAR-e9e Its very easy, there are many ways but you just need to set some style or sx prop inside muiPaginationProps something like that property inside of table config object
@@tejaltatiwar4682 not possible, by default kisi me bhi sorting nhi ata hai, aur agar aa raha hai then appne table object configuration ke andaar intitialState object me initial or default sorting define karke rakha hua hoga warna possible nhi hai ki by default kisi me bhi sorting aye app ek bar apna server ka response check karo sayed whi se default sorting hoke ata hoga
@@tejaltatiwar4682 bina tanstack table padhe bhi app sikh sakte ho, lekin agar tanstack table padh loge to complex problems ko solve karne me asanai hoga apko
use table.getState() you will find selected rows details in this state object and other option is you have to create a local state and connect that state to table object configuration and it will be synced completely and after that all selected rows information will be found on that local state So there are many ways to get the selected tow information Hope it helps 😇
We can edit any row of text type ( not by using pop up form but editing main table ), I have a condition in which I have to create editable multi-select dropdown inside table, How can we achieve that using Material-React-Table ?
hi there. i've a problem with save the pagination preferences to the localStorage with useLocalStorage. Do you have any idea about that? I'm trying save last visited page to the localStorage. For example, whenever i refreshed the page, i've to see last visited page
bhai I need to add otp input field of type number, and 4 se jyada number user add na karpaye. kya karu <input className="formInput" type="tel" placeholder="Enter OTP" maxLength="4" minLength="4" {...register("otp", { required: "OTP is required", validate: (cotp) => cotp.length == 4 || "Enter 4 digits", })} /> ye try kiya chal rha he, par sirf jab me type "tel" leta hu agar number lunga toh nhi chalta, number leke min max bhi try kiya nhi chla, or "tel" me character bhi add ho jate he toh use use nhi kar sakta?
Hello, Thank you for the excellent content. I was wondering if you could create a tutorial on how to center the pagination toolbar on the page using Material-React-Table. I've explored numerous solutions, but none seem to work as expected. You can find the documentation I was referencing here: Material-React-Table Pagination Guide. Thank you for considering my request!
just put thise code in Table Object Config and It will work muiBottomToolbarProps: { sx: { '&>div>div': { right: '50%', transform: 'translateX(50%)' }, }, }, or this is the final code looks like this const table = useMaterialReactTable({ muiBottomToolbarProps: { sx: { '&>div>div': { right: '50%', transform: 'translateX(50%)' }, }, }, columns, data, });
bhai any idea about -> at a time only single row expands should be allowed in tan-stack I have tried many ways but it does not work. Have you ever tried?
Yeah I think it can possible, its very easy to implement, give me some time I will read their official documentation and after that I will tell you the solution brother
Tell me, does this work in such a case? If the tab is closed, send a request to the API, and if you reload the page, then no action is required to send to the API?
bhai isme agar ek column me disable karni he sorting toh kya kare. tried this columnHelper.accessor("category.name", { header: "Category", //enableMultiSorting: false, disableSortBy: true, }), both not working
Bhai dekho bydefault to “header.column.getaisSotrted()” ka value undefined hota hai because humme sort nhi kiya hota hai na first render me So jab humlog ?? Laga rahe hai to puch rhe hai kya ye undefined hai agar hai to null yani kuch bhi mat show karo Ab agar user sort karta hai ascending ya descending to iske according header.column.getIsSorted() alag alag value return karta hai “asc” and “desc” value return karta hai Ab isi value ko humme object me as a property likh ke rakha hua hai and uska value me icon rakha hua hai To jab wo value return karega “asc” ya “desc” so humlog usko bracket notion se access kar rhe hai apne defined object me and jo wala match karega wo wale ka value show ho jayega Yani ki wo icon Hope ki apko samjha paya achhe se
bhai ek batana, jo humne type kia usko direct agar hum axios se par karke data fetch kare, toh kya farak he jo hum tanstack se kar rhe he use? tanstack esa extra kya kar rha he.
Bhai data fetch alag chiz hai aur data table alag chiz hai dono same bhi nhi hai but fir bhi batata hu difference dekho axios se humlog data fetch kar sakte hai right but kya data ko render and table pe show kar sakte hai? Nhi na And Tanstack Table se us data ko (jisko fetch kiya hai) usko table pe show kar sakte hai Dono ka different work hai apne apne according Hope apko achhe se samjha paya hu
Bhai aapne kya kamaal video banaya he MUI pe Mene kafi channels dekhe jo 1 hrs ka video banake upper upper se chhod dete ki design hi to he Par aapne ek dum behtarin tareeke se samazaya he Appreciated man 🎉
Another great work. I was wondering if you could create a video on managing a datatable with 30 columns. Specifically, I'm interested in techniques for wrapping headers in some columns where the some of the column names are longer than others a second video on optimizing the view to fit all columns on the screen effectively. @toofanicoder I add the clarification to here In your video "Material React Table - Detailed panel हिंदी में [6]", you touched a bit on managing tables with a large number of columns. To specify my request a bit further: - **White Space Management**: There seems to be visible white space between the column headers. A great starting point could be how to eliminate unnecessary white space. - **Wrapping Column Headers**: Some column headers are longer than others. Could you demonstrate how to wrap these headers effectively? - **Optimizing Column Display**: As shown in this screenshot `imgur.com/O5JEyDO`, how would you remove the horizontal scrollbar to fit all columns on the screen without resorting to CSS adjustments in a Material React table?
Hey, sorry for the late response, I understand your 2 points out of 3 but the 3rd point where you share the image url that is not working I checked that yesterday but its not opening something went wrong so please give me the correct image url or send me the image to my instagram account so I will make a sperate video on your request
@@toofanicoder in that case the snapshot is just showing the white spaces in the column header. I was highlighting those for how to remove/control that whitespace
Another great work. I was wondering if you could create a video on managing a datatable with 30 columns. Specifically, I'm interested in techniques for wrapping headers in some columns where the some of the column names are longer than others a second video on optimizing the view to fit all columns on the screen effectively. @toofanicoder Sure I add the clarification to here In your video "Material React Table - Detailed panel हिंदी में [6]", you touched a bit on managing tables with a large number of columns. To specify my request a bit further: - **White Space Management**: There seems to be visible white space between the column headers. A great starting point could be how to eliminate unnecessary white space. - **Wrapping Column Headers**: Some column headers are longer than others. Could you demonstrate how to wrap these headers effectively? - **Optimizing Column Display**: As shown in this screenshot `imgur.com/a/3Pe8g2S`, how would you remove the horizontal scrollbar to fit all columns on the screen without resorting to CSS adjustments in a Material React table?
Is form mein input data "package.json" mein nahi jayega kya validation ki vajah se Kyunki package.json mein data jata rehta hai jaise jaise hum form mein entries krte hain. Please answer...🙏
@@toofanicoder Bhaiya matlab jaise hum agar react mein ek form banate hai and us form mein hum validation lagate hain aur jab hum data input krte Hain form mein toh voh hum kaha dekh payenge jaise ek object banakar hum usmein data store karenge ya aur kisi file mein data entries mil jati hai. AAP bata sakte ho ki validation krne ke baad hum jab data input karenge then submit karenge uske baad vo form reset ho jayega bt Jo humne data input Kiya tha toh hum vo wala data kaha dekh sakte hain VS code mein. Aap video mein console mein dikha rahe ho but agar multiple entries Hui toh kaha dekhenge. Please answer Actually bhaiya I am new to all this toh mujhe itna idea nhi hai.
Bhaiya I am extremely sorry, but main kehna chahta tha ki jaise hum ek file bana le jiska naam hai db.json and saari entries usi mein jaa rahi hai jaise hum "json-server --watch db.json --port 8000" ye wali command use krke chalate the aur sara form ka data db.json file mein chala jata tha vaise keh raha hu main.
@@robertmark5234 are koi baat nhi bhai naye ho ya purane ho, but tumhara question thoda ajeeb tha isiliye aise bola don’t take this seriously, ha toh jo maine console pe dikhiaya hai na….usko tum jaise chae use kar sakte ho us data ko api me hit kar sakte ho endpoint ke through backend ka jo endpoint hai uske through axios ya kuch bhi use karke backend me vej do fir wo data kisi database me store ho jayega simple toh hai
Another great work. I was wondering if you could create a video on managing a datatable with 30 columns. Specifically, I'm interested in techniques for wrapping headers in some columns where the some of the column names are longer than other and optimizing the view to fit all columns on the screen effectively. Your insights on this would be greatly appreciated. Looking forward to this content !!
Ok I will try but if you want this urgent you can send me your your requirements to my Instgram so I can guide you quickly because in youtube it can be late I want to say you clearly this I dont want ro give false hope, hope you understand so If Its urgent you can message me in instagram I will help you as much as I can do
@@toofanicoder Thank you for your quick response! It's not urgent, so there's no rush. I'm mainly curious to see how someone could effectively fit all the columns on the screen, and if not that, at least wrap the column names to make them more manageable. I watched your video titled "Material React Table - Detailed Panel," which addressed some aspects that I might consider. However, seeing a demonstration of column name wrapping and fitting all columns to the screen would be really cool. Take your time, and I look forward to seeing what you come up with! Thanks again for your willingness to help!
by using this code this can make your right side toolbar all actions to left side I read documentation section after some time I figured out this for you muiTopToolbarProps: { sx: { "&>*": { flexDirection: "row-reverse", }, }, }, just put this code in table config options It will work sure
@@toofanicoder Yes, exactly. It worked. Thanks a lot for your prompt answer. By the way, how did you come across the &>* pattern? I can't find anything in the documentation about that!
Okay, let me explain so I found the customisation toolbar section in documentation and in that section you can find a heading which is called relevant table options and under that spending 10 to 15 minutes I find out there is a option called muiToptoolbar props and somehow I feel that by using these props, I can alter the toolbar UI I was not sure but I thought to try what if it works and after that beside of muiToolbarProps options they mentioned info links where it takes two Me UI box, props and if you know about material box props there is only they give two option component and SX prop so I understand by using a prop, I can manipulate styling which you asked in comment section after that I need to figure out how can I manipulate style so I inspect element to toolbar and I see that toolbar is a div tag container and inside that there is another container which is used as a flex box. This flex box container hold toolbar buttons, density column filter everything so I just use that my code I experiment that code and it is worked as expected so I change the direction to row revers and magic happend hahaha
Its not always easy to do this kind of thing but believe me its always a simple solution for those bigger problems just believe in yourself just tell your brain you can do it dont know how but yes you can do it 😅😅 your brain you surely figure it out and give special thanks to your intuition your subconscious brain your gut feelings who always telling maybe doing this way can help, never give up 🤝🕊️
