1. First, we need fresh reactjs setup, and for that, we need to run below commands into out terminal, and also we should have latest node version installed on our system:
npx create-react-app my-awesome-project
cd my-awesome-project
npm start2. Now we need to run below commands into our project terminal to get bootstrap and related modules into our reactjs application:
npm install [email protected] --save
npm start //For start project again3. Finally for the main output, we need to add below code into our my-awesome-project/src/App.js file or if you have fresh setup then you can replace my-awesome-project/src/App.js file code with below code:
import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<h5 class="card-title text-uppercase mb-0">Manage Users</h5>
</div>
<div class="table-responsive">
<table class="table no-wrap user-table mb-0">
<thead>
<tr>
<th scope="col" class="border-0 text-uppercase font-medium pl-4">#</th>
<th scope="col" class="border-0 text-uppercase font-medium">Name</th>
<th scope="col" class="border-0 text-uppercase font-medium">Occupation</th>
<th scope="col" class="border-0 text-uppercase font-medium">Email</th>
<th scope="col" class="border-0 text-uppercase font-medium">Added</th>
<th scope="col" class="border-0 text-uppercase font-medium">Category</th>
<th scope="col" class="border-0 text-uppercase font-medium">Manage</th>
</tr>
</thead>
<tbody>
<tr>
<td class="pl-4">1</td>
<td>
<h5 class="font-medium mb-0">Daniel Kristeen</h5>
<span class="text-muted">Texas, Unitedd states</span>
</td>
<td>
<span class="text-muted">Visual Designer</span><br/>
<span class="text-muted">Past : teacher</span>
</td>
<td>
<span class="text-muted">[email protected]</span><br/>
<span class="text-muted">999 - 444 - 555</span>
</td>
<td>
<span class="text-muted">15 Mar 1988</span><br/>
<span class="text-muted">10: 55 AM</span>
</td>
<td>
<select class="form-control category-select" id="exampleFormControlSelect1">
<option>Modulator</option>
<option>Admin</option>
<option>User</option>
<option>Subscriber</option>
</select>
</td>
<td>
<button type="button" class="btn btn-outline-info btn-circle btn-lg btn-circle"><i class="fa fa-key"></i> </button>
<button type="button" class="btn btn-outline-info btn-circle btn-lg btn-circle ml-2"><i class="fa fa-trash"></i> </button>
<button type="button" class="btn btn-outline-info btn-circle btn-lg btn-circle ml-2"><i class="fa fa-edit"></i> </button>
<button type="button" class="btn btn-outline-info btn-circle btn-lg btn-circle ml-2"><i class="fa fa-upload"></i> </button>
</td>
</tr>
<tr>
<td class="pl-4">2</td>
<td>
<h5 class="font-medium mb-0">Emma Smith</h5>
<span class="text-muted">Texas, Unitedd states</span>
</td>
<td>
<span class="text-muted">Visual Designer</span><br/>
<span class="text-muted">Past : teacher</span>
</td>
<td>
<span class="text-muted">[email protected]</span><br/>
<span class="text-muted">999 - 444 - 555</span>
</td>
<td>
<span class="text-muted">15 Mar 1855</span><br/>
<span class="text-muted">10: 00 AM</span>
</td>
<td>
<select class="form-control category-select" id="exampleFormControlSelect1">
<option>Modulator</option>
<option>Admin</option>
<option>User</option>
<option>Subscriber</option>
</select>
</td>
<td>
<button type="button" class="btn btn-outline-info btn-circle btn-lg btn-circle"><i class="fa fa-key"></i> </button>
<button type="button" class="btn btn-outline-info btn-circle btn-lg btn-circle ml-2"><i class="fa fa-trash"></i> </button>
<button type="button" class="btn btn-outline-info btn-circle btn-lg btn-circle ml-2"><i class="fa fa-edit"></i> </button>
<button type="button" class="btn btn-outline-info btn-circle btn-lg btn-circle ml-2"><i class="fa fa-upload"></i> </button>
</td>
</tr>
<tr>
<td class="pl-4">3</td>
<td>
<h5 class="font-medium mb-0">Olivia Johnson</h5>
<span class="text-muted">Texas, Unitedd states</span>
</td>
<td>
<span class="text-muted">Visual Designer</span><br/>
<span class="text-muted">Past : teacher</span>
</td>
<td>
<span class="text-muted">[email protected]</span><br/>
<span class="text-muted">999 - 444 - 555</span>
</td>
<td>
<span class="text-muted">17 Aug 1988</span><br/>
<span class="text-muted">12: 55 AM</span>
</td>
<td>
<select class="form-control category-select" id="exampleFormControlSelect1">
<option>Modulator</option>
<option>Admin</option>
<option>User</option>
<option>Subscriber</option>
</select>
</td>
<td>
<button type="button" class="btn btn-outline-info btn-circle btn-lg btn-circle"><i class="fa fa-key"></i> </button>
<button type="button" class="btn btn-outline-info btn-circle btn-lg btn-circle ml-2"><i class="fa fa-trash"></i> </button>
<button type="button" class="btn btn-outline-info btn-circle btn-lg btn-circle ml-2"><i class="fa fa-edit"></i> </button>
<button type="button" class="btn btn-outline-info btn-circle btn-lg btn-circle ml-2"><i class="fa fa-upload"></i> </button>
</td>
</tr>
<tr>
<td class="pl-4">4</td>
<td>
<h5 class="font-medium mb-0">Isabella Williams</h5>
<span class="text-muted">Texas, Unitedd states</span>
</td>
<td>
<span class="text-muted">Visual Designer</span><br/>
<span class="text-muted">Past : teacher</span>
</td>
<td>
<span class="text-muted">[email protected]</span><br/>
<span class="text-muted">999 - 444 - 555</span>
</td>
<td>
<span class="text-muted">26 Mar 1999</span><br/>
<span class="text-muted">10: 55 AM</span>
</td>
<td>
<select class="form-control category-select" id="exampleFormControlSelect1">
<option>Modulator</option>
<option>Admin</option>
<option>User</option>
<option>Subscriber</option>
</select>
</td>
<td>
<button type="button" class="btn btn-outline-info btn-circle btn-lg btn-circle"><i class="fa fa-key"></i> </button>
<button type="button" class="btn btn-outline-info btn-circle btn-lg btn-circle ml-2"><i class="fa fa-trash"></i> </button>
<button type="button" class="btn btn-outline-info btn-circle btn-lg btn-circle ml-2"><i class="fa fa-edit"></i> </button>
<button type="button" class="btn btn-outline-info btn-circle btn-lg btn-circle ml-2"><i class="fa fa-upload"></i> </button>
</td>
</tr>
<tr>
<td class="pl-4">5</td>
<td>
<h5 class="font-medium mb-0">Sophia Jones</h5>
<span class="text-muted">Texas, Unitedd states</span>
</td>
<td>
<span class="text-muted">Visual Designer</span><br/>
<span class="text-muted">Past : teacher</span>
</td>
<td>
<span class="text-muted">[email protected]</span><br/>
<span class="text-muted">999 - 444 - 555</span>
</td>
<td>
<span class="text-muted">16 Aug 2001</span><br/>
<span class="text-muted">10: 55 AM</span>
</td>
<td>
<select class="form-control category-select" id="exampleFormControlSelect1">
<option>Modulator</option>
<option>Admin</option>
<option>User</option>
<option>Subscriber</option>
</select>
</td>
<td>
<button type="button" class="btn btn-outline-info btn-circle btn-lg btn-circle"><i class="fa fa-key"></i> </button>
<button type="button" class="btn btn-outline-info btn-circle btn-lg btn-circle ml-2"><i class="fa fa-trash"></i> </button>
<button type="button" class="btn btn-outline-info btn-circle btn-lg btn-circle ml-2"><i class="fa fa-edit"></i> </button>
<button type="button" class="btn btn-outline-info btn-circle btn-lg btn-circle ml-2"><i class="fa fa-upload"></i> </button>
</td>
</tr>
<tr>
<td class="pl-4">6</td>
<td>
<h5 class="font-medium mb-0">Charlotte Brown</h5>
<span class="text-muted">Texas, Unitedd states</span>
</td>
<td>
<span class="text-muted">Visual Designer</span><br/>
<span class="text-muted">Past : teacher</span>
</td>
<td>
<span class="text-muted">[email protected]</span><br/>
<span class="text-muted">999 - 444 - 555</span>
</td>
<td>
<span class="text-muted">15 Mar 1988</span><br/>
<span class="text-muted">10: 55 AM</span>
</td>
<td>
<select class="form-control category-select" id="exampleFormControlSelect1">
<option>Modulator</option>
<option>Admin</option>
<option>User</option>
<option>Subscriber</option>
</select>
</td>
<td>
<button type="button" class="btn btn-outline-info btn-circle btn-lg btn-circle"><i class="fa fa-key"></i> </button>
<button type="button" class="btn btn-outline-info btn-circle btn-lg btn-circle ml-2"><i class="fa fa-trash"></i> </button>
<button type="button" class="btn btn-outline-info btn-circle btn-lg btn-circle ml-2"><i class="fa fa-edit"></i> </button>
<button type="button" class="btn btn-outline-info btn-circle btn-lg btn-circle ml-2"><i class="fa fa-upload"></i> </button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default App;4. Now we need to add below code into our my-awesome-project/src/App.css file :
body{
background: #edf1f5;
margin-top:20px;
}
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 0 solid transparent;
border-radius: 0;
}
.btn-circle.btn-lg, .btn-group-lg>.btn-circle.btn {
width: 50px;
height: 50px;
padding: 14px 15px;
font-size: 18px;
line-height: 23px;
}
.text-muted {
color: #8898aa!important;
}
[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
cursor: pointer;
}
.btn-circle {
border-radius: 100%;
width: 40px;
height: 40px;
padding: 10px;
}
.user-table tbody tr .category-select {
max-width: 150px;
border-radius: 20px;
}
