Records display in Material UI Table

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

Upload PDF file in React, Laravel

Image Crop in React JS

How to Highlight a Deleted Row in PHP

Leave a Reply

Your email address will not be published. Required fields are marked *