Notes

---App.js----

import './App.css';
import Demo from './components/Demo';
import DemoTable from './components/DemoTable';
import GridScreen from './components/GridScreen';


function App() {
return (
<div className="App">
<GridScreen/>
<DemoTable/>

{/* <Demo/> */}
</div>
);
}

export default App;
-----

----HeaderButton.js----- // under components folder...
import React from 'react'
import Button from '@material-ui/core/Button';


function HeaderButton() {
const header= {
color: 'orange',
fontSize: '34px',
textAlign:'left',
position:'absolute',
left: '100px',
top:'40px'


}
const buttonStyleAdd=
{
position: 'absolute',
size: '20px',
textAlign:'center',
top:'115px',
left: '100px',
right: '1270px',
//width: '140px',
//padding: '30px'
}
const buttonStyleEdit=
{
position: 'absolute',
size: '20px',
top:'115px',
left: '250px',
right: '1070px',
//width: '120px',
}
return (
<div>
<h1 style={header}>Workspaces created for the account</h1>
<Button style={buttonStyleAdd} variant="outlined" color="primary">Add New Workspace </Button>
<Button style={buttonStyleEdit} variant="outlined" color="primary">Edit Workspace </Button>


</div>
)
}

export default HeaderButton

-------
------DemoTable.js------ //under components folder

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TablePagination from '@material-ui/core/TablePagination';
import TableRow from '@material-ui/core/TableRow';
import axios from 'axios'
import Checkbox from '@material-ui/core/Checkbox';

//define columns
const columns = [
{ id: 'id', label: 'S.No', minWidth: 50 },
{ id: 'workspace_name', label: 'Workspaceu00a0Name', minWidth: 100 },
{
id: 'users',
label: 'Usersu00a0Mapped',
minWidth: 90
}

];



const rows = [
{"id":1,"workspace_name":"Meevee","users":10},
{"id":2,"workspace_name":"Twiyo","users":83},
{"id":3,"workspace_name":"Devpulse","users":87},
{"id":4,"workspace_name":"Shufflester","users":98},
{"id":5,"workspace_name":"Wikido","users":94},
{"id":6,"workspace_name":"Feednation","users":80},
{"id":7,"workspace_name":"Abatz","users":77},
{"id":8,"workspace_name":"Fivechat","users":99},
{"id":9,"workspace_name":"Yacero","users":75},
{"id":10,"workspace_name":"Devshare","users":49},
{"id":11,"workspace_name":"Brainverse","users":56},
{"id":12,"workspace_name":"Lazz","users":58},
{"id":13,"workspace_name":"Twitternation","users":70},
{"id":14,"workspace_name":"Twitterwire","users":40},
{"id":15,"workspace_name":"Avamm","users":2},
{"id":16,"workspace_name":"Bluezoom","users":79},
{"id":17,"workspace_name":"Thoughtstorm","users":29},
{"id":18,"workspace_name":"Camimbo","users":9},
{"id":19,"workspace_name":"Flipstorm","users":64},
{"id":20,"workspace_name":"Tagchat","users":85},
{"id":21,"workspace_name":"Zooveo","users":57},
{"id":22,"workspace_name":"Ntags","users":76},
{"id":23,"workspace_name":"Browsedrive","users":16},
{"id":24,"workspace_name":"Camimbo","users":15},
{"id":25,"workspace_name":"Photobean","users":48},
{"id":26,"workspace_name":"Fliptune","users":56},
{"id":27,"workspace_name":"Dynabox","users":27},
{"id":28,"workspace_name":"Fiveclub","users":66},
{"id":29,"workspace_name":"Plambee","users":67},
{"id":30,"workspace_name":"Buzzshare","users":94},
{"id":31,"workspace_name":"Kazio","users":33},
{"id":32,"workspace_name":"Jabbersphere","users":9},
{"id":33,"workspace_name":"Feedspan","users":80},
{"id":34,"workspace_name":"InnoZ","users":11},
{"id":35,"workspace_name":"Meezzy","users":46},
{"id":36,"workspace_name":"Oyoloo","users":52},
{"id":37,"workspace_name":"Photolist","users":67},
{"id":38,"workspace_name":"Eadel","users":17},
{"id":39,"workspace_name":"Skipfire","users":80},
{"id":40,"workspace_name":"Vinder","users":21},
{"id":41,"workspace_name":"Linklinks","users":23},
{"id":42,"workspace_name":"Aivee","users":8},
{"id":43,"workspace_name":"Eabox","users":48},
{"id":44,"workspace_name":"Kimia","users":39},
{"id":45,"workspace_name":"Thoughtstorm","users":1},
{"id":46,"workspace_name":"Eabox","users":60},
{"id":47,"workspace_name":"Jabberbean","users":52},
{"id":48,"workspace_name":"Edgetag","users":57},
{"id":49,"workspace_name":"Jaxbean","users":86},
{"id":50,"workspace_name":"Blogtag","users":64}

];

// const rows = [axios.get('https://mocki.io/v1/7ff078af-7b31-4816-accc-9b57fc07c536')
// .then(function (response) {
// return response.data; // the response.data is string of rows
// })
// .catch(function (response) {
// console.log(response);
// })
// ]
//console.log(rows)
const st= {
position :'absolute',
width:'100%',
top: '180px',
left: '100px'

}
const useStyles = makeStyles({
root: {
width: '90%',
top: '110px'
},
container: {
maxHeight: 440,
},
});

export default function DemoTable() {

const classes = useStyles();
const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(10);

const handleChangePage = (event, newPage) => {
setPage(newPage);
};

const handleChangeRowsPerPage = (event) => {
setRowsPerPage(+event.target.value);
setPage(0);
};

return (
<div style={st}>
<Paper className={classes.root}>
<TableContainer className={classes.container}>
<Table stickyHeader aria-label="sticky table">
<TableHead>
<TableRow>
{columns.map((column) => (
<TableCell
padding="checkbox"
key={column.id}
align={column.align}
style={{ minWidth: column.minWidth }}
>

{column.label}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row) => {
return (
<TableRow hover role="checkbox" tabIndex={-1} key={row.code}>
{columns.map((column) => {
const value = row[column.id];
return (
<TableCell key={column.id} align={column.align}>
{column.format && typeof value === 'number' ? column.format(value) : value}
</TableCell>
);
})}
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
<TablePagination
rowsPerPageOptions={[10, 20, 25]}
component="div"
count={rows.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
</Paper>
</div>
);
}
---------

Total 3 files
App.js
HeaderButton.js
DemoTable.js