add simple table to display students

client/index.js

@@ -5,6 +5,7 @@
 // @flow
 import 'bulma/css/bulma.css';
 import 'font-awesome/css/font-awesome.css';
+import 'react-table/react-table.css';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Loadable from 'react-loadable';

client/views/AddStudents.js

@@ -2,22 +2,53 @@ import React from 'react';
 import NavBar from '../components/NavBar';
 import Hero from '../components/Hero';
 import Footer from '../components/Footer';
+import ReactTable from 'react-table'
 
-const AddStudents = () => {
-  return (
-      <div>
+class AddStudents extends React.Component {
 
-        <NavBar />
-        
-        <Hero title='Add Students' subtitle='Tell me who made this exam' />
+    constructor(props) {
+        super(props)
+        var that = this ;
 
-        <h1>React Router demo</h1>
-        Hoi dit de AddStudents
+        that.state = {
+            students: [],
+            columns: [{
+                    Header: 'Student #',
+                    accessor: 'id'
+                }, {
+                    id: 'studentName',
+                    Header: 'Name',
+                    accessor: s => s.first_name + ' ' + s.last_name,
+                }, {
+                    Header: 'email',
+                    accessor: 'email'
+            }]
+        }
 
-        <Footer />
-      
-      </div>
-  )
+        fetch('/api/students')
+        .then((response) => response.json())
+        .then((students) =>{
+            that.setState({students: students})
+        })
+    }
+
+    render() {
+
+
+        return (
+            <div>
+                <NavBar />
+
+                <Hero title='Add Students' subtitle='Tell me who made this exam' />
+
+                <ReactTable columns={this.state.columns} data={this.state.students}/>
+
+                <h1>React Router demo</h1>
+
+                <Footer />
+            </div>
+        )
+    }
 }
 
-export default AddStudents;
\ No newline at end of file
+export default AddStudents;

package.json

@@ -18,6 +18,7 @@
     "react-dom": "^16.2.0",
     "react-loadable": "^5.3.1",
     "react-router-dom": "^4.2.2",
+    "react-table": "^6.7.6",
     "style-loader": "^0.19.1",
     "url-loader": "^0.6.2",
     "webpack": "^3.10.0"

server/api.py

@@ -3,3 +3,12 @@ from flask import Blueprint, jsonify, request, redirect
 from . import db
 
 app = Blueprint(__name__, __name__)
+
+@app.route('/students', methods=['GET'])
+@db.session
+def get_students():
+    return jsonify([
+        dict(id=s.id, first_name=s.first_name,
+             last_name=s.last_name, email=s.email)
+        for s in db.Student.select()
+    ])

yarn.lock

@@ -794,6 +794,10 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@^2.2.5:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
+
 clean-css@4.1.x:
   version "4.1.9"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.1.9.tgz#35cee8ae7687a49b98034f70de00c4edd3826301"
@@ -3744,6 +3748,12 @@ react-router@^4.2.0:
     prop-types "^15.5.4"
     warning "^3.0.0"
 
+react-table@^6.7.6:
+  version "6.7.6"
+  resolved "https://registry.yarnpkg.com/react-table/-/react-table-6.7.6.tgz#3f9e3b308328ceb04ef93a47babefaba2619c905"
+  dependencies:
+    classnames "^2.2.5"
+
 react@^16.2.0:
   version "16.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"