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