![]() The request can be of any APIs that send and receive data in JSON or XML format. The Fetch API in JavaScript allows web browsers to make HTTP requests to web servers. Some of these side effects could include things like updating the DOM, fetching data from a RESTful API, timer events, and so on. ![]() The useEffect hook allows us to handle side effects in our functional component. The useState hook in React is an inbuilt function that helps us track state in a functional component. In this functional component, we will implement some of the following default features in React: ![]() In the DataGrid.js file, we will use a functional component. In the end, our folder structure should look something like this: > src We will call this new folder Table and the file will be called DataGrid.js. To integrate our API, we need to create a new file and folder in our src directory that's created for us when we generated our project with Create-React-App. Then we navigated into the newly created project directory and started the project with npm.īy default, our project will be running on localhost:3000 in the browser.įinally, we need to install two packages which are Material UI and the Data Grid using the command below: npm install Integration and Consumption The next step is to create a new React project from the terminal by running the command below: npx create-react-app data-gridĪbove we created a new project called data-grid. We can then install and use Create React App using npm to create our project, by running the command below: npm i create-react-app This will give us access to npm in our terminal. To create a new project in React, you need to have Node.js installed. ![]() How to Install and Setup React and Material UI Data Grid This will trigger the sorting and filtering functionalities.Īnother basic feature that comes by default is scrolling, which does not occur in a normal table by default. The Data Grid provides an inbuilt feature that allows data to be exported to CSV format.Īlso, data can be manipulated by clicking a column header. The Data Grid in Material UI supports single and multiple row selection, ability to disable selection certain rows or all rows, checkbox selection and much more. This allows the user to select certain rows on mouse click or using certain keyboard shortcuts. In terms of interaction, the Data Grid provides an inbuilt feature such as row selection by default. It also provides additional features such as keyboard navigation by using certain keys on the keyboard to change the focus of the table cells, along with density properties to determine the row and column height on the table. That is, every cell is accessible using the keyboard. The Data Grid offers accessibility features such as cell highlighting. There are some important reasons you might want to use the Material UI Data Grid: The team also has future plans of implementing additional features like Excel export, Range selection, Group, Pivot, Aggregation.įor the purpose of this tutorial, we will be implementing some of the features of the Data Grid with a public REST API called JSONPlaceholder Why use the Material UI Data Grid It's a feature-rich component available in MIT or Commercial versions".īasically, Data Grid in Material UI comes with some features like editing, sorting, filtering, updating, pagination, exports and so on by default. Watch the video version of this article below, or on my YouTube channel: Introduction to Data GridĪccording to the Material UI documentation, Data Grid is a " fast and extendable React data table and React data grid. Display API Results in Material UI Data Grid.Installation and Setup of React and Material UI Data Grid.And then we'll also go through how to install and set up the Data Grid, consume and integrate a RESTful API, and enable pagination as well as sorting and filtering. In this article, we'll discuss why you should use the Data Grid in Material UI in your project. It makes it easy for you to display data and perform out of the box functionalities such as editing, sorting, filtering, pagination and more. Material UI's Data Grid is a powerful and flexible data table.
0 Comments
Leave a Reply. |