From 11fed7532f67fb1ef2599042559dc6541ff0f84e Mon Sep 17 00:00:00 2001 From: vikas62081 Date: Sat, 6 Feb 2021 11:00:10 +0530 Subject: [PATCH 1/2] pushing look up changes --- src/App.js | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/src/App.js b/src/App.js index a4fff2e..4a74461 100644 --- a/src/App.js +++ b/src/App.js @@ -8,23 +8,31 @@ const empList = [ { id: 3, name: "David", email: 'david342@gmail.com', status: 1, role: 3 }, { id: 4, name: "Vikas", email: 'vikas75@gmail.com', status: 0, role: 2 }, ] - +const empStatus=[ + {id:0,title:'Deactive'}, + {id:1,title:'Active'} +] function App() { const [data, setData] = useState(empList) + const [status,setStatus]=useState({}) const columns = [ { title: "ID", field: "id" }, { title: "Name", field: "name" }, { title: "Email", field: "email" }, - { title: "Status", field: 'status', }, - { title: "Role", field: "role", } + { title: "Status", field: 'status',lookup:status }, + { title: "Role", field: "role",lookup:{0:"Associate",1:"Senior Associate",2:"Architect",3:"Manager"} } ] - + useEffect(()=>{ + const status={} +empStatus.map(row=>status[row.id]=row.title) +setStatus(status) + },[]) return (

React-App

-

Material Table

+

Populate look up data from state

Date: Sun, 23 May 2021 15:10:56 +0530 Subject: [PATCH 2/2] pushing add hyperlink to column --- package-lock.json | 32 ++++++++++++++++++++++++++++++++ package.json | 6 ++---- src/App.js | 44 ++++++++++++++++---------------------------- 3 files changed, 50 insertions(+), 32 deletions(-) diff --git a/package-lock.json b/package-lock.json index 82c61d4..0fdbb2e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3363,6 +3363,38 @@ "react-transition-group": "^4.4.0" } }, + "@material-ui/icons": { + "version": "4.11.2", + "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.2.tgz", + "integrity": "sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==", + "requires": { + "@babel/runtime": "^7.4.4" + } + }, + "@material-ui/lab": { + "version": "4.0.0-alpha.58", + "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.58.tgz", + "integrity": "sha512-GKHlJqLxUeHH3L3dGQ48ZavYrqGOTXkFkiEiuYMAnAvXAZP4rhMIqeHOPXSUQan4Bd8QnafDcpovOSLnadDmKw==", + "requires": { + "@babel/runtime": "^7.4.4", + "@material-ui/utils": "^4.11.2", + "clsx": "^1.0.4", + "prop-types": "^15.7.2", + "react-is": "^16.8.0 || ^17.0.0" + }, + "dependencies": { + "@material-ui/utils": { + "version": "4.11.2", + "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.2.tgz", + "integrity": "sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==", + "requires": { + "@babel/runtime": "^7.4.4", + "prop-types": "^15.7.2", + "react-is": "^16.8.0 || ^17.0.0" + } + } + } + }, "@material-ui/pickers": { "version": "3.2.2", "resolved": "https://registry.npmjs.org/@material-ui/pickers/-/pickers-3.2.2.tgz", diff --git a/package.json b/package.json index 299f239..936cde8 100644 --- a/package.json +++ b/package.json @@ -4,13 +4,11 @@ "private": true, "dependencies": { "@material-ui/core": "^4.10.2", + "@material-ui/icons": "^4.11.2", + "@material-ui/lab": "^4.0.0-alpha.58", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", - "ag-grid-community": "^23.2.0", - "ag-grid-enterprise": "^23.2.0", - "ag-grid-react": "^23.2.0", - "axios": "^0.19.2", "material-table": "^1.69.2", "react": "^16.13.1", "react-dom": "^16.13.1", diff --git a/src/App.js b/src/App.js index 4a74461..4c0a47e 100644 --- a/src/App.js +++ b/src/App.js @@ -1,43 +1,31 @@ -import React, { useState, useEffect } from 'react'; +import React from 'react'; import './App.css'; import MaterialTable from 'material-table' - +import {Link} from '@material-ui/core' const empList = [ - { id: 1, name: "Neeraj", email: 'neeraj@gmail.com', status: 0, role: 1 }, - { id: 2, name: "Raj", email: 'raj@gmail.com', status: 1, role: 0 }, - { id: 3, name: "David", email: 'david342@gmail.com', status: 1, role: 3 }, - { id: 4, name: "Vikas", email: 'vikas75@gmail.com', status: 0, role: 2 }, -] -const empStatus=[ - {id:0,title:'Deactive'}, - {id:1,title:'Active'} + { id: 1, name: "Neeraj", email: 'neeraj@gmail.com', phone: 9876543210, }, + { id: 2, name: "Raj", email: 'raj@gmail.com', phone: 6678901234 }, + { id: 3, name: "David", email: 'david342@gmail.com', phone: 6312345678 }, + { id: 4, name: "Vikas", email: 'vikas75@gmail.com', phone: 9787654321 }, ] -function App() { - const [data, setData] = useState(empList) - const [status,setStatus]=useState({}) +function App() { const columns = [ - { title: "ID", field: "id" }, - { title: "Name", field: "name" }, - { title: "Email", field: "email" }, - { title: "Status", field: 'status',lookup:status }, - { title: "Role", field: "role",lookup:{0:"Associate",1:"Senior Associate",2:"Architect",3:"Manager"} } - ] - useEffect(()=>{ - const status={} -empStatus.map(row=>status[row.id]=row.title) -setStatus(status) - },[]) + { title: "ID", field: "id",render:rowData=>{rowData.id} }, + { title: "Name", field: "name",render:rowData=>{rowData.name} }, + { title: "Email", field: "email" }, + { title: "Phone Number", field: 'phone' }, + {title:"Profile",render:rowData=>Profile} + ] return (

React-App

-

Populate look up data from state

+

Add hyperlink to column in Material Table

+ data={empList} + columns={columns} />
); }