React Material-UI table Tutorial

Подписаться 299

Просмотров 52 тыс.

50% 1

This is an example of creating a table using React Material UI with some formatting. I’ve used faker.js to generate realistic test data. Basic pagination is applied.
Code: github.com/dii...
Material UI pages (referenced in the video):
Material UI tables: material-ui.co...
From the above page, I’ve referred to ‘Basic table’ example for table and ‘Fixed Header’ example for pagination.
Material UI theming palette: material-ui.co...
Material UI Typography: material-ui.co...
Faker.js: github.com/mar...
Create react app guide: reactjs.org/do...

Опубликовано:

14 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 71

@HariKrishna-qh5zp 2 года назад

Hi, First thing to appreciate is the voice of the video, which is so smoothening and clear to listen to.

@dariofrison2059 2 года назад

Hello, I'm from Argentina and I'm so happy with you work. It helped me si much.

@vigneshv9888 3 года назад

Please make more videos on material ui and react...Its really helpful 🙇🏻

@cybersec7945 3 года назад

Please don't stop making videos. If you can make a tutorial for creating a complete application with react and material UI along with the deployment, It would be great. P.S I know its a lot to ask but I really learned something by watching your video.

@olatosin3703 3 года назад

Your first youtube tutorial is awesome. You need to keep doing it!

@nandikdevbhuti6070 3 года назад

Awesome one...Helped me a lot understanding the codes. Please try to show us how to perform searching and sorting operation too. Keep going!!!

@Robert420L 3 года назад

Wow this is the best explanation for material UiTable... Keep the good work coming...next video -->using context api to change the theme to dark mode for the table mentioned in the video please 🙂

@prabhakarmishra2182 2 года назад

It was really very nice, you explained it all very well, I would love to watch more videos like this, especially about react and material UI

@patrickpontes5868 2 года назад

Hello from Brazil! I loved your tutorial and it really helped me to understand a little bit more about material ui. Thanks a lot!

@richardstuart2695 2 года назад

Excellent. Good English, fast presentation, easy to understand. Look forward to your next video.

@jimhapper7245 3 года назад

Thank you very much for this clear, concise, useful tutorial. It is just right for the project I am working on. Keep up the great work!

@Hescar1 3 года назад

keep doing material ui tutorials like this! this was amaizing!

@knocknayak 2 года назад

Keep creating videos, it's really helpful

@edwardhiuhu9832 2 года назад

Straight to the point. Love you work

@ghadachebbi4145 3 года назад

Do not stop, keep doing react videos, Good luck ^^

@anilmohan9961 2 года назад

Very well explained. A concise tutorial that gives you a lot in a short time. Well done!

@christianokeke8326 2 года назад

Nice and concise video. You did great for a first video

@seethalramakrishnan2778 3 года назад

Thank you for this one.Keep doing videos like this

@darraayouness4187 2 года назад

Thank you very much , I would love to watch more videos like this .

@verygood5377 3 года назад

Hey, I am excited to be your 3rd subscriber and be the first one to comment!! Thank you for your video !!

@jimmyopot1972 2 года назад

Well done, just what I needed for my project.

@dhananjayapattnaik7428 Год назад

thank you madam because of you i get to know how to color status .

@Yurasokal 3 года назад

Hey, Dee ! Thanks a lot for the tutorial, nice !! You need to continue that work ! Hello from Ukraine !

@arpitpatel75 2 года назад

Perfect Explanation . Great Tutorial !

@daurenismagulov5654 2 года назад

Thanks for the style

@maczain 3 года назад

Thanks a lot for the tutorial, and for the code ;) everything seems to be working completely fine

@fidelitopardillo230 3 года назад

, you did a great job.. new subscriber here , continue making another tutorial, You solve my problem using pagnation

@khandoor7228 3 года назад

excellent! please do more. This was clear and concise!!

@thebackbencher3008 3 года назад

Nice one... Will you please come up with a video or series for Highly scalable and Editable material tables using Typescript ?

@williampulling7275 2 года назад

Outstanding job. The finish was a little fast, but overall a really solid presentation.

@Delover1089 2 года назад

Thank you for this video!!!

@prabhakarmishra2182 2 года назад

Please make more such tutorials

@jitendrabisht3774 3 года назад

Awesome video . Keep up the good work

@rdubitsk 3 года назад

Excellent work. Would love to see table scroll bar for rows and columns.

@sarthakgupta4197 3 года назад

Hii, thanks for making such a video. It was really helpful. I also want to add a column which would display the serial number for rows. Please make a video on that as well.

@nagbalkur1365 2 года назад

Pace was quite fast for me at least. but overall, a good tutorial. hope you can post an updated tutorial for version 5

@KomunitasBelajarForex 3 года назад

how about to add a search button and "sort" feature?

@dgcp354 3 года назад

There is options prop on table, u can pass it an object, for example {filter:true, search:true}

@jenasusil6 3 года назад

Great Tutorial . It helps me a lot . Thank you Madam🙏

@yipkaiwing 3 года назад

thanks for your tutorial. It is so great. I learned a lot from your video.

@FuadAliah 3 года назад

Thank You, how do you wrap multi-elements with a parent with a shortcut?

@gizzammauw1232 2 года назад

love your content please keep it up, thanks

@haiderjaafer8164 2 года назад

Great work keep going forward

@prafullkumar6369 3 года назад

Failed prop type: Invalid prop `page` of type `object` supplied to `ForwardRef(TablePagination) how can fix this error

@crowbr 2 года назад

Nice Video, Congratz, you know how i can put search bar into table?

@kazalghosh5598 3 года назад

This is really awesome..go ahead

@amzykhan8581 2 года назад

can you create another one using the new mui please

@sanjay9970 2 года назад

could you please make videos on reac t+ typescript + material ui

@sdsim1 Год назад

Really good 👍

@chiraagarunkumar5691 2 года назад

Too good! Thanks

@JoywithShams 3 года назад

Very helpful one ! Keep doing

@ashbhardwaj4995 2 года назад

i have a simple concern that how can i use search bar to search data from table

@brothersofgenration9185 2 года назад

can you please tell us how can we import data from CSV file to react directly

@milosavljevich1686 2 года назад

you should make more tutorials

@fidelitopardillo6116 3 года назад

hey Dee kay, I'm your new subscriber , thankyou for your video .. Hope you can make more videos

@sparshsinghal9238 3 года назад

This was great work

@kashifkhan-mq1lk 3 года назад

keep it up , you are doing Great

@legon4910 2 года назад

Amazing

@reymarkmanay88 3 года назад

Hi, great tutorial. However, pagination is not working on me. I'm getting an error upo checking my console. "Uncaught TypeError: onPageChange is not a function at handleNextButtonClick" hope you can help me

@deekay6164 3 года назад

Thanks! May be it should be 'onChangePage' instead of 'onPageChange', which is a prop in TablePagination? List of props for TablePagination here - material-ui.com/api/table-pagination/

@reymarkmanay88 3 года назад

@@deekay6164 hi, my apologies I have typo error on my question. Im usinh onChangePage upon encountering the error. onChangePage is not calling the function.

@tsreenivas6550 3 года назад

Sorting and Filtering option also implement

@goodsonnyashamutongi3905 3 года назад

Thanks, This is great

@arjun-de6dr 2 года назад

Thank you

@saifuddin395 2 года назад

Thanks a lot

@prafullkumar6369 3 года назад

please Help .i m struck in last part of my project

@SantiagoTuero 3 года назад

Thanks!

@chibensonluxana 2 года назад

Nice

@hardwired66 2 года назад

very like it

@divyanshchaudhary4092 Год назад

coooooooooooooooooooooooollll

@lawrenceo.caulker2765 3 года назад

The tutorial is good but very hard to follow you because you move too fast on the screen. You switch from one point to the other without giving the opportunity to see what you typed. It was almost like you were rushing through the video. Please remember that some people prefer to code along rather than looking at the final code. I hope you will consider this advice for your next project.