React Material UI Table with Paging Sorting and Filtering
HTML-код
- Опубликовано: 11 авг 2020
- React Material UI Table - Paging, Sorting, and Filtering
In this video, we will discuss how to following in react material UI with react hook
- how to list an array of records in a material-ui table
- mui table paging, sorting, and paging
- etc.
✨ Recommended Courses
➤ React : bit.ly/35pLyZP
➤ React + Material UI : bit.ly/2IKzMS4
➤ REDUX + React : bit.ly/3BnKck4
➤ Real World Projects in React : bit.ly/3JeUZPw
➤ Complete Web Development Bootcamp : bit.ly/3b92YAQ
📂 GitHub Repository
► bit.ly/31H8stS
💖 Buy me a Coffee ( Donation )
➤ bit.ly/3L36ut4 (PayPal)
🌀 Related Videos
bit.ly/3gkyQ2D : Introduction to Material UI
bit.ly/3gnfXMr : Customize MUI Components and Theme
bit.ly/2ZoeShN : Form Design
bit.ly/3hM0gz8 : Form Validation - ( Prev. Video )
bit.ly/3fPcxBe : Table with Paging, Sorting, and Filtering - ( This Video )
bit.ly/3g4IlCq : Modal Popup Dialog - ( Next Video )
bit.ly/3j5za6t : Confirm Dialog & Notification
Subscribe to this channel Link to this video
► goo.gl/RFY5C2 ► bit.ly/3fPcxBe
📚 Must-Read Books for All Programmers
Code Complete(2nd Edition) : geni.us/s6AK9t
The Art of Computer Programming : geni.us/Ko4H8m
Clean Code : geni.us/Jf9EBTB
Design Patterns : geni.us/OMPP
The Pragmatic Programmer : geni.us/8UM9F
💰 Purchase for Developers
💻 Laptops
MacBook Pro with M1 Chip : geni.us/7KGvnCU
Dell XPS 9570 : geni.us/rYB6
Microsoft Surface:geni.us/BJgeM
MacBook Air with M1 Chip : geni.us/fHZzRiB
ASUS ZenBook 13 : geni.us/LDKE
Lenovo Ideapad : geni.us/Mwvg2
⌨️ Keyboard : Das 4 Professional : geni.us/hkAdzi
🎬 All Playlist
bit.ly/2KQN9xF : Angular
bit.ly/30fPDMg : Asp.Net Core
bit.ly/325temF : React
bit.ly/2ws4utg : Python
goo.gl/viJcFs : Node.js
goo.gl/gvjUJ7 : Asp.Net MVC
bit.ly/3ggmmJz : Flutter
goo.gl/itVayJ : Web API
goo.gl/YJPPAH : MEAN Stack
goo.gl/s1zJxo : C# Tutorial
goo.gl/GXC2aJ : Asp.Net WebForm
goo.gl/vHS9Hd : C# WinForm
goo.gl/MLYS9e : MS SQL
goo.gl/5Vou7t : Crystal Report
goo.gl/qEWJCs : CG Exercises in C Program
🌟 About this Channel
CodAffection - [ 1 hour content weekly ].
This channel is all about teaching and motivating software developers to build applications/
websites in various technologies/ programming languages like Angular, React, NodeJS, Python, Asp.Net, C#, JavaScript, SQL, etc.
► For Sponsorship Contact here: bit.ly/2TjOt0q
🔗 Social Media Links
Blog : www.codaffection.com
Facebook : / codaffection
Twitter : / codaffection
RUclips : / codaffection
GitHub : github.com/codaffection
#MaterialUI #Reactjs #CodAffection
I cannot simply describe how amazing this tutorial is
Amazing! Your tutorials are very unique 👏🏽👌🏽 Thank You 🙏🏼
Glad you like them!,
I have a term project, and your tutorial is just what I was looking for. I just can hope to code like you someday, I can't thank you enough!
Thank you so so much for making these incredible tutorials! Looking forward to more videos!
Thank you very much! Very helpful and covered everything. Really appreciate your work.
This one save me a lot in filtering and sort functions, thanks.
Great job, very informative and with a lot of good practices :)
Really grateful for your tutorials.
Great Respect!, you saved my career, many million thanks!
This is great! Thank you for sharing with us.
This is one of the best video you will find on RUclips for Material UI table. React best practices and reusable components all in one video. 🎯
Glad it was helpful!
Thanks a lot, your videos are awesome and easy to follow..
Thanks! Awesome table.
great video machhane!!
goo.gl/RFY5C2 : Subscribe to CodAffection
goo.gl/bPcyXW : Buy me a Coffee
bit.ly/3gkyQ2D : Introduction to Material UI
bit.ly/3gnfXMr : Customize MUI Components and Theme
bit.ly/2ZoeShN : Form Design
bit.ly/3hM0gz8 : Form Validation - ( Prev. Video )
bit.ly/3fPcxBe : Table Paging Sorting and Filtering - ( This Video )
bit.ly/3g4IlCq : Modal Popup Dialog ( Next Video )
bit.ly/3j5za6t : Confirm Dialog & Notification
Thanks sir. Always waiting for the next video.
Always welcome
Thank you so much
You are GOD ! Perfectly decomposed table with all features to utilize, exactly what I needed. Many thanks :) subscribing
God is only one.
@@Smile-to2ii depends on your religion ... And honestly this guy made my life more acceptable than any other higher being ...Deserved my respect :)
Thank you so much 😊 one like, and subscribed just keep going on 💯💯💯💯💯💯💯
Thanks for the sub!
Thank you!
Really awesome...
Thanx soooo much!!!!
Thanks a lot.
excellent
Your Tutorial was too good. Can u show us column filter for each column and Tree View multi-select sample trying it from long way
Hindi english but !!!!! great content. Ty bro helps alot
Thanks for your video. Highly appreciate for your efforts. I tried your code for my understanding faced issue with sorting datetime field. Could you please suggest something for that?
Hello, when implementing the delete functionality, you added onConfirm but didn't initialize it on the confirmDialog useState hook. I am using Typescript and it throws an error since the onConfirm object that returns the onDelete method is not initialized. How do I initialize the onConfirm object in the confirmDialog useState hook?
Thank you for your videos. Could you please make a server side pagination and sorting with using material-ui its wery usefull for coders thank you.
I have already made the sidebar menu component and I was left to do the table component part
Your video helped a lot with the table component
but the side menu UI is getting disturbed. The menu options are lying down to each other. Any idea what could be the problem.
Great tutorial!
I have a problem while inserting data, When I insert the first one, it's all good. BUT when I insert a second record, I have the error TypeError: Cannot read properties of undefined (reading 'title').
Any help please ?
is it possible to integrate with an online google sheet table? I would like the HTML table to show the contents of my google table.
Thank you
can you handleSearch on setRecords or getEmpData fn? this might set new state with extra records not preloaded on table or if calling from apis
Hi great video,
Could you tell me which font you are using in your vs code?
Will there be any lag with search and sort if we have large set of data , whats the best approach to resolve lagging issue
How can we implement scrollbar for some columns and keep some columns fixed in the table?
hi can the table converted into an accordion, I love to practice your work but can I change the rows into accordion?
I'm not able to work with the sorting function on Typescript; if the column is a simple type it works, but if the column is an object it doesnt work; therefore it has problem with the null value on the database always, also on the simple string type
Is it possible to implement filtering at column level ? If yes how ?
Hello ,Thank you for this great video , I am getting this error TypeError: Cannot read property 'fn' of undefined can you help me
Awesome
awesome
hi, i need one help, i have used your example code for my project. If i am page 3, searching some think in the search text box . my filter function is working. but record count is not setting to page 0. help me how to do.
This section is way over me. I maybe have to watch this over a thousand times before I get this paging and sorting lol
totally agree.
Exactly
How can I highlight matched letters/words after filter?
Awesome video bro.. but now the "here" word is in my mind more than the original content : p
Can you add server side pagination with each column filtering in react material ui (hook) ?
nice
Can u make on table sort by date and time, would be great
haha good.
i have a problem with filtering with initialice the state, show an error: Error in /turbo_modules/react-dom@18.2.0/cjs/react-dom.development.js (14887:9)
Objects are not valid as a React child (found: object with keys {gender, name, location, email, login, dob, registered, phone, cell, id, picture, nat, fullName}). If you meant to render a collection of children, use an array instead.
This may be obvious, but maybe it will be helpful to another beginner:
1 - If using typescript, change "const [order, setOrder] = useState()" to "const [order, setOrder] = useState()"
2 - As I was using backend API, I got a response with an array with many object arrays nested in it and had to access data on different "index levels" (like once arr[0][0], and the other arr[0][0][0]), I also didn't want to rewrite the array in a "pretty way", so I had to change the descendingComparator function. To make it work in my code I sent the complete string that access the objects (aka the column name) in orderBy and replaced the ifs as "if (eval("b."+orderBy) < eval("a."+orderBy))"
great video ! what's your font ?
no collapsable menu and checkboxes?
Is it using server side back end api .can you do server side pagination and filtering
No back end api is used.
Hi, question pls. On first load, If you paginate to the next set of records, assuming you have at least 10 records, so you are now viewing records 6 to 10 and then perform a search of a record that exists, no records are found. Would you know how to fix this issue pls? Thanks.
Hi Tony, Could you try that in debug mode, to find root cause ?
Awesome Tutorial! but there are two issues in the code. Searching does not work with capital words and pagination. Please fix this
invalid prop `page` of type `object` `tablepagination , expected `number` material ui how to fix this
Just try to keep the font size larger 🙏
Hello sir, could you include in another tutorial like this, how to make the application fully responsive? I've already made a permanent Drawer with a Layout and an appBar on top. What is happening is that all forms are not responsive. And shows not organized when the screen gets smaller. But this video series is exactly what I was looking for. Thank you and congratulations.
Hi, You can achieve this by changing the value of the xs and md in grid of the employee form . item xs={12} md={6}
how to sort null values at the end
Excellent tutorial by all standards. It was a life saver for me. But I think your font style does not make the codes visible enough.
Thank you very much, i subscribed!, but i have a problem when I try to filter. If I'm on page 2 of the table and filter, the result appears on page 1, but page 2 is empty. I have tried to reset pagination table automatically
after filtering, but it doesn't work.
I solved it puting "setPage(0)" every time I filter.
@@Richard.0991 - can you please share you code. Where exactly did you kept “setpage(0)”
@@aakashpatel893 Hello. Here my code with comments, sorry for my bad english. pastebin.com/07Xs9DWL
@@Richard.0991 Thanks Richard. It worked like a charm. Thanks once again.
@R M you save my day i was facing the same problem thank you
May i know the react version.It is not working for me in react version 18
Same here! React 18 is supporting
search is working only in first page.
Hello sir without scaffolding crud operation banao asp.net MVC EntityFramework please sir
#source #code
Topic: Full stack javascript - Data Pagination and Filtering
Good day,
If I may humbly ask a little help, any hints, comments and suggestions are very much welcome, thank you in advance for all your help, please see question below, how do I code this?:
/*
Create the `showPage` function
This function will create and insert/append the elements needed to display a "page" of nine students
*/
/*
Create the `addPagination` function
This function will create and insert/append the elements needed for the pagination buttons
*/
// Call functions
Every time you say Boom!.. it will not worked at my side on first attempt :-p . I was fun to solve the issue. and feel the word Boom!...... :-)
So in order to understand search function we have to watch and understand you whole tutorials:((
It's so complicated 😐
i am not understan bro
awesome