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-12 mb-3 mb-lg-5">
<div class="overflow-hidden card table-nowrap table-card">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="mb-0">New customers</h5>
<a href="#!" class="btn btn-light btn-sm">View All</a>
</div>
<div class="table-responsive">
<table class="table mb-0">
<thead class="small text-uppercase bg-body text-muted">
<tr>
<th>Name</th>
<th>Email</th>
<th>Country</th>
<th>Payment method</th>
<th>Created Date</th>
<th class="text-end">Action</th>
</tr>
</thead>
<tbody>
<tr class="align-middle">
<td>
<div class="d-flex align-items-center">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="avatar sm rounded-pill me-3 flex-shrink-0" alt="Customer"/>
<div>
<div class="h6 mb-0 lh-1">Mark Voldov</div>
</div>
</div>
</td>
<td>[email protected]</td>
<td> <span class="d-inline-block align-middle">Russia</span></td>
<td><span>****6231</span></td>
<td>21 Sep, 2021</td>
<td class="text-end">
<div class="drodown">
<a data-bs-toggle="dropdown" href="#/" class="btn p-1" aria-expanded="false">
<i class="fa fa-bars" aria-hidden="true"></i>
</a>
<div class="dropdown-menu dropdown-menu-end" style={{/**/}}>
<a href="#!" class="dropdown-item">View Details</a>
<a href="#!" class="dropdown-item">Delete user</a>
</div>
</div>
</td>
</tr>
<tr class="align-middle">
<td>
<div class="d-flex align-items-center">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="avatar sm rounded-pill me-3 flex-shrink-0" alt="Customer"/>
<div>
<div class="h6 mb-0 lh-1">Topias Kantola</div>
</div>
</div>
</td>
<td>[email protected]</td>
<td> <span class="d-inline-block align-middle">Brazil</span></td>
<td><span>****@mail.com</span></td>
<td>21 Sep, 2021</td>
<td class="text-end">
<div class="drodown">
<a data-bs-toggle="dropdown" href="#/" class="btn p-1">
<i class="fa fa-bars" aria-hidden="true"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a href="#!" class="dropdown-item">View Details</a>
<a href="#!" class="dropdown-item">Delete user</a>
</div>
</div>
</td>
</tr>
<tr class="align-middle">
<td>
<div class="d-flex align-items-center">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="avatar sm rounded-pill me-3 flex-shrink-0" alt="Customer"/>
<div>
<div class="h6 mb-0 lh-1">Anaiah Whitten</div>
</div>
</div>
</td>
<td>[email protected]</td>
<td>
<span class="d-inline-block align-middle">Poland</span>
</td>
<td><span>****0014</span></td>
<td>12 June, 2021</td>
<td class="text-end">
<div class="drodown">
<a data-bs-toggle="dropdown" href="#/" class="btn p-1">
<i class="fa fa-bars" aria-hidden="true"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a href="#!" class="dropdown-item">View Details</a>
<a href="#!" class="dropdown-item">Delete user</a>
</div>
</div>
</td>
</tr>
<tr class="align-middle">
<td>
<div class="d-flex align-items-center">
<img src="https://bootdey.com/img/Content/avatar/avatar4.png" class="avatar sm rounded-pill me-3 flex-shrink-0" alt="Customer"/>
<div>
<div class="h6 mb-0 lh-1">Wyatt Morris</div>
</div>
</div>
</td>
<td>[email protected]</td>
<td>
<span class="d-inline-block align-middle">Kenya</span>
</td>
<td><span>****8715</span></td>
<td>04 June, 2021</td>
<td class="text-end">
<div class="drodown">
<a data-bs-toggle="dropdown" href="#/" class="btn p-1">
<i class="fa fa-bars" aria-hidden="true"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a href="#!" class="dropdown-item">View Details</a>
<a href="#!" class="dropdown-item">Delete user</a>
</div>
</div>
</td>
</tr>
<tr class="align-middle">
<td>
<div class="d-flex align-items-center">
<img src="https://bootdey.com/img/Content/avatar/avatar5.png" class="avatar sm rounded-pill me-3 flex-shrink-0" alt="Customer"/>
<div>
<div class="h6 mb-0 lh-1">Eliana Stout</div>
</div>
</div>
</td>
<td>[email protected]</td>
<td>
<span class="d-inline-block align-middle">Usa</span>
</td>
<td><span>****1010</span></td>
<td>01 June, 2021</td>
<td class="text-end">
<div class="drodown">
<a data-bs-toggle="dropdown" href="#/" class="btn p-1">
<i class="fa fa-bars" aria-hidden="true"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a href="#!" class="dropdown-item">View Details</a>
<a href="#!" class="dropdown-item">Delete user</a>
</div>
</div>
</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{margin-top:20px;
background:#eee;
}
.card {
box-shadow: 0 20px 27px 0 rgb(0 0 0 / 5%);
}
.avatar.sm {
width: 2.25rem;
height: 2.25rem;
font-size: .818125rem;
}
.table-nowrap .table td, .table-nowrap .table th {
white-space: nowrap;
}
.table>:not(caption)>*>* {
padding: 0.75rem 1.25rem;
border-bottom-width: 1px;
}
table th {
font-weight: 600;
background-color: #eeecfd !important;
}
