Create A Flight List Table in React (Three Part Series)
March 26, 2020
Part 1: We’ll clean up the App.js template and grab a bootstrap table template and integrated into our React app. We’ll also tweak the table to give it a responsive feature and make sure that proper CSS style rules are conformed to JSX syntax.
Here’s the state of our App.js at this point. Some rows were removed for brevity.
JSX
x
61
61
1
import React from 'react';2
import './App.css';3
import Nav from './components/Nav';4
import Footer from './components/Footer';5
import NavData from './models/NavData';6
7
class App extends React.Component {8
constructor(props) {9
super(props);10
this.state = { navData: NavData };11
}12
render() {13
return (14
<div className="App">15
<Nav navData={this.state.navData} />16
17
<div className="container">18
<div className="row">19
<div className="col-md-12 mb-5">20
<h1 className="text-left">Flight Schedule</h1>21
<div className="table-responsive border p-4 bg-light rounded">22
<p className="text-left font-weight-bold">Active Flight Schedule</p>23
<table className="table table-hover">24
<thead className="table-borderless table-secondary">25
<tr>26
<th scope="col">#</th>27
<th scope="col">First</th>28
<th scope="col">Last</th>29
<th scope="col">Handle</th>30
<th scope="col">Handle</th>31
<th scope="col">Handle</th>32
<th scope="col">Handle</th>33
<th scope="col">Handle</th>34
<th scope="col">Handle</th>35
</tr>36
</thead>37
<tbody>38
<tr>39
<td scope="row">1</td>40
<td>Mark</td>41
<td>Otto</td>42
<td>@mdo</td>43
<td>@mdo</td>44
<td>@mdo</td>45
<td>@mdo</td>46
<td>@mdo</td>47
<td>@mdo</td>48
</tr> 49
</tbody>50
</table>51
</div>52
</div>53
</div>54
</div>55
<Footer />56
</div>57
);58
}59
}60
61
export default App;
