We can Show multiple records in Material UI Table using React. Records display in Material UI Table.
I am using simple Javascript Fetch Techqniq for fetching data from this URL https://jsonplaceholder.typicode.com/users. You can use AXIOS as well for fetching Records from any external URL
Learn more about fetch() https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
You need to install material UI in your system using the below command.
// with npm npm install @material-ui/core // with yarn yarn add @material-ui/core
You need to install the Material table using the below command
// with npm npm install material-table @material-ui/core --save // with yarn yarn add material-table @material-ui/core
Now Copy the below code
App.js
import React, { useState, useEffect } from 'react'; import MaterialTable from 'material-table' import Switch from '@material-ui/core/Switch'; export default function App() { const [data, setData] = useState([]) const columns = [ { title: "ID", field: "id" }, { title: "Username", field: "username" }, { title: "Name", field: "name" }, { title: "Email", field: "email" }, { title: "Phone", field: "phone" }, { title: "Web Link", field: 'website' }, ] useEffect(() => { fetch("https://jsonplaceholder.typicode.com/users") .then(resp => resp.json()) .then(resp => { setData(resp) }) }, []) return ( <div className="Apps" style={{padding:"50px"}}> <h3 align="center">Records Show in Table</h3> <h4 align='center'>Material Table</h4> <MaterialTable title="Employee Data" data={data} columns={columns} /> </div> ); }
Now run the project using npm start
See our More Tutorials in React
Display Records in Model Box in React