Charts
Simple yet flexible Javascript charting for designers & developers.
Usage
In order to use this charts on your page you will need to include the following script in the “Optional JS” area from the page’s footer:
<script src="assets/js/highcharts.min.js"></script>
<script src="assets/js/highcharts-more.min.js"></script>
<script src="assets/js/solid-gauge.min.js"></script>
<script src="assets/js/charts-dark.js"></script>
Now you can start to copy chart codes demonstrated below and include it in your page.
Examples
Stacked columns
<div class="card rounded-24 shadow-40">
<div class="card-body">
<div class="d-flex align-items-center mb-4">
<h5 class="font-weight-regular">Stacked columns</h5>
<div class="dropdown text-end mb-md-2 ms-auto">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle text-primary" id="Action3"><small>This week</small></a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action3" style="">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
</div>
</div>
</div>
<div id="FabrxStackedChartThree"></div>
</div>
</div>Single bar
<div class="card rounded-24 shadow-40">
<div class="card-body">
<div class="d-flex align-items-center mb-4">
<h5 class="font-weight-regular">Single bar</h5>
<div class="dropdown text-end mb-md-2 ms-auto">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle text-primary" id="Action4"><small>This week</small></a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action3" style="">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
</div>
</div>
</div>
<div id="FabrxStackedChartTwo"></div>
</div>
</div>Stacked bar
<div class="card rounded-24 shadow-40">
<div class="card-body">
<div class="d-flex align-items-center mb-4">
<h5 class="font-weight-regular">Stacked bar</h5>
<div class="dropdown text-end mb-md-2 ms-auto">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle text-primary" id="Action5"><small>This week</small></a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action3" style="">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
</div>
</div>
</div>
<div id="FabrxStackedChartOne"></div>
</div>
</div>Multiple bar
<div class="card rounded-24 shadow-40">
<div class="card-body">
<div class="d-flex align-items-center mb-4">
<h5 class="font-weight-regular">Multiple bar</h5>
<div class="dropdown text-end mb-md-2 ms-auto">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle text-primary" id="Action6"><small>This week</small></a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action3" style="">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
</div>
</div>
</div>
<div id="FabrxMultipleColumnsChartOne"></div>
</div>
</div>Single line
<div class="card rounded-24 shadow-40">
<div class="card-body">
<div class="d-flex align-items-center mb-4">
<h5 class="font-weight-regular">Single line</h5>
<div class="dropdown text-end mb-md-2 ms-auto">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle text-primary" id="Action7"><small>This week</small></a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action3" style="">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
</div>
</div>
</div>
<div id="FabrxPointsChartOne"></div>
</div>
</div>Double line
<div class="card rounded-24 shadow-40">
<div class="card-body">
<div class="d-flex align-items-center mb-4">
<h5 class="font-weight-regular">Double line</h5>
<div class="dropdown text-end mb-md-2 ms-auto">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle text-primary" id="Action8"><small>This week</small></a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action3" style="">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
</div>
</div>
</div>
<div id="FabrxPointsChartTwo"></div>
</div>
</div>Curved line
<div class="card rounded-24 shadow-40">
<div class="card-body">
<div class="d-flex align-items-center mb-4">
<h5 class="font-weight-regular">Curved line</h5>
<div class="dropdown text-end mb-md-2 ms-auto">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle text-primary" id="Action9"><small>This week</small></a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action3" style="">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
</div>
</div>
</div>
<div id="FabrxSplineChartOne"></div>
</div>
</div>Dot Plots Chart
<div class="card rounded-24 shadow-40">
<div class="card-body">
<div class="d-flex align-items-center mb-4">
<h5 class="font-weight-regular">Dot Plots Chart</h5>
<div class="dropdown text-end mb-md-2 ms-auto">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle text-primary" id="Action10"><small>This week</small></a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action3" style="">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
</div>
</div>
</div>
<div id="Fabrx3dBubbleChartOne"></div>
</div>
</div>Stacked area
<div class="card rounded-24 shadow-40">
<div class="card-body">
<div class="d-flex align-items-center mb-4">
<h5 class="font-weight-regular">Stacked area</h5>
<div class="dropdown text-end mb-md-2 ms-auto">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle text-primary" id="Action11"><small>This week</small></a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action3" style="">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
</div>
</div>
</div>
<div id="FabrxAreaChartTwo"></div>
</div>
</div>Area chart
<div class="card rounded-24 shadow-40">
<div class="card-body">
<div class="d-flex align-items-center mb-4">
<h5 class="font-weight-regular">Area chart</h5>
<div class="dropdown text-end mb-md-2 ms-auto">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle text-primary" id="Action12"><small>This week</small></a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action3" style="">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
</div>
</div>
</div>
<div id="FabrxAreaChartOne"></div>
</div>
</div>Pie Chart
<div class="card rounded-24 shadow-40">
<div class="card-body">
<div class="d-flex align-items-center mb-4">
<h5 class="font-weight-regular">Pie Chart</h5>
<div class="dropdown text-end mb-md-2 ms-auto">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle text-primary" id="Action13"><small>This week</small></a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action3" style="">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
</div>
</div>
</div>
<div id="FabrxPieChartOne"></div>
</div>
</div>Pie Chart
<div class="card rounded-24 shadow-40">
<div class="card-body">
<div class="d-flex align-items-center mb-4">
<h5 class="font-weight-regular">Pie Chart</h5>
<div class="dropdown text-end mb-md-2 ms-auto">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle text-primary" id="Action14"><small>This week</small></a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action3" style="">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
</div>
</div>
</div>
<div id="FabrxPieChartTwo"></div>
</div>
</div>Pie Chart
<div class="card rounded-24 shadow-40">
<div class="card-body">
<div class="d-flex align-items-center mb-4">
<h5 class="font-weight-regular">Pie Chart</h5>
<div class="dropdown text-end mb-md-2 ms-auto">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle text-primary" id="Action14"><small>This week</small></a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action3" style="">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
</div>
</div>
</div>
<div id="FabrxPieChartTwo"></div>
</div>
</div>Tables
Tables are designed to be opt-in due to their widespread use across third-party widgets like calendars and date pickers. Read the BootstrapVue examples to learn more about tables.
Revenue Table
<section class="fabrx-section fabrx-tables-light bg-white py-4">
<!-- Fabrx Header, Fabrx Table Header, Px 3, Px Lg 5 -->
<header class="fabrx-header fabrx-table-header px-3 px-lg-5">
<nav class="navbar navbar-expand-md has-header-inner px-0 px-md-3">
<a class="navbar-brand h3 font-weight-bold" href="#0">Revenue</a>
<div class="fabrx-header-links ms-auto">
<a href="#0">
<svg id="Icon_Filter" data-name="Icon/Filter" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M10,14a1,1,0,0,1,0-2h6a1,1,0,0,1,0,2ZM5,8A1,1,0,1,1,5,6H20a1,1,0,1,1,0,2ZM1,2A1,1,0,0,1,1,0H23a1,1,0,1,1,0,2Z" transform="translate(0 5)" fill="#3f3b3b"></path>
</svg>
</a>
<a href="#0" class="ms-2 ms-md-4 btn btn-primary">
<svg id="Icon_Add" data-name="Icon/Add" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M10,22V13.5H2.005a2,2,0,1,1,0-4H10v-7.5a2,2,0,1,1,4,0V9.5H22a2,2,0,1,1,0,4H14V22a2,2,0,1,1-4,0Z" fill="#ffffff"></path>
</svg>
<span class="ms-3">Add</span>
</a>
</div>
</nav>
</header>
<!-- Table Responsive Md -->
<div class="table-responsive-md">
<table class="table table-lg fabrx-table has-table">
<thead>
<tr>
<th>
<div class="d-flex align-items-center ps-lg-5 ps-2">
<div class="form-check form-check-rounded form-check-sm">
<input type="checkbox" class="form-check-input" id="selectAll" onchange="checkAll(this)">
</div>
<span class="ps-3">Name</span>
</div>
</th>
<th>
<span>Date</span>
<a href="#0" class="ms-1">
<svg class="vertical-none" data-name="Icon/Arrows/Caret/Down" xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M12,0,24-18H0Z" transform="translate(0 21)" fill="#959393"></path>
</svg>
</a>
</th>
<th>
<span>Date</span>
<a href="#0" class="ms-1">
<svg class="vertical-none" data-name="Icon/Arrows/Caret/Down" xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M12,0,24-18H0Z" transform="translate(0 21)" fill="#959393"></path>
</svg>
</a>
</th>
<th>
<span>Date</span>
<a href="#0" class="ms-1">
<svg class="vertical-none" data-name="Icon/Arrows/Caret/Down" xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M12,0,24-18H0Z" transform="translate(0 21)" fill="#959393"></path>
</svg>
</a>
</th>
<th>
<span>Date</span>
<a href="#0" class="ms-1">
<svg class="vertical-none" data-name="Icon/Arrows/Caret/Down" xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M12,0,24-18H0Z" transform="translate(0 21)" fill="#959393"></path>
</svg>
</a>
</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="d-flex align-items-center ps-lg-5 ps-2">
<div class="form-check form-check-rounded form-check-sm">
<input type="checkbox" class="form-check-input" id="TableCheckbox" name="check">
</div>
<div class="ps-lg-3 ps-1">
<strong class="d-block text-dark font-size-14 font-weight-medium">Marilyn Medina</strong>
<small class="text-secondary">Managing Director</small>
</div>
</div>
</td>
<td>25/8/2020</td>
<td><span class="fabrx-status status-no-border online me-2"></span> Online</td>
<td>Ibadan</td>
<td>$1,338.76</td>
<td>
<div class="dropdown">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="Action10">
<svg data-name="Icon/Options Horizontal 3 Dots" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M20.825,4.33A2.165,2.165,0,1,1,22.99,2.165,2.167,2.167,0,0,1,20.825,4.33Zm-9.33,0A2.165,2.165,0,1,1,13.66,2.165,2.167,2.167,0,0,1,11.495,4.33Zm-9.329,0A2.165,2.165,0,1,1,4.33,2.165,2.167,2.167,0,0,1,2.165,4.33Z" transform="translate(1 10)" fill="#959393"/>
</svg>
</a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action10">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center ps-lg-5 ps-2">
<div class="form-check form-check-rounded form-check-sm">
<input type="checkbox" class="form-check-input" id="TableCheckbox2" name="check">
</div>
<div class="ps-lg-3 ps-1">
<strong class="d-block text-dark font-size-14 font-weight-medium">Marilyn Medina</strong>
<small class="text-secondary">Managing Director</small>
</div>
</div>
</td>
<td>25/8/2020</td>
<td><span class="fabrx-status status-no-border online me-2"></span> Online</td>
<td>Philadelphia</td>
<td>$1,338.76</td>
<td>
<div class="dropdown">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="Action11">
<svg data-name="Icon/Options Horizontal 3 Dots" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M20.825,4.33A2.165,2.165,0,1,1,22.99,2.165,2.167,2.167,0,0,1,20.825,4.33Zm-9.33,0A2.165,2.165,0,1,1,13.66,2.165,2.167,2.167,0,0,1,11.495,4.33Zm-9.329,0A2.165,2.165,0,1,1,4.33,2.165,2.167,2.167,0,0,1,2.165,4.33Z" transform="translate(1 10)" fill="#959393"/>
</svg>
</a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action11">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center ps-lg-5 ps-2">
<div class="form-check form-check-rounded form-check-sm">
<input type="checkbox" class="form-check-input" id="TableCheckbox3" name="check">
</div>
<div class="ps-lg-3 ps-1">
<strong class="d-block text-dark font-size-14 font-weight-medium">Marilyn Medina</strong>
<small class="text-secondary">Managing Director</small>
</div>
</div>
</td>
<td>25/8/2020</td>
<td><span class="fabrx-status status-no-border away me-2"></span> Away</td>
<td>Indianapolis</td>
<td>$1,338.76</td>
<td>
<div class="dropdown">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="Action12">
<svg data-name="Icon/Options Horizontal 3 Dots" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M20.825,4.33A2.165,2.165,0,1,1,22.99,2.165,2.167,2.167,0,0,1,20.825,4.33Zm-9.33,0A2.165,2.165,0,1,1,13.66,2.165,2.167,2.167,0,0,1,11.495,4.33Zm-9.329,0A2.165,2.165,0,1,1,4.33,2.165,2.167,2.167,0,0,1,2.165,4.33Z" transform="translate(1 10)" fill="#959393"/>
</svg>
</a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action12">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center ps-lg-5 ps-2">
<div class="form-check form-check-rounded form-check-sm">
<input type="checkbox" class="form-check-input" id="TableCheckbox4" name="check">
</div>
<div class="ps-lg-3 ps-1">
<strong class="d-block text-dark font-size-14 font-weight-medium">Marilyn Medina</strong>
<small class="text-secondary">Managing Director</small>
</div>
</div>
</td>
<td>25/8/2020</td>
<td><span class="fabrx-status status-no-border me-2"></span> Offline</td>
<td>Albuquerque</td>
<td>$1,338.76</td>
<td>
<div class="dropdown">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="Action13">
<svg data-name="Icon/Options Horizontal 3 Dots" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M20.825,4.33A2.165,2.165,0,1,1,22.99,2.165,2.167,2.167,0,0,1,20.825,4.33Zm-9.33,0A2.165,2.165,0,1,1,13.66,2.165,2.167,2.167,0,0,1,11.495,4.33Zm-9.329,0A2.165,2.165,0,1,1,4.33,2.165,2.167,2.167,0,0,1,2.165,4.33Z" transform="translate(1 10)" fill="#959393"/>
</svg>
</a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action13">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center ps-lg-5 ps-2">
<div class="form-check form-check-rounded form-check-sm">
<input type="checkbox" class="form-check-input" id="TableCheckbox5" name="check">
</div>
<div class="ps-lg-3 ps-1">
<strong class="d-block text-dark font-size-14 font-weight-medium">Marilyn Medina</strong>
<small class="text-secondary">Managing Director</small>
</div>
</div>
</td>
<td>25/8/2020</td>
<td><span class="fabrx-status status-no-border dnd me-2"></span> Busy</td>
<td>Naples</td>
<td>$1,338.76</td>
<td>
<div class="dropdown">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="Action14">
<svg data-name="Icon/Options Horizontal 3 Dots" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M20.825,4.33A2.165,2.165,0,1,1,22.99,2.165,2.167,2.167,0,0,1,20.825,4.33Zm-9.33,0A2.165,2.165,0,1,1,13.66,2.165,2.167,2.167,0,0,1,11.495,4.33Zm-9.329,0A2.165,2.165,0,1,1,4.33,2.165,2.167,2.167,0,0,1,2.165,4.33Z" transform="translate(1 10)" fill="#959393"/>
</svg>
</a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action14">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center ps-lg-5 ps-2">
<div class="form-check form-check-rounded form-check-sm">
<input type="checkbox" class="form-check-input" id="TableCheckbox6" name="check">
</div>
<div class="ps-lg-3 ps-1">
<strong class="d-block text-dark font-size-14 font-weight-medium">Marilyn Medina</strong>
<small class="text-secondary">Managing Director</small>
</div>
</div>
</td>
<td>25/8/2020</td>
<td><span class="fabrx-status status-no-border me-2"></span> Offline</td>
<td>Lyon</td>
<td>$1,338.76</td>
<td>
<div class="dropdown">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="Action15">
<svg data-name="Icon/Options Horizontal 3 Dots" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M20.825,4.33A2.165,2.165,0,1,1,22.99,2.165,2.167,2.167,0,0,1,20.825,4.33Zm-9.33,0A2.165,2.165,0,1,1,13.66,2.165,2.167,2.167,0,0,1,11.495,4.33Zm-9.329,0A2.165,2.165,0,1,1,4.33,2.165,2.167,2.167,0,0,1,2.165,4.33Z" transform="translate(1 10)" fill="#959393"/>
</svg>
</a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action15">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center ps-lg-5 ps-2">
<div class="form-check form-check-rounded form-check-sm">
<input type="checkbox" class="form-check-input" id="TableCheckbox7" name="check">
</div>
<div class="ps-lg-3 ps-1">
<strong class="d-block text-dark font-size-14 font-weight-medium">Marilyn Medina</strong>
<small class="text-secondary">Managing Director</small>
</div>
</div>
</td>
<td>25/8/2020</td>
<td><span class="fabrx-status status-no-border me-2"></span> Offline</td>
<td>San Antonio</td>
<td>$1,338.76</td>
<td>
<div class="dropdown">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="Action16">
<svg data-name="Icon/Options Horizontal 3 Dots" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M20.825,4.33A2.165,2.165,0,1,1,22.99,2.165,2.167,2.167,0,0,1,20.825,4.33Zm-9.33,0A2.165,2.165,0,1,1,13.66,2.165,2.167,2.167,0,0,1,11.495,4.33Zm-9.329,0A2.165,2.165,0,1,1,4.33,2.165,2.167,2.167,0,0,1,2.165,4.33Z" transform="translate(1 10)" fill="#959393"/>
</svg>
</a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action16">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center ps-lg-5 ps-2">
<div class="form-check form-check-rounded form-check-sm">
<input type="checkbox" class="form-check-input" id="TableCheckbox8" name="check">
</div>
<div class="ps-lg-3 ps-1">
<strong class="d-block text-dark font-size-14 font-weight-medium">Marilyn Medina</strong>
<small class="text-secondary">Managing Director</small>
</div>
</div>
</td>
<td>25/8/2020</td>
<td><span class="fabrx-status status-no-border me-2"></span> Offline</td>
<td>Newport</td>
<td>$1,338.76</td>
<td>
<div class="dropdown">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="Action17">
<svg data-name="Icon/Options Horizontal 3 Dots" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M20.825,4.33A2.165,2.165,0,1,1,22.99,2.165,2.167,2.167,0,0,1,20.825,4.33Zm-9.33,0A2.165,2.165,0,1,1,13.66,2.165,2.167,2.167,0,0,1,11.495,4.33Zm-9.329,0A2.165,2.165,0,1,1,4.33,2.165,2.167,2.167,0,0,1,2.165,4.33Z" transform="translate(1 10)" fill="#959393"/>
</svg>
</a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action17">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Fabrx Table Footer, My 3, My Md 3, Mx 0, Mx Md 3, Px 3, Px Lg 5 -->
<div class="fabrx-tables-footer my-3 my-md-5 mx-0 mx-md-3 px-3 px-lg-5">
<nav aria-label="Page navigation" class="d-flex align-items-center justify-content-end flex-wrap">
<small class="mb-3 text-secondary">Showing 21 to 30 of 332</small>
<ul class="pagination ms-3">
<li class="page-item"><a class="page-link primary-page-item" href="#0">First</a></li>
<li class="page-item active"><a class="page-link" href="#0">1</a></li>
<li class="page-item"><a class="page-link" href="#0">2</a></li>
<li class="page-item"><a class="page-link" href="#0">3</a></li>
<li class="page-item"><a class="page-link" href="#0">4</a></li>
<li class="page-item"><a class="page-link primary-page-item" href="#0">Last</a></li>
</ul>
</nav>
</div>
</section>Top Freelancers Table
|
Name
|
Date | Date | Date | Date |
|---|---|---|---|---|
Teng Jiang
Managing Director
|
85% |
5.4
|
$85 / Hour | Button |
Kip Collison
Managing Director
|
85% |
5.4
|
$85 / Hour | Button |
Maria Trofimova
Managing Director
|
85% |
5.4
|
$85 / Hour | Button |
Ezequiel Dengra
Managing Director
|
85% |
5.4
|
$85 / Hour | Button |
Uruewa Himona
Managing Director
|
85% |
5.4
|
$85 / Hour | Button |
Vương Mộng Nhi
Managing Director
|
85% |
5.4
|
$85 / Hour | Button |
Nayah Tantoh
Managing Director
|
85% |
5.4
|
$85 / Hour | Button |
Florieke Krebber
Managing Director
|
85% |
5.4
|
$85 / Hour | Button |
<section class="fabrx-section fabrx-tables-light bg-white py-4">
<!-- Fabrx Header, Px 3, Px Lg 5 -->
<header class="fabrx-header px-3 px-lg-5">
<nav class="navbar navbar-expand-sm has-header-inner px-0 px-md-3">
<a class="navbar-brand h3 font-weight-bold" href="#0">Top Freelancers</a>
<button class="navbar-toggler pe-0" type="button" data-bs-toggle="collapse" data-bs-target="#menu-2" aria-controls="menu-2" aria-expanded="false" aria-label="Toggle navigation">
<svg data-name="Icon/Hamburger" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M1.033,14a1.2,1.2,0,0,1-.409-.069.947.947,0,0,1-.337-.207,1.2,1.2,0,0,1-.216-.333,1.046,1.046,0,0,1-.072-.4A1.072,1.072,0,0,1,.072,12.6a.892.892,0,0,1,.216-.321.947.947,0,0,1,.337-.207A1.2,1.2,0,0,1,1.033,12H22.967a1.206,1.206,0,0,1,.409.069.935.935,0,0,1,.336.207.9.9,0,0,1,.217.321,1.072,1.072,0,0,1,.072.391,1.046,1.046,0,0,1-.072.4,1.206,1.206,0,0,1-.217.333.935.935,0,0,1-.336.207,1.206,1.206,0,0,1-.409.069Zm0-6a1.2,1.2,0,0,1-.409-.069.934.934,0,0,1-.337-.207,1.189,1.189,0,0,1-.216-.333A1.046,1.046,0,0,1,0,6.989,1.068,1.068,0,0,1,.072,6.6a.9.9,0,0,1,.216-.322.947.947,0,0,1,.337-.207A1.2,1.2,0,0,1,1.033,6H22.967a1.206,1.206,0,0,1,.409.068.935.935,0,0,1,.336.207.9.9,0,0,1,.217.322A1.068,1.068,0,0,1,24,6.989a1.046,1.046,0,0,1-.072.4,1.193,1.193,0,0,1-.217.333.923.923,0,0,1-.336.207A1.206,1.206,0,0,1,22.967,8Zm0-6a1.2,1.2,0,0,1-.409-.068.947.947,0,0,1-.337-.207,1.193,1.193,0,0,1-.216-.334A1.039,1.039,0,0,1,0,.988,1.068,1.068,0,0,1,.072.6.892.892,0,0,1,.288.276.934.934,0,0,1,.625.069,1.2,1.2,0,0,1,1.033,0H22.967a1.206,1.206,0,0,1,.409.069.923.923,0,0,1,.336.207A.9.9,0,0,1,23.928.6,1.068,1.068,0,0,1,24,.988a1.039,1.039,0,0,1-.072.4,1.2,1.2,0,0,1-.217.334.935.935,0,0,1-.336.207A1.206,1.206,0,0,1,22.967,2Z" transform="translate(0 5)" fill="#3f3b3b"></path>
</svg>
</button>
<div class="collapse navbar-collapse" id="menu-2">
<div class="fabrx-header-links ms-auto dropdown pt-3 pt-md-0">
<a href="#" class="fabrx-noti-dot" role="button" id="table-dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<svg data-name="Icon/Notification" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M11.25,24a3.4,3.4,0,0,1-3.3-2.625H0v-1.5a3,3,0,0,0,3-3V10.5A8.15,8.15,0,0,1,4.706,5.484,8.47,8.47,0,0,1,9,2.55v-.3a2.25,2.25,0,1,1,4.5,0v.3a8.471,8.471,0,0,1,4.294,2.934A8.15,8.15,0,0,1,19.5,10.5v6.375a3,3,0,0,0,3,3v1.5H14.55A3.4,3.4,0,0,1,11.25,24ZM9.525,21.375a1.885,1.885,0,0,0,3.451,0ZM11.25,3.75A6.758,6.758,0,0,0,4.5,10.5v6.375a4.465,4.465,0,0,1-1.163,3H19.163a4.466,4.466,0,0,1-1.163-3V10.5A6.758,6.758,0,0,0,11.25,3.75Zm0-2.25a.751.751,0,0,0-.75.75h.75a4.983,4.983,0,0,1,.75.038V2.25A.751.751,0,0,0,11.25,1.5Z" transform="translate(1)" fill="#3f3b3b"></path>
</svg>
</a>
<div class="dropdown-menu" aria-labelledby="table-dropdown">
<a href="#0" class="dropdown-item"><span class="dropdown-text">Busan</span></a>
<a href="#0" class="dropdown-item active"><span class="dropdown-text">Leeds</span></a>
<a href="#0" class="dropdown-item"><span class="dropdown-text">Fairbanks</span></a>
<a href="#0" class="dropdown-item"><span class="dropdown-text">Salt Lake City</span></a>
<a href="#0" class="dropdown-item"><span class="dropdown-text">Guatemala City</span></a>
<a href="#0" class="dropdown-item"><span class="dropdown-text">Lyon</span></a>
</div>
<a href="#0" class="ms-3 ms-lg-5">
<svg data-name="Icon/Gift" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M21,22.8H3.023a1.43,1.43,0,0,1-1.066-.45,1.494,1.494,0,0,1-.433-1.066V11.4H0V6.873A1.479,1.479,0,0,1,.434,5.8,1.447,1.447,0,0,1,1.5,5.356H4.1a3.687,3.687,0,0,1-.808-1.149A3.532,3.532,0,0,1,3,2.749,3.163,3.163,0,0,1,3.632.877,2.55,2.55,0,0,1,5.836,0,4.226,4.226,0,0,1,7.817.5,8.987,8.987,0,0,1,9.574,1.706a11.9,11.9,0,0,1,1.442,1.5,15.619,15.619,0,0,1,1.031,1.434,16.963,16.963,0,0,1,1.02-1.434,11.624,11.624,0,0,1,1.418-1.5A8.8,8.8,0,0,1,16.219.5,4.154,4.154,0,0,1,18.187,0a2.55,2.55,0,0,1,2.2.877,3.157,3.157,0,0,1,.633,1.873,3.533,3.533,0,0,1-.292,1.457,3.6,3.6,0,0,1-.786,1.126H22.5a1.427,1.427,0,0,1,1.066.451A1.491,1.491,0,0,1,24,6.85V11.4H22.5v9.883a1.494,1.494,0,0,1-.434,1.066A1.427,1.427,0,0,1,21,22.8ZM12.75,11.4v9.883H21V11.4Zm-9.727,0v9.883H11.25V11.4ZM12.75,6.85V9.883H22.5V6.85ZM1.5,6.85V9.883h9.75V6.85ZM18.187,1.516a3.833,3.833,0,0,0-2.706,1.316,17.6,17.6,0,0,0-2.1,2.5h2.531a4.867,4.867,0,0,0,2.461-.663,2.111,2.111,0,0,0,1.148-1.92,1.238,1.238,0,0,0-.317-.924A1.425,1.425,0,0,0,18.187,1.516Zm-12.352,0a1.462,1.462,0,0,0-1.019.3,1.2,1.2,0,0,0-.317.912A2.128,2.128,0,0,0,5.683,4.657a4.989,4.989,0,0,0,2.5.675h2.531a16.577,16.577,0,0,0-2.133-2.5A3.947,3.947,0,0,0,5.836,1.516Z" transform="translate(0 1)" fill="#3f3b3b"></path>
</svg>
</a>
<a href="#0" class="ms-3 ms-lg-5">
<svg xmlns="http://www.w3.org/2000/svg" width="24.001" height="24" viewBox="0 0 24.001 24">
<g data-name="Icon/Settings" transform="translate(0.001)">
<path data-name="Icon Color" d="M13.631,24H10.179a1.675,1.675,0,0,1-1.65-1.421L8.2,20.337a9.332,9.332,0,0,1-1.952-1.093l-2.3.886a1.663,1.663,0,0,1-.6.112,1.68,1.68,0,0,1-1.429-.8L.239,16.668a1.655,1.655,0,0,1,.426-2.186l1.873-1.4A8.517,8.517,0,0,1,2.462,12a8.091,8.091,0,0,1,.075-1.062L.665,9.535A1.655,1.655,0,0,1,.239,7.349L1.916,4.577a1.672,1.672,0,0,1,2.029-.692l2.3.886A9.742,9.742,0,0,1,8.2,3.681l.332-2.26A1.675,1.675,0,0,1,10.183,0h3.451a1.675,1.675,0,0,1,1.65,1.421l.329,2.242a9.327,9.327,0,0,1,1.951,1.092l2.3-.886a1.67,1.67,0,0,1,2.029.692l1.677,2.771a1.653,1.653,0,0,1-.426,2.186l-1.873,1.4A8.539,8.539,0,0,1,21.351,12a8.1,8.1,0,0,1-.075,1.063l1.872,1.4a1.664,1.664,0,0,1,.664,1.372l.188.109,0,.007-.184-.112-.127-.078-1.268-.777-.019.031,1.284.758-.324-.2.327.189.127.078v.011l.18.106,0,.007-.176-.11-.13-.081.13.081a1.661,1.661,0,0,1-.238.794L21.9,19.422a1.67,1.67,0,0,1-2.029.692l-2.3-.887a9.752,9.752,0,0,1-1.951,1.092l-.333,2.26A1.674,1.674,0,0,1,13.631,24ZM6.537,17.156h0l.745.554a7.447,7.447,0,0,0,1.7.952l.893.357.077.526.061.418.321,2.19h3.132l.462-3.141.881-.362a7.847,7.847,0,0,0,1.717-.958l.746-.554.477.184.392.15,2.245.864,1.51-2.5-2.613-1.957.139-.968A6.523,6.523,0,0,0,19.5,12a6.808,6.808,0,0,0-.074-.941l-.131-.962.435-.326.347-.26L21.9,8.142l-1.51-2.5-3.113,1.2-.746-.554a7.486,7.486,0,0,0-1.7-.953l-.893-.357-.077-.525L13.8,4.036l-.321-2.19H10.343L9.88,4.988,9,5.349a7.914,7.914,0,0,0-1.717.959l-.745.554-.478-.184-.391-.151L3.423,5.664l-1.51,2.5,2.613,1.957-.139.968A6.529,6.529,0,0,0,4.316,12a6.947,6.947,0,0,0,.073.942l.131.962-.435.326-.347.26L1.913,15.857l1.51,2.5,3.113-1.2Zm5.37-1.279A3.877,3.877,0,1,1,15.838,12,3.909,3.909,0,0,1,11.907,15.877Zm0-5.908A2.031,2.031,0,1,0,13.986,12,2.057,2.057,0,0,0,11.907,9.969Z" fill="#3f3b3b"></path>
</g>
</svg>
</a>
</div>
</div>
</nav>
</header>
<!-- Table Responsive Md -->
<div class="table-responsive-md">
<table class="table table-lg fabrx-table">
<thead>
<tr>
<th>
<div class="d-flex align-items-center ps-lg-5 ps-2">
<span>Name</span>
</div>
</th>
<th>
<span>Date</span>
<a href="#0" class="ms-1">
<svg class="vertical-none" data-name="Icon/Arrows/Caret/Down" xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M12,0,24-18H0Z" transform="translate(0 21)" fill="#959393"></path>
</svg>
</a>
</th>
<th>
<span>Date</span>
<a href="#0" class="ms-1">
<svg class="vertical-none" data-name="Icon/Arrows/Caret/Down" xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M12,0,24-18H0Z" transform="translate(0 21)" fill="#959393"></path>
</svg>
</a>
</th>
<th>
<span>Date</span>
<a href="#0" class="ms-1">
<svg class="vertical-none" data-name="Icon/Arrows/Caret/Down" xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M12,0,24-18H0Z" transform="translate(0 21)" fill="#959393"></path>
</svg>
</a>
</th>
<th>
<span>Date</span>
<a href="#0" class="ms-1">
<svg class="vertical-none" data-name="Icon/Arrows/Caret/Down" xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M12,0,24-18H0Z" transform="translate(0 21)" fill="#959393"></path>
</svg>
</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="d-flex align-items-center ps-lg-5 ps-2">
<a href="#0" class="fabrx-avatar fabrx-status online md"><img src="assets/images/avatars/avatar-17.png" alt="Avatar"></a>
<div class="ps-3">
<strong class="d-block text-dark font-size-14 font-weight-medium">Teng Jiang</strong>
<small class="text-secondary">Managing Director</small>
</div>
</div>
</td>
<td>
<svg data-name="Icon/Trending" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M16.8,0l2.754,2.754L13.7,8.6,8.9,3.8,0,12.7l1.7,1.7L8.9,7.2,13.7,12l7.548-7.554L24,7.2V0Z" transform="translate(0 5)" fill="#ffffff"></path>
</svg>
<span class="ps-1">85%</span></td>
<td>
<div class="fabrx-table-star">
<svg class="vertical-none" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24">
<g data-name="Icon/Star Fill" transform="translate(0)">
<path data-name="Icon Color" d="M17.434,23.738,12.109,20.25a.169.169,0,0,0-.187,0L6.6,23.738A2.066,2.066,0,0,1,5.659,24a1.6,1.6,0,0,1-1.313-.638,1.526,1.526,0,0,1-.3-1.425l1.5-6.563c0-.075,0-.149-.076-.187L.559,10.762a1.786,1.786,0,0,1-.488-1.8A1.655,1.655,0,0,1,1.534,7.837L7.871,7.35c.075,0,.112-.038.15-.113l2.363-6.151A1.743,1.743,0,0,1,12,0a1.656,1.656,0,0,1,1.575,1.087l2.363,6.151c.038.075.076.113.15.113l6.338.487a1.667,1.667,0,0,1,.975,2.925l-4.912,4.425a.286.286,0,0,0-.076.187l1.538,6.563a1.762,1.762,0,0,1-.3,1.425A1.649,1.649,0,0,1,18.334,24,1.8,1.8,0,0,1,17.434,23.738Z" fill="#ffc107"></path>
</g>
</svg>
<span class="text-warning">5.4</span>
</div>
</td>
<td>$85 / Hour</td>
<td>
<a href="#0" class="btn btn-primary btn-sm">Button</a>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center ps-lg-5 ps-2">
<a href="#0" class="fabrx-avatar fabrx-status online md"><img src="assets/images/avatars/avatar-18.png" alt="Avatar"></a>
<div class="ps-3">
<strong class="d-block text-dark font-size-14 font-weight-medium">Kip Collison</strong>
<small class="text-secondary">Managing Director</small>
</div>
</div>
</td>
<td>
<svg data-name="Icon/Trending" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M16.8,0l2.754,2.754L13.7,8.6,8.9,3.8,0,12.7l1.7,1.7L8.9,7.2,13.7,12l7.548-7.554L24,7.2V0Z" transform="translate(0 5)" fill="#ffffff"></path>
</svg>
<span class="ps-1">85%</span></td>
<td>
<div class="fabrx-table-star">
<svg class="vertical-none" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24">
<g data-name="Icon/Star Fill" transform="translate(0)">
<path data-name="Icon Color" d="M17.434,23.738,12.109,20.25a.169.169,0,0,0-.187,0L6.6,23.738A2.066,2.066,0,0,1,5.659,24a1.6,1.6,0,0,1-1.313-.638,1.526,1.526,0,0,1-.3-1.425l1.5-6.563c0-.075,0-.149-.076-.187L.559,10.762a1.786,1.786,0,0,1-.488-1.8A1.655,1.655,0,0,1,1.534,7.837L7.871,7.35c.075,0,.112-.038.15-.113l2.363-6.151A1.743,1.743,0,0,1,12,0a1.656,1.656,0,0,1,1.575,1.087l2.363,6.151c.038.075.076.113.15.113l6.338.487a1.667,1.667,0,0,1,.975,2.925l-4.912,4.425a.286.286,0,0,0-.076.187l1.538,6.563a1.762,1.762,0,0,1-.3,1.425A1.649,1.649,0,0,1,18.334,24,1.8,1.8,0,0,1,17.434,23.738Z" fill="#ffc107"></path>
</g>
</svg>
<span class="text-warning">5.4</span>
</div>
</td>
<td>$85 / Hour</td>
<td>
<a href="#0" class="btn btn-primary btn-sm">Button</a>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center ps-lg-5 ps-2">
<a href="#0" class="fabrx-avatar fabrx-status dnd md"><img src="assets/images/avatars/avatar-19.png" alt="Avatar"></a>
<div class="ps-3">
<strong class="d-block text-dark font-size-14 font-weight-medium">Maria Trofimova</strong>
<small class="text-secondary">Managing Director</small>
</div>
</div>
</td>
<td>
<svg data-name="Icon/Trending" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M16.8,0l2.754,2.754L13.7,8.6,8.9,3.8,0,12.7l1.7,1.7L8.9,7.2,13.7,12l7.548-7.554L24,7.2V0Z" transform="translate(0 5)" fill="#ffffff"></path>
</svg>
<span class="ps-1">85%</span></td>
<td>
<div class="fabrx-table-star">
<svg class="vertical-none" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24">
<g data-name="Icon/Star Fill" transform="translate(0)">
<path data-name="Icon Color" d="M17.434,23.738,12.109,20.25a.169.169,0,0,0-.187,0L6.6,23.738A2.066,2.066,0,0,1,5.659,24a1.6,1.6,0,0,1-1.313-.638,1.526,1.526,0,0,1-.3-1.425l1.5-6.563c0-.075,0-.149-.076-.187L.559,10.762a1.786,1.786,0,0,1-.488-1.8A1.655,1.655,0,0,1,1.534,7.837L7.871,7.35c.075,0,.112-.038.15-.113l2.363-6.151A1.743,1.743,0,0,1,12,0a1.656,1.656,0,0,1,1.575,1.087l2.363,6.151c.038.075.076.113.15.113l6.338.487a1.667,1.667,0,0,1,.975,2.925l-4.912,4.425a.286.286,0,0,0-.076.187l1.538,6.563a1.762,1.762,0,0,1-.3,1.425A1.649,1.649,0,0,1,18.334,24,1.8,1.8,0,0,1,17.434,23.738Z" fill="#ffc107"></path>
</g>
</svg>
<span class="text-warning">5.4</span>
</div>
</td>
<td>$85 / Hour</td>
<td>
<a href="#0" class="btn btn-primary btn-sm">Button</a>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center ps-lg-5 ps-2">
<a href="#0" class="fabrx-avatar fabrx-status dnd md"><img src="assets/images/avatars/avatar-20.png" alt="Avatar"></a>
<div class="ps-3">
<strong class="d-block text-dark font-size-14 font-weight-medium">Ezequiel Dengra</strong>
<small class="text-secondary">Managing Director</small>
</div>
</div>
</td>
<td>
<svg data-name="Icon/Trending" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M16.8,0l2.754,2.754L13.7,8.6,8.9,3.8,0,12.7l1.7,1.7L8.9,7.2,13.7,12l7.548-7.554L24,7.2V0Z" transform="translate(0 5)" fill="#ffffff"></path>
</svg>
<span class="ps-1">85%</span></td>
<td>
<div class="fabrx-table-star">
<svg class="vertical-none" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24">
<g data-name="Icon/Star Fill" transform="translate(0)">
<path data-name="Icon Color" d="M17.434,23.738,12.109,20.25a.169.169,0,0,0-.187,0L6.6,23.738A2.066,2.066,0,0,1,5.659,24a1.6,1.6,0,0,1-1.313-.638,1.526,1.526,0,0,1-.3-1.425l1.5-6.563c0-.075,0-.149-.076-.187L.559,10.762a1.786,1.786,0,0,1-.488-1.8A1.655,1.655,0,0,1,1.534,7.837L7.871,7.35c.075,0,.112-.038.15-.113l2.363-6.151A1.743,1.743,0,0,1,12,0a1.656,1.656,0,0,1,1.575,1.087l2.363,6.151c.038.075.076.113.15.113l6.338.487a1.667,1.667,0,0,1,.975,2.925l-4.912,4.425a.286.286,0,0,0-.076.187l1.538,6.563a1.762,1.762,0,0,1-.3,1.425A1.649,1.649,0,0,1,18.334,24,1.8,1.8,0,0,1,17.434,23.738Z" fill="#ffc107"></path>
</g>
</svg>
<span class="text-warning">5.4</span>
</div>
</td>
<td>$85 / Hour</td>
<td>
<a href="#0" class="btn btn-primary btn-sm">Button</a>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center ps-lg-5 ps-2">
<a href="#0" class="fabrx-avatar fabrx-status dnd md"><img src="assets/images/avatars/avatar-21.png" alt="Avatar"></a>
<div class="ps-3">
<strong class="d-block text-dark font-size-14 font-weight-medium">Uruewa Himona</strong>
<small class="text-secondary">Managing Director</small>
</div>
</div>
</td>
<td>
<svg data-name="Icon/Trending" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M16.8,0l2.754,2.754L13.7,8.6,8.9,3.8,0,12.7l1.7,1.7L8.9,7.2,13.7,12l7.548-7.554L24,7.2V0Z" transform="translate(0 5)" fill="#ffffff"></path>
</svg>
<span class="ps-1">85%</span></td>
<td>
<div class="fabrx-table-star">
<svg class="vertical-none" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24">
<g data-name="Icon/Star Fill" transform="translate(0)">
<path data-name="Icon Color" d="M17.434,23.738,12.109,20.25a.169.169,0,0,0-.187,0L6.6,23.738A2.066,2.066,0,0,1,5.659,24a1.6,1.6,0,0,1-1.313-.638,1.526,1.526,0,0,1-.3-1.425l1.5-6.563c0-.075,0-.149-.076-.187L.559,10.762a1.786,1.786,0,0,1-.488-1.8A1.655,1.655,0,0,1,1.534,7.837L7.871,7.35c.075,0,.112-.038.15-.113l2.363-6.151A1.743,1.743,0,0,1,12,0a1.656,1.656,0,0,1,1.575,1.087l2.363,6.151c.038.075.076.113.15.113l6.338.487a1.667,1.667,0,0,1,.975,2.925l-4.912,4.425a.286.286,0,0,0-.076.187l1.538,6.563a1.762,1.762,0,0,1-.3,1.425A1.649,1.649,0,0,1,18.334,24,1.8,1.8,0,0,1,17.434,23.738Z" fill="#ffc107"></path>
</g>
</svg>
<span class="text-warning">5.4</span>
</div>
</td>
<td>$85 / Hour</td>
<td>
<a href="#0" class="btn btn-primary btn-sm">Button</a>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center ps-lg-5 ps-2">
<a href="#0" class="fabrx-avatar fabrx-status away md"><img src="assets/images/avatars/avatar-22.png" alt="Avatar"></a>
<div class="ps-3">
<strong class="d-block text-dark font-size-14 font-weight-medium">Vương Mộng Nhi</strong>
<small class="text-secondary">Managing Director</small>
</div>
</div>
</td>
<td>
<svg data-name="Icon/Trending" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M16.8,0l2.754,2.754L13.7,8.6,8.9,3.8,0,12.7l1.7,1.7L8.9,7.2,13.7,12l7.548-7.554L24,7.2V0Z" transform="translate(0 5)" fill="#ffffff"></path>
</svg>
<span class="ps-1">85%</span></td>
<td>
<div class="fabrx-table-star">
<svg class="vertical-none" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24">
<g data-name="Icon/Star Fill" transform="translate(0)">
<path data-name="Icon Color" d="M17.434,23.738,12.109,20.25a.169.169,0,0,0-.187,0L6.6,23.738A2.066,2.066,0,0,1,5.659,24a1.6,1.6,0,0,1-1.313-.638,1.526,1.526,0,0,1-.3-1.425l1.5-6.563c0-.075,0-.149-.076-.187L.559,10.762a1.786,1.786,0,0,1-.488-1.8A1.655,1.655,0,0,1,1.534,7.837L7.871,7.35c.075,0,.112-.038.15-.113l2.363-6.151A1.743,1.743,0,0,1,12,0a1.656,1.656,0,0,1,1.575,1.087l2.363,6.151c.038.075.076.113.15.113l6.338.487a1.667,1.667,0,0,1,.975,2.925l-4.912,4.425a.286.286,0,0,0-.076.187l1.538,6.563a1.762,1.762,0,0,1-.3,1.425A1.649,1.649,0,0,1,18.334,24,1.8,1.8,0,0,1,17.434,23.738Z" fill="#ffc107"></path>
</g>
</svg>
<span class="text-warning">5.4</span>
</div>
</td>
<td>$85 / Hour</td>
<td>
<a href="#0" class="btn btn-primary btn-sm">Button</a>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center ps-lg-5 ps-2">
<a href="#0" class="fabrx-avatar fabrx-status away md"><img src="assets/images/avatars/avatar-23.png" alt="Avatar"></a>
<div class="ps-3">
<strong class="d-block text-dark font-size-14 font-weight-medium">Nayah Tantoh</strong>
<small class="text-secondary">Managing Director</small>
</div>
</div>
</td>
<td>
<svg data-name="Icon/Trending" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M16.8,0l2.754,2.754L13.7,8.6,8.9,3.8,0,12.7l1.7,1.7L8.9,7.2,13.7,12l7.548-7.554L24,7.2V0Z" transform="translate(0 5)" fill="#ffffff"></path>
</svg>
<span class="ps-1">85%</span></td>
<td>
<div class="fabrx-table-star">
<svg class="vertical-none" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24">
<g data-name="Icon/Star Fill" transform="translate(0)">
<path data-name="Icon Color" d="M17.434,23.738,12.109,20.25a.169.169,0,0,0-.187,0L6.6,23.738A2.066,2.066,0,0,1,5.659,24a1.6,1.6,0,0,1-1.313-.638,1.526,1.526,0,0,1-.3-1.425l1.5-6.563c0-.075,0-.149-.076-.187L.559,10.762a1.786,1.786,0,0,1-.488-1.8A1.655,1.655,0,0,1,1.534,7.837L7.871,7.35c.075,0,.112-.038.15-.113l2.363-6.151A1.743,1.743,0,0,1,12,0a1.656,1.656,0,0,1,1.575,1.087l2.363,6.151c.038.075.076.113.15.113l6.338.487a1.667,1.667,0,0,1,.975,2.925l-4.912,4.425a.286.286,0,0,0-.076.187l1.538,6.563a1.762,1.762,0,0,1-.3,1.425A1.649,1.649,0,0,1,18.334,24,1.8,1.8,0,0,1,17.434,23.738Z" fill="#ffc107"></path>
</g>
</svg>
<span class="text-warning">5.4</span>
</div>
</td>
<td>$85 / Hour</td>
<td>
<a href="#0" class="btn btn-primary btn-sm">Button</a>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center ps-lg-5 ps-2">
<a href="#0" class="fabrx-avatar fabrx-status md"><img src="assets/images/avatars/avatar-24.png" alt="Avatar"></a>
<div class="ps-3">
<strong class="d-block text-dark font-size-14 font-weight-medium">Florieke Krebber</strong>
<small class="text-secondary">Managing Director</small>
</div>
</div>
</td>
<td>
<svg data-name="Icon/Trending" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M16.8,0l2.754,2.754L13.7,8.6,8.9,3.8,0,12.7l1.7,1.7L8.9,7.2,13.7,12l7.548-7.554L24,7.2V0Z" transform="translate(0 5)" fill="#ffffff"></path>
</svg>
<span class="ps-1">85%</span></td>
<td>
<div class="fabrx-table-star">
<svg class="vertical-none" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24">
<g data-name="Icon/Star Fill" transform="translate(0)">
<path data-name="Icon Color" d="M17.434,23.738,12.109,20.25a.169.169,0,0,0-.187,0L6.6,23.738A2.066,2.066,0,0,1,5.659,24a1.6,1.6,0,0,1-1.313-.638,1.526,1.526,0,0,1-.3-1.425l1.5-6.563c0-.075,0-.149-.076-.187L.559,10.762a1.786,1.786,0,0,1-.488-1.8A1.655,1.655,0,0,1,1.534,7.837L7.871,7.35c.075,0,.112-.038.15-.113l2.363-6.151A1.743,1.743,0,0,1,12,0a1.656,1.656,0,0,1,1.575,1.087l2.363,6.151c.038.075.076.113.15.113l6.338.487a1.667,1.667,0,0,1,.975,2.925l-4.912,4.425a.286.286,0,0,0-.076.187l1.538,6.563a1.762,1.762,0,0,1-.3,1.425A1.649,1.649,0,0,1,18.334,24,1.8,1.8,0,0,1,17.434,23.738Z" fill="#ffc107"></path>
</g>
</svg>
<span class="text-warning">5.4</span>
</div>
</td>
<td>$85 / Hour</td>
<td>
<a href="#0" class="btn btn-primary btn-sm">Button</a>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Fabrx Table Footer, My 3, My Md 3, Mx 0, Mx Md 3, Px 3, Px Lg 5 -->
<div class="fabrx-tables-footer my-3 my-md-5 mx-0 mx-md-3 px-3 px-lg-5">
<nav aria-label="Page navigation" class="d-flex align-items-center justify-content-end flex-wrap">
<small class="mb-3 text-secondary">Showing 21 to 30 of 332</small>
<ul class="pagination ms-3">
<li class="page-item"><a class="page-link primary-page-item" href="#0">First</a></li>
<li class="page-item active"><a class="page-link" href="#0">1</a></li>
<li class="page-item"><a class="page-link" href="#0">2</a></li>
<li class="page-item"><a class="page-link" href="#0">3</a></li>
<li class="page-item"><a class="page-link" href="#0">4</a></li>
<li class="page-item"><a class="page-link primary-page-item" href="#0">Last</a></li>
</ul>
</nav>
</div>
</section>Compact Data Table
<section class="fabrx-section fabrx-tables-light bg-white py-4">
<!-- Fabrx Header, Px 3, Px Lg 5 -->
<header class="fabrx-header px-3 px-lg-5">
<nav class="navbar navbar-expand-md has-header-inner px-0 px-md-3">
<a class="navbar-brand h3 font-weight-bold" href="#0">Compact Data</a>
<button class="navbar-toggler pe-0" type="button" data-bs-toggle="collapse" data-bs-target="#menu-3" aria-controls="menu-3" aria-expanded="false" aria-label="Toggle navigation">
<svg data-name="Icon/Hamburger" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M1.033,14a1.2,1.2,0,0,1-.409-.069.947.947,0,0,1-.337-.207,1.2,1.2,0,0,1-.216-.333,1.046,1.046,0,0,1-.072-.4A1.072,1.072,0,0,1,.072,12.6a.892.892,0,0,1,.216-.321.947.947,0,0,1,.337-.207A1.2,1.2,0,0,1,1.033,12H22.967a1.206,1.206,0,0,1,.409.069.935.935,0,0,1,.336.207.9.9,0,0,1,.217.321,1.072,1.072,0,0,1,.072.391,1.046,1.046,0,0,1-.072.4,1.206,1.206,0,0,1-.217.333.935.935,0,0,1-.336.207,1.206,1.206,0,0,1-.409.069Zm0-6a1.2,1.2,0,0,1-.409-.069.934.934,0,0,1-.337-.207,1.189,1.189,0,0,1-.216-.333A1.046,1.046,0,0,1,0,6.989,1.068,1.068,0,0,1,.072,6.6a.9.9,0,0,1,.216-.322.947.947,0,0,1,.337-.207A1.2,1.2,0,0,1,1.033,6H22.967a1.206,1.206,0,0,1,.409.068.935.935,0,0,1,.336.207.9.9,0,0,1,.217.322A1.068,1.068,0,0,1,24,6.989a1.046,1.046,0,0,1-.072.4,1.193,1.193,0,0,1-.217.333.923.923,0,0,1-.336.207A1.206,1.206,0,0,1,22.967,8Zm0-6a1.2,1.2,0,0,1-.409-.068.947.947,0,0,1-.337-.207,1.193,1.193,0,0,1-.216-.334A1.039,1.039,0,0,1,0,.988,1.068,1.068,0,0,1,.072.6.892.892,0,0,1,.288.276.934.934,0,0,1,.625.069,1.2,1.2,0,0,1,1.033,0H22.967a1.206,1.206,0,0,1,.409.069.923.923,0,0,1,.336.207A.9.9,0,0,1,23.928.6,1.068,1.068,0,0,1,24,.988a1.039,1.039,0,0,1-.072.4,1.2,1.2,0,0,1-.217.334.935.935,0,0,1-.336.207A1.206,1.206,0,0,1,22.967,2Z" transform="translate(0 5)" fill="#3f3b3b"></path>
</svg>
</button>
<div class="collapse navbar-collapse" id="menu-3">
<div class="fabrx-header-links ms-auto pt-3 pt-md-0">
<a href="#0" class="btn btn-outline-primary">
<span class="me-3 me-md-4">Date Range</span>
<svg data-name="Icon/Calendar" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M1.5,24A1.5,1.5,0,0,1,0,22.5V3.375a1.5,1.5,0,0,1,1.5-1.5H6V0H7.5V1.875h9V0H18V1.875h4.5a1.5,1.5,0,0,1,1.5,1.5V22.5A1.5,1.5,0,0,1,22.5,24Zm0-1.5h21V9H1.5Zm21-15V3.375H18V5.25H16.5V3.375h-9V5.25H6V3.375H1.5V7.5Zm-6,11.625v-1.5h3.75v1.5Zm-6.375,0v-1.5h3.75v1.5Zm-6.375,0v-1.5H7.5v1.5ZM16.5,13.5V12h3.75v1.5Zm-6.375,0V12h3.75v1.5Zm-6.375,0V12H7.5v1.5Z" fill="#3f3b3b"></path>
</svg>
</a>
<a href="#0" class="ms-1 ms-sm-4 ms-lg-4 btn btn-primary">Filter</a>
</div>
</div>
</nav>
</header>
<!-- Table Responsive Md -->
<div class="table-responsive-md">
<table class="table table-striped fabrx-table">
<thead>
<tr>
<th>
<div class="d-flex align-items-center ps-lg-5 ps-2">
<span>Name</span>
</div>
</th>
<th>
<span>Date</span>
<a href="#0" class="ms-1">
<svg class="vertical-none" data-name="Icon/Arrows/Caret/Down" xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M12,0,24-18H0Z" transform="translate(0 21)" fill="#959393"></path>
</svg>
</a>
</th>
<th>
<span>Date</span>
<a href="#0" class="ms-1">
<svg class="vertical-none" data-name="Icon/Arrows/Caret/Down" xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M12,0,24-18H0Z" transform="translate(0 21)" fill="#959393"></path>
</svg>
</a>
</th>
<th>
<span>Date</span>
<a href="#0" class="ms-1">
<svg class="vertical-none" data-name="Icon/Arrows/Caret/Down" xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M12,0,24-18H0Z" transform="translate(0 21)" fill="#959393"></path>
</svg>
</a>
</th>
<th>
<span>Date</span>
<a href="#0" class="ms-1">
<svg class="vertical-none" data-name="Icon/Arrows/Caret/Down" xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M12,0,24-18H0Z" transform="translate(0 21)" fill="#959393"></path>
</svg>
</a>
</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="font-size-14 text-dark ps-lg-5 ps-2">Lubosek Hnilo</span>
</td>
<td>25/8/2020</td>
<td>Online</td>
<td>Kampala</td>
<td>$911.35</td>
<td>
<div class="dropdown">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="Action21">
<svg data-name="Icon/Options Horizontal 3 Dots" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M20.825,4.33A2.165,2.165,0,1,1,22.99,2.165,2.167,2.167,0,0,1,20.825,4.33Zm-9.33,0A2.165,2.165,0,1,1,13.66,2.165,2.167,2.167,0,0,1,11.495,4.33Zm-9.329,0A2.165,2.165,0,1,1,4.33,2.165,2.167,2.167,0,0,1,2.165,4.33Z" transform="translate(1 10)" fill="#959393"></path>
</svg>
</a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action21">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<span class="font-size-14 text-dark ps-lg-5 ps-2">Nout Golstein</span>
</td>
<td>25/8/2020</td>
<td>Online</td>
<td>Santiago</td>
<td>$911.35</td>
<td>
<div class="dropdown">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="Action22">
<svg data-name="Icon/Options Horizontal 3 Dots" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M20.825,4.33A2.165,2.165,0,1,1,22.99,2.165,2.167,2.167,0,0,1,20.825,4.33Zm-9.33,0A2.165,2.165,0,1,1,13.66,2.165,2.167,2.167,0,0,1,11.495,4.33Zm-9.329,0A2.165,2.165,0,1,1,4.33,2.165,2.167,2.167,0,0,1,2.165,4.33Z" transform="translate(1 10)" fill="#959393"></path>
</svg>
</a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action22">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<span class="font-size-14 text-dark ps-lg-5 ps-2">Martina Brito</span>
</td>
<td>25/8/2020</td>
<td>Online</td>
<td>Panama City</td>
<td>$911.35</td>
<td>
<div class="dropdown">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="Action23">
<svg data-name="Icon/Options Horizontal 3 Dots" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M20.825,4.33A2.165,2.165,0,1,1,22.99,2.165,2.167,2.167,0,0,1,20.825,4.33Zm-9.33,0A2.165,2.165,0,1,1,13.66,2.165,2.167,2.167,0,0,1,11.495,4.33Zm-9.329,0A2.165,2.165,0,1,1,4.33,2.165,2.167,2.167,0,0,1,2.165,4.33Z" transform="translate(1 10)" fill="#959393"></path>
</svg>
</a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action23">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<span class="font-size-14 text-dark ps-lg-5 ps-2">Jesus Bañuelos</span>
</td>
<td>25/8/2020</td>
<td>Online</td>
<td>Haifa</td>
<td>$911.35</td>
<td>
<div class="dropdown">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="Action24">
<svg data-name="Icon/Options Horizontal 3 Dots" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M20.825,4.33A2.165,2.165,0,1,1,22.99,2.165,2.167,2.167,0,0,1,20.825,4.33Zm-9.33,0A2.165,2.165,0,1,1,13.66,2.165,2.167,2.167,0,0,1,11.495,4.33Zm-9.329,0A2.165,2.165,0,1,1,4.33,2.165,2.167,2.167,0,0,1,2.165,4.33Z" transform="translate(1 10)" fill="#959393"></path>
</svg>
</a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action24">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<span class="font-size-14 text-dark ps-lg-5 ps-2">Chikanso Chima</span>
</td>
<td>25/8/2020</td>
<td>Online</td>
<td>Bogotá</td>
<td>$911.35</td>
<td>
<div class="dropdown">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="Action24">
<svg data-name="Icon/Options Horizontal 3 Dots" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M20.825,4.33A2.165,2.165,0,1,1,22.99,2.165,2.167,2.167,0,0,1,20.825,4.33Zm-9.33,0A2.165,2.165,0,1,1,13.66,2.165,2.167,2.167,0,0,1,11.495,4.33Zm-9.329,0A2.165,2.165,0,1,1,4.33,2.165,2.167,2.167,0,0,1,2.165,4.33Z" transform="translate(1 10)" fill="#959393"></path>
</svg>
</a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action24">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<span class="font-size-14 text-dark ps-lg-5 ps-2">Eva Lee</span>
</td>
<td>25/8/2020</td>
<td>Online</td>
<td>Gothenburg</td>
<td>$911.35</td>
<td>
<div class="dropdown">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="Action25">
<svg data-name="Icon/Options Horizontal 3 Dots" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M20.825,4.33A2.165,2.165,0,1,1,22.99,2.165,2.167,2.167,0,0,1,20.825,4.33Zm-9.33,0A2.165,2.165,0,1,1,13.66,2.165,2.167,2.167,0,0,1,11.495,4.33Zm-9.329,0A2.165,2.165,0,1,1,4.33,2.165,2.167,2.167,0,0,1,2.165,4.33Z" transform="translate(1 10)" fill="#959393"></path>
</svg>
</a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action25">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<span class="font-size-14 text-dark ps-lg-5 ps-2">Ainara Vergara</span>
</td>
<td>25/8/2020</td>
<td>Online</td>
<td>Abidjan</td>
<td>$911.35</td>
<td>
<div class="dropdown">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="Action26">
<svg data-name="Icon/Options Horizontal 3 Dots" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M20.825,4.33A2.165,2.165,0,1,1,22.99,2.165,2.167,2.167,0,0,1,20.825,4.33Zm-9.33,0A2.165,2.165,0,1,1,13.66,2.165,2.167,2.167,0,0,1,11.495,4.33Zm-9.329,0A2.165,2.165,0,1,1,4.33,2.165,2.167,2.167,0,0,1,2.165,4.33Z" transform="translate(1 10)" fill="#959393"></path>
</svg>
</a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action26">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<span class="font-size-14 text-dark ps-lg-5 ps-2">Tiontay Carroll</span>
</td>
<td>25/8/2020</td>
<td>Online</td>
<td>Turin</td>
<td>$911.35</td>
<td>
<div class="dropdown">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="Action27">
<svg data-name="Icon/Options Horizontal 3 Dots" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M20.825,4.33A2.165,2.165,0,1,1,22.99,2.165,2.167,2.167,0,0,1,20.825,4.33Zm-9.33,0A2.165,2.165,0,1,1,13.66,2.165,2.167,2.167,0,0,1,11.495,4.33Zm-9.329,0A2.165,2.165,0,1,1,4.33,2.165,2.167,2.167,0,0,1,2.165,4.33Z" transform="translate(1 10)" fill="#959393"></path>
</svg>
</a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action27">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<span class="font-size-14 text-dark ps-lg-5 ps-2">Marysa Labrone</span>
</td>
<td>25/8/2020</td>
<td>Online</td>
<td>Paris</td>
<td>$911.35</td>
<td>
<div class="dropdown">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="Action26">
<svg data-name="Icon/Options Horizontal 3 Dots" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M20.825,4.33A2.165,2.165,0,1,1,22.99,2.165,2.167,2.167,0,0,1,20.825,4.33Zm-9.33,0A2.165,2.165,0,1,1,13.66,2.165,2.167,2.167,0,0,1,11.495,4.33Zm-9.329,0A2.165,2.165,0,1,1,4.33,2.165,2.167,2.167,0,0,1,2.165,4.33Z" transform="translate(1 10)" fill="#959393"></path>
</svg>
</a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action26">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<span class="font-size-14 text-dark ps-lg-5 ps-2">Margje Jutten</span>
</td>
<td>25/8/2020</td>
<td>Online</td>
<td>Naples</td>
<td>$911.35</td>
<td>
<div class="dropdown">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="Action27">
<svg data-name="Icon/Options Horizontal 3 Dots" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M20.825,4.33A2.165,2.165,0,1,1,22.99,2.165,2.167,2.167,0,0,1,20.825,4.33Zm-9.33,0A2.165,2.165,0,1,1,13.66,2.165,2.167,2.167,0,0,1,11.495,4.33Zm-9.329,0A2.165,2.165,0,1,1,4.33,2.165,2.167,2.167,0,0,1,2.165,4.33Z" transform="translate(1 10)" fill="#959393"></path>
</svg>
</a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action27">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<span class="font-size-14 text-dark ps-lg-5 ps-2">Dina Glenn</span>
</td>
<td>25/8/2020</td>
<td>Online</td>
<td>Dayton</td>
<td>$911.35</td>
<td>
<div class="dropdown">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="Action28">
<svg data-name="Icon/Options Horizontal 3 Dots" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M20.825,4.33A2.165,2.165,0,1,1,22.99,2.165,2.167,2.167,0,0,1,20.825,4.33Zm-9.33,0A2.165,2.165,0,1,1,13.66,2.165,2.167,2.167,0,0,1,11.495,4.33Zm-9.329,0A2.165,2.165,0,1,1,4.33,2.165,2.167,2.167,0,0,1,2.165,4.33Z" transform="translate(1 10)" fill="#959393"></path>
</svg>
</a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action28">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<span class="font-size-14 text-dark ps-lg-5 ps-2">Andries Grootoonk</span>
</td>
<td>25/8/2020</td>
<td>Online</td>
<td>Astana</td>
<td>$911.35</td>
<td>
<div class="dropdown">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="Action29">
<svg data-name="Icon/Options Horizontal 3 Dots" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M20.825,4.33A2.165,2.165,0,1,1,22.99,2.165,2.167,2.167,0,0,1,20.825,4.33Zm-9.33,0A2.165,2.165,0,1,1,13.66,2.165,2.167,2.167,0,0,1,11.495,4.33Zm-9.329,0A2.165,2.165,0,1,1,4.33,2.165,2.167,2.167,0,0,1,2.165,4.33Z" transform="translate(1 10)" fill="#959393"></path>
</svg>
</a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action29">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<span class="font-size-14 text-dark ps-lg-5 ps-2">Tokunaga Yae</span>
</td>
<td>25/8/2020</td>
<td>Online</td>
<td>Zurich</td>
<td>$911.35</td>
<td>
<div class="dropdown">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="Action30">
<svg data-name="Icon/Options Horizontal 3 Dots" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M20.825,4.33A2.165,2.165,0,1,1,22.99,2.165,2.167,2.167,0,0,1,20.825,4.33Zm-9.33,0A2.165,2.165,0,1,1,13.66,2.165,2.167,2.167,0,0,1,11.495,4.33Zm-9.329,0A2.165,2.165,0,1,1,4.33,2.165,2.167,2.167,0,0,1,2.165,4.33Z" transform="translate(1 10)" fill="#959393"></path>
</svg>
</a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action30">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<span class="font-size-14 text-dark ps-lg-5 ps-2">Nitithorn Prinya</span>
</td>
<td>25/8/2020</td>
<td>Online</td>
<td>Sacramento</td>
<td>$911.35</td>
<td>
<div class="dropdown">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="Action31">
<svg data-name="Icon/Options Horizontal 3 Dots" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M20.825,4.33A2.165,2.165,0,1,1,22.99,2.165,2.167,2.167,0,0,1,20.825,4.33Zm-9.33,0A2.165,2.165,0,1,1,13.66,2.165,2.167,2.167,0,0,1,11.495,4.33Zm-9.329,0A2.165,2.165,0,1,1,4.33,2.165,2.167,2.167,0,0,1,2.165,4.33Z" transform="translate(1 10)" fill="#959393"></path>
</svg>
</a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action31">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<span class="font-size-14 text-dark ps-lg-5 ps-2">Malin Quist</span>
</td>
<td>25/8/2020</td>
<td>Online</td>
<td>Managua</td>
<td>$911.35</td>
<td>
<div class="dropdown">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="Action32">
<svg data-name="Icon/Options Horizontal 3 Dots" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M20.825,4.33A2.165,2.165,0,1,1,22.99,2.165,2.167,2.167,0,0,1,20.825,4.33Zm-9.33,0A2.165,2.165,0,1,1,13.66,2.165,2.167,2.167,0,0,1,11.495,4.33Zm-9.329,0A2.165,2.165,0,1,1,4.33,2.165,2.167,2.167,0,0,1,2.165,4.33Z" transform="translate(1 10)" fill="#959393"></path>
</svg>
</a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action32">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<span class="font-size-14 text-dark ps-lg-5 ps-2">Dashonte Clarke</span>
</td>
<td>25/8/2020</td>
<td>Online</td>
<td>Cardiff</td>
<td>$911.35</td>
<td>
<div class="dropdown">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="Action33">
<svg data-name="Icon/Options Horizontal 3 Dots" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M20.825,4.33A2.165,2.165,0,1,1,22.99,2.165,2.167,2.167,0,0,1,20.825,4.33Zm-9.33,0A2.165,2.165,0,1,1,13.66,2.165,2.167,2.167,0,0,1,11.495,4.33Zm-9.329,0A2.165,2.165,0,1,1,4.33,2.165,2.167,2.167,0,0,1,2.165,4.33Z" transform="translate(1 10)" fill="#959393"></path>
</svg>
</a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action33">
<a class="dropdown-item" href="#0">Action</a>
<a class="dropdown-item" href="#0">Another action</a>
<a class="dropdown-item" href="#0">Something else here</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Fabrx Table Footer, My 3, My Md 3, Mx 3, Px 3, Px Lg 5 -->
<div class="fabrx-tables-footer my-3 my-md-5 mx-3 px-3 px-lg-5">
<div class="d-flex align-items-center justify-content-end flex-wrap">
<div class="fabrix-custom-pagination my-2">
<label class="me-2 mb-0">Rows</label>
<select class="custom-select custom-select-sm">
<option selected="">10</option>
<option value="1">11</option>
<option value="2">12</option>
<option value="3">13</option>
</select>
<label class="mx-2 mb-0">Page</label>
<input type="text" value="1" class="form-control form-control-sm">
<small class="ms-2 text-nowrap">of 366</small>
</div>
<nav aria-label="Page navigation" class="pagination-default my-2 ms-4">
<ul class="pagination mb-0">
<li class="page-item">
<a class="page-link" href="#0">
<svg data-name="Icon/Arrows/Caret/Back" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M-12,0-24,18H0Z" transform="translate(3) rotate(-90)" fill="#3f3b3b"></path>
</svg>
</a>
</li>
<li class="page-item">
<a class="page-link" href="#0">
<svg data-name="Icon/Arrows/Caret/Forward" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24">
<path data-name="Icon Color" d="M12,0,24,18H0Z" transform="translate(21) rotate(90)" fill="#3f3b3b"></path>
</svg>
</a>
</li>
</ul>
</nav>
</div>
</div>
</section>