added header

client/package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@material-ui/core": "^4.11.4",
     "@material-ui/data-grid": "^4.0.0-alpha.31",
+    "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.58",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

client/src/App.tsx

@@ -3,12 +3,16 @@ import logo from './logo.svg';
 import './App.css';
 import { render } from '@testing-library/react';
 import MyTable from './components/MyTable'
+import Header from './components/Header'
+import TeachersTable from './components/TeachersTable'
 
 class App extends React.Component{
   render(){
     return(
       <>
+        <Header/>
         <MyTable/>
+        <TeachersTable/>
       </>
     );
   }

client/src/components/Header.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import Button from '@material-ui/core/Button';
+import IconButton from '@material-ui/core/IconButton';
+import MenuIcon from '@material-ui/icons/Menu';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      flexGrow: 1,
+    },
+    menuButton: {
+      marginRight: theme.spacing(2),
+    },
+    title: {
+      flexGrow: 1,
+    },
+  }),
+);
+
+export default function ButtonAppBar() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <AppBar position="static">
+        <Toolbar>
+          <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
+            <MenuIcon />
+          </IconButton>
+          <Typography variant="h6" className={classes.title}>
+            News
+          </Typography>
+          <Button color="inherit">Login</Button>
+        </Toolbar>
+      </AppBar>
+    </div>
+  );
+}

client/src/components/TeacherService.ts

@@ -0,0 +1,12 @@
+export const getRooms = () => {
+    return [
+      { id: 1, roomNumber: 'A100' },
+      { id: 2, roomNumber: 'A102' },
+      { id: 3, roomNumber: 'A103' },
+      { id: 4, roomNumber: 'A201' },
+      { id: 5, roomNumber: 'A310' },
+      { id: 6, roomNumber: 'A202' },
+      { id: 7, roomNumber: 'A107' },
+    ];
+    }
+

client/src/components/TeachersTable.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { getRooms } from "./TeacherService"
+import { DataGrid, GridColDef, GridValueGetterParams } from '@material-ui/data-grid';
+
+const columns: GridColDef[] = [
+  { field: 'id', headerName: 'KeyID', width: 150 },
+  { field: 'roomNumber', headerName: 'Room Number', width: 150 },
+
+  {
+    field: 'qrCode',
+    headerName: 'QR Code',
+    description: 'This column get string qrCode using Keyid + number.',
+    sortable: false,
+    width: 160,
+    valueGetter: (params: GridValueGetterParams) =>
+      `${params.getValue(params.id, 'id') || ''}${
+        params.getValue(params.id, 'roomNumber') || ''
+      }`,
+  },
+
+];
+
+const rows = getRooms
+
+
+export default function DataGridDemo() {
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid rows={getRooms()} columns={columns} pageSize={5} checkboxSelection />
+    </div>
+  );
+}

client/yarn.lock

@@ -1429,6 +1429,13 @@
     prop-types "^15.7.2"
     reselect "^4.0.0"
 
+"@material-ui/icons@^4.11.2":
+  version "4.11.2"
+  resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.11.2.tgz#b3a7353266519cd743b6461ae9fdfcb1b25eb4c5"
+  integrity sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+
 "@material-ui/lab@^4.0.0-alpha.58":
   version "4.0.0-alpha.58"
   resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.58.tgz#c7ebb66f49863c5acbb20817163737caa299fafc"