Merge pull request #10 from ucfcs/Frontend

new bootstrap table, working on adding props to route

Author: RandyT97

duct-drone-app/package.json

@@ -30,6 +30,7 @@
     "prop-types": "^15.7.2",
     "react": "^16.8.5",
     "react-bootstrap": "^1.0.0-beta.6",
+    "react-bootstrap-table-next": "^3.1.0",
     "react-dom": "^16.8.5",
     "react-joystick-component": "^1.4.0",
     "react-nipple": "^1.0.1",

duct-drone-app/src/App.js

@@ -14,6 +14,16 @@ import './App.css';
 
 class App extends Component {
 	render() {
+		const columns = [{
+		  dataField: 'id',
+		  text: 'Product ID'
+		}, {
+		  dataField: 'name',
+		  text: 'Product Name'
+		}, {
+		  dataField: 'price',
+		  text: 'Product Price'
+		}];
 		return(
 			<Router>
 					<Container>

duct-drone-app/src/DataTable.js

@@ -1,39 +1,31 @@
 import React, { Component } from 'react';
 import Table from 'react-bootstrap/Table';
 import './DataTable.css'
+import BootstrapTable from 'react-bootstrap-table-next';
 class DataTable extends React.Component {
-	// constructor(props) {
-
-	// }
+	constructor(props) {
+		super(props);
+		console.log(props.columns);
+	}
 	render() {
-		var isActive = false;
+		// const columns = [{
+		//   dataField: 'id',
+		//   text: 'Product ID'
+		// }, {
+		//   dataField: 'name',
+		//   text: 'Product Name'
+		// }, {
+		//   dataField: 'price',
+		//   text: 'Product Price'
+		// }];
+		const products = [{
+			id: 23,
+			name: "cheese",
+			price: 23.23
+
+		}];
 		return (
-			<Table responsive bordered="true"  striped bordered size="sm">
-			  <thead>
-			    <tr>
-			      <th>#</th>
-			      <th>Table heading</th>
-			      <th>Table heading</th>
-			    </tr>
-			  </thead>
-			  <tbody>
-			    <tr>
-			      <td>1</td>
-			      <td>Table cell</td>
-			      <td>Table cell</td>
-			    </tr>
-			    <tr>
-			      <td>2</td>
-			      <td>Table cell</td>
-			      <td>Table cell</td>
-			    </tr>
-			    <tr>
-			      <td>3</td>
-			      <td>Table cell</td>
-			      <td>Table cell</td>
-			    </tr>
-			  </tbody>
-			</Table>
+			<BootstrapTable keyField='id' data={ products } columns={ this.props.columns } />
 		);
 	}
 }