Back to Browse

React & Material UI Data Grid Table Tutorial - Rendering Data Dynamically Using a REST API

43.0K views
Apr 6, 2021
13:12

In this video, I create a dynamic and responsive table component, with React and Material UI, using the Data Grid component. We also worked with the free REST API called JSON place holder. This tutorial is beginner-friendly and very easy to follow along. Installation commands: npm install @material-ui/core npm i @material-ui/data-grid TimeStamps: Intro - 00:00​ 02:26​​ - Load Boilerplate Template on the browser. 04:02 - Import Data Grid & start setting up columns for the data table. 05:54 - Started to create logic to fetch API data from JSON placeholder. 08:49 - Started implementing logic to load API data inside the Data Grid table 12:39 - Conclusion Material UI Documentation: https://material-ui.com/components/data-grid JSON Placeholder Page: https://jsonplaceholder.typicode.com/​ Source Code: https://github.com/desoga10/data-grid For more resources on Web Development: https://thecodeangle.com/​​​ Follow Me on Twitter: https://twitter.com/thecodeangle​​​​ Leave a like and subscribe for more videos. Thanks a lot for watching ❤

Download

0 formats

No download links available.

React & Material UI Data Grid Table Tutorial - Rendering Data Dynamically Using a REST API | NatokHD