Datatables
A highly flexible examples, build upon the foundations of progressive enhancement, that adds all of these advanced features to any HTML table.
Datatables #1
|
Task
|
Project
|
Priority
|
Due data
|
Status
|
|---|---|---|---|---|
| Home page redesign | Spotify | Highest | 25 Jul | In progress |
| Logo branding | Dropbox | Medium | 12 Aug | In progress |
| Website redesign | High | 15 Aug | Completed | |
| Home page redesign | FrontApp | Medium | 01 Aug | Completed |
| SEO optimization | Slack | Lowest | 02 Aug | On hold |
| Branding | Spotify | High | 05 Sep | In progress |
| Logo redesign | Htmlstream | High | 15 Sep | Completed |
| Website redesign | GitHub | Low | 16 Sep | On hold |
HTML:
<!-- Transaction Table -->
<div class="table-responsive-md u-datatable">
<table class="js-datatable table table-borderless u-datatable__striped u-datatable__content mb-5"
data-dt-info="#datatableInfo"
data-dt-search="#datatableSearch"
data-dt-entries="#datatableEntries"
data-dt-page-length="12"
data-dt-is-responsive="false"
data-dt-is-show-paging="true"
data-dt-pagination="datatablePagination"
data-dt-pagination-classes="pagination mb-0"
data-dt-pagination-items-classes="page-item"
data-dt-pagination-links-classes="page-link"
data-dt-pagination-next-classes="page-item"
data-dt-pagination-next-link-classes="page-link"
data-dt-pagination-next-link-markup='<span aria-hidden="true">»</span>'
data-dt-pagination-prev-classes="page-item"
data-dt-pagination-prev-link-classes="page-link"
data-dt-pagination-prev-link-markup='<span aria-hidden="true">«</span>'>
<thead>
<tr class="text-uppercase font-size-14">
<th scope="col" class="font-weight-medium">
<div class="d-flex justify-content-between align-items-center">
Task
<div class="ml-2">
<span class="fa fa-angle-up u-datatable__thead-icon"></span>
<span class="fa fa-angle-down u-datatable__thead-icon"></span>
</div>
</div>
</th>
<th scope="col" class="font-weight-medium">
<div class="d-flex justify-content-between align-items-center">
Project
<div class="ml-2">
<span class="fa fa-angle-up u-datatable__thead-icon"></span>
<span class="fa fa-angle-down u-datatable__thead-icon"></span>
</div>
</div>
</th>
<th scope="col" class="font-weight-medium">
<div class="d-flex justify-content-between align-items-center">
Priority
<div class="ml-2">
<span class="fa fa-angle-up u-datatable__thead-icon"></span>
<span class="fa fa-angle-down u-datatable__thead-icon"></span>
</div>
</div>
</th>
<th scope="col" class="font-weight-medium">
<div class="d-flex justify-content-between align-items-center">
Due data
<div class="ml-2">
<span class="fa fa-angle-up u-datatable__thead-icon"></span>
<span class="fa fa-angle-down u-datatable__thead-icon"></span>
</div>
</div>
</th>
<th scope="col" class="font-weight-medium">
<div class="d-flex justify-content-between align-items-center">
Status
<div class="ml-2">
<span class="fa fa-angle-up u-datatable__thead-icon"></span>
<span class="fa fa-angle-down u-datatable__thead-icon"></span>
</div>
</div>
</th>
</tr>
</thead>
<tbody class="font-size-14">
<tr>
<td class="align-middle font-weight-normal">Home page redesign</td>
<td class="align-middle">Spotify</td>
<td class="align-middle text-danger">
<span class="fa fa-arrow-up mr-1"></span>
Highest
</td>
<td class="align-middle">25 Jul</td>
<td class="align-middle">
<span class="fa fa-circle text-primary small mr-1"></span>
In progress
</td>
</tr>
<tr>
<td class="align-middle font-weight-normal">Logo branding</td>
<td class="align-middle">Dropbox</td>
<td class="align-middle text-warning">
<span class="fa fa-arrow-up mr-1"></span>
Medium
</td>
<td class="align-middle">12 Aug</td>
<td class="align-middle">
<span class="fa fa-circle text-primary small mr-1"></span>
In progress
</td>
</tr>
<tr>
<td class="align-middle font-weight-normal">Website redesign</td>
<td class="align-middle">Google</td>
<td class="align-middle text-danger">
<span class="fa fa-arrow-up mr-1"></span>
High
</td>
<td class="align-middle">15 Aug</td>
<td class="align-middle">
<span class="fa fa-circle text-success small mr-1"></span>
Completed
</td>
</tr>
<tr>
<td class="align-middle font-weight-normal">Home page redesign</td>
<td class="align-middle">FrontApp</td>
<td class="align-middle text-warning">
<span class="fa fa-arrow-up mr-1"></span>
Medium
</td>
<td class="align-middle">01 Aug</td>
<td class="align-middle">
<span class="fa fa-circle text-success small mr-1"></span>
Completed
</td>
</tr>
<tr>
<td class="align-middle font-weight-normal">SEO optimization</td>
<td class="align-middle">Slack</td>
<td class="align-middle text-success">
<span class="fa fa-arrow-down mr-1"></span>
Lowest
</td>
<td class="align-middle">02 Aug</td>
<td class="align-middle">
<span class="fa fa-circle text-warning small mr-1"></span>
On hold
</td>
</tr>
<tr>
<td class="align-middle font-weight-normal">Branding</td>
<td class="align-middle">Spotify</td>
<td class="align-middle text-danger">
<span class="fa fa-arrow-up mr-1"></span>
High
</td>
<td class="align-middle">05 Sep</td>
<td class="align-middle">
<span class="fa fa-circle text-primary small mr-1"></span>
In progress
</td>
</tr>
<tr>
<td class="align-middle font-weight-normal">Logo redesign</td>
<td class="align-middle">Htmlstream</td>
<td class="align-middle text-danger">
<span class="fa fa-arrow-up mr-1"></span>
High
</td>
<td class="align-middle">15 Sep</td>
<td class="align-middle">
<span class="fa fa-circle text-success small mr-1"></span>
Completed
</td>
</tr>
<tr>
<td class="align-middle font-weight-normal">Website redesign</td>
<td class="align-middle">GitHub</td>
<td class="align-middle text-success">
<span class="fa fa-arrow-down mr-1"></span>
Low
</td>
<td class="align-middle">16 Sep</td>
<td class="align-middle">
<span class="fa fa-circle text-warning small mr-1"></span>
On hold
</td>
</tr>
</tbody>
</table>
</div>
<!-- End Transaction Table -->
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/vendor/datatables/media/js/jquery.dataTables.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="assets/js/helpers/hs.datatables.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of datatables
$.HSCore.components.HSDatatables.init('.js-datatable');
});
</script>
Datatables #2
|
|
Order
|
Client
|
Amount
|
Date
|
Status
|
|---|---|---|---|---|---|
|
|
FR001 |
Spotify
|
$9.00 | 05 May | Rejected |
|
|
FR002 |
Dropbox
|
$257.93 | 12 May | Completed |
|
|
FR003 |
Google
|
$441.99 | 15 May | Completed |
|
|
FR004 |
FrontApp
|
$99.00 | 01 Jun | Pending |
|
|
FR005 |
Slack
|
$14.89 | 02 Jun | Rejected |
|
|
FR006 |
Spotify
|
$9.00 | 05 Jun | Completed |
|
|
FR007 |
Htmlstream
|
$1,579.99 | 15 Jun | Completed |
|
|
FR008 |
GitHub
|
$235.85 | 16 Apr | Rejected |
|
|
FR009 |
Dropbox
|
$12.31 | 12 Apr | Completed |
|
|
FR0010 |
Google
|
$891.00 | 29 Apr | Completed |
|
|
FR0011 |
Atlassian
|
$321.11 | 30 Apr | Pending |
|
|
FR0012 |
Slack
|
$16.29 | 02 Mar | Rejected |
|
|
FR0013 |
Spotify
|
$4.00 | 01 Mar | Completed |
|
|
FR0014 |
Htmlstream
|
$3,462.00 | 23 Mar | Completed |
|
|
FR0015 |
Spotify
|
$9.00 | 27 Mar | Rejected |
|
|
FR0016 |
Dropbox
|
$196.73 | 04 Feb | Completed |
|
|
FR0017 |
Google
|
$235.99 | 18 Feb | Completed |
|
|
FR0018 |
FrontApp
|
$34.00 | 21 Feb | Pending |
|
|
FR0019 |
Slack
|
$72.89 | 28 Feb | Rejected |
|
|
FR0020 |
Spotify
|
$9.00 | 05 Jan | Completed |
|
|
FR0021 |
Htmlstream
|
$7,485.00 | 15 Jan | Completed |
|
|
FR0022 |
Slack
|
$76.00 | 22 Jan | Rejected |
|
|
FR0023 |
Spotify
|
$12.00 | 18 Jan | Completed |
|
|
FR0024 |
Htmlstream
|
$87.43 | 30 Jan | Completed |
HTML:
<!-- Activity Menu -->
<div class="row justify-content-sm-between align-items-sm-center">
<div class="col-md-5 col-lg-4 mb-2 mb-md-0">
<!-- Datepicker -->
<div id="datepickerWrapper" class="u-datepicker w-auto input-group input-group-sm u-form u-form--sm">
<div class="input-group-prepend u-form__prepend">
<span class="input-group-text u-form__text">
<span class="fa fa-calendar u-form__text-inner"></span>
</span>
</div>
<input class="js-range-datepicker form-control u-form__input bg-white rounded-right" type="text"
data-rp-wrapper="#datepickerWrapper"
data-rp-type="range"
data-rp-date-format="d M Y"
data-rp-default-date='["05 Jul 2018", "19 Jul 2018"]'
data-rp-is-disable-future-dates="true">
</div>
<!-- End Datepicker -->
</div>
<div class="col-md-6">
<div class="d-flex">
<div class="mr-2">
<!-- Select -->
<select id="datatableEntries" class="js-select u-select" data-width="fit" data-style="u-btn-primary--air btn-sm">
<option value="6">6 entries</option>
<option value="12" selected>12 entries</option>
<option value="18">18 entries</option>
<option value="24">24 entries</option>
</select>
<!-- End Select -->
</div>
<!-- Search -->
<div class="js-focus-state input-group input-group-sm u-form u-form--sm">
<div class="input-group-prepend u-form__prepend">
<span class="input-group-text u-form__text">
<span class="fa fa-search u-form__text-inner"></span>
</span>
</div>
<input id="datatableSearch" class="form-control u-form__input" type="email" placeholder="Search activities" aria-label="Search activities">
</div>
<!-- End Search -->
</div>
</div>
</div>
<!-- End Activity Menu -->
<hr class="my-5">
<!-- Activity Table -->
<div class="table-responsive-md u-datatable">
<table class="js-datatable table table-borderless u-datatable__striped u-datatable__content u-datatable__trigger mb-5"
data-dt-info="#datatableInfo"
data-dt-search="#datatableSearch"
data-dt-entries="#datatableEntries"
data-dt-page-length="12"
data-dt-is-responsive="false"
data-dt-is-show-paging="true"
data-dt-details-invoker=".js-datatabale-details"
data-dt-select-all-control="#invoiceToggleAllCheckbox"
data-dt-pagination="datatablePagination"
data-dt-pagination-classes="pagination mb-0"
data-dt-pagination-items-classes="page-item"
data-dt-pagination-links-classes="page-link"
data-dt-pagination-next-classes="page-item"
data-dt-pagination-next-link-classes="page-link"
data-dt-pagination-next-link-markup='<span aria-hidden="true">»</span>'
data-dt-pagination-prev-classes="page-item"
data-dt-pagination-prev-link-classes="page-link"
data-dt-pagination-prev-link-markup='<span aria-hidden="true">«</span>'>
<thead>
<tr class="text-uppercase font-size-14">
<th scope="col">
<div class="custom-control custom-checkbox d-flex align-items-center">
<input type="checkbox" class="custom-control-input" id="invoiceToggleAllCheckbox">
<label class="custom-control-label" for="invoiceToggleAllCheckbox">
<span class="text-hide">Checkbox</span>
</label>
</div>
</th>
<th scope="col" class="font-weight-medium">
<div class="d-flex justify-content-between align-items-center">
Order
<div class="ml-2">
<span class="fa fa-angle-up u-datatable__thead-icon"></span>
<span class="fa fa-angle-down u-datatable__thead-icon"></span>
</div>
</div>
</th>
<th scope="col" class="font-weight-medium">
<div class="d-flex justify-content-between align-items-center">
Client
<div class="ml-2">
<span class="fa fa-angle-up u-datatable__thead-icon"></span>
<span class="fa fa-angle-down u-datatable__thead-icon"></span>
</div>
</div>
</th>
<th scope="col" class="font-weight-medium">
<div class="d-flex justify-content-between align-items-center">
Amount
<div class="ml-2">
<span class="fa fa-angle-up u-datatable__thead-icon"></span>
<span class="fa fa-angle-down u-datatable__thead-icon"></span>
</div>
</div>
</th>
<th scope="col" class="font-weight-medium">
<div class="d-flex justify-content-between align-items-center">
Date
<div class="ml-2">
<span class="fa fa-angle-up u-datatable__thead-icon"></span>
<span class="fa fa-angle-down u-datatable__thead-icon"></span>
</div>
</div>
</th>
<th scope="col" class="font-weight-medium">
<div class="d-flex justify-content-between align-items-center">
Status
<div class="ml-2">
<span class="fa fa-angle-up u-datatable__thead-icon"></span>
<span class="fa fa-angle-down u-datatable__thead-icon"></span>
</div>
</div>
</th>
</tr>
</thead>
<tbody class="font-size-14">
<tr class="js-datatabale-details" data-details='
<div class="border rounded p-5">
<h4 class="h3">Invoice</h4>
<div class="row mb-6">
<div class="col-3">
<span class="text-secondary">Date:</span>
<span class="font-weight-medium">05 May, 2018</span>
</div>
<div class="col-3">
<span class="text-secondary">Merchant:</span>
<span class="font-weight-medium">Spotify</span>
</div>
<div class="col-6">
<span class="text-secondary">Authorization code:</span>
<span class="font-weight-medium">128746739419</span>
</div>
</div>
<div class="row">
<div class="col-sm-6 mb-3 mb-sm-0">
<h5 class="text-dark font-size-14 text-uppercase">Billing address:</h5>
<address class="text-secondary">
<span class="d-block text-dark font-size-20 font-weight-medium mb-2">Spotify</span>
Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
</address>
</div>
<div class="col-sm-6">
<h5 class="text-dark font-size-14 text-uppercase">Client info:</h5>
<ul class="list-unstyled mb-0">
<li class="mb-2">
<span class="text-secondary">First name:</span>
<span class="font-weight-medium">Natalie</span>
</li>
<li class="mb-2">
<span class="text-secondary">Last name:</span>
<span class="font-weight-medium">Curtis</span>
</li>
<li class="mb-2">
<span class="text-secondary">Country:</span>
<span class="font-weight-medium">England</span>
</li>
</ul>
</div>
</div>
<div class="row justify-content-end mb-4">
<div class="col-sm-6">
<hr class="my-4">
<h5 class="text-dark font-size-14 text-uppercase">Transaction details:</h5>
<ul class="list-unstyled mb-0">
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Transaction amount</span>
<span class="font-weight-medium">$9.00</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Fee</span>
<span class="font-weight-medium">$0.50</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Total amount</span>
<span class="text-primary font-weight-medium">$9.37</span>
</li>
</ul>
</div>
</div>
<ul class="list-inline mb-0">
<li class="list-inline-item u-ver-divider pr-3 mr-3">
<a href="#">
<span class="fa fa-file-word text-secondary mr-1"></span>
Download invoice
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa fa-print text-secondary mr-1"></span>
Print details
</a>
</li>
</ul>
</div>'>
<td class="align-middle">
<div class="custom-control custom-checkbox d-flex align-items-center">
<input type="checkbox" class="custom-control-input" id="invoiceCheckbox01">
<label class="custom-control-label" for="invoiceCheckbox01">
<span class="text-hide">Checkbox</span>
</label>
</div>
</td>
<td class="align-middle text-secondary font-weight-normal u-datatable__trigger-icon">FR001</td>
<td class="align-middle">
<div class="media align-items-center">
<span class="u-icon u-icon-success--air rounded-circle mr-2">
<span class="u-icon__inner font-weight-medium">S</span>
</span>
<span>Spotify</span>
</div>
</td>
<td class="align-middle text-primary">$9.00</td>
<td class="align-middle text-secondary">05 May</td>
<td class="align-middle text-danger">Rejected</td>
</tr>
<tr class="js-datatabale-details" data-details='
<div class="border rounded p-5">
<h4 class="h3">Invoice</h4>
<div class="row mb-6">
<div class="col-3">
<span class="text-secondary">Date:</span>
<span class="font-weight-medium">12 May, 2018</span>
</div>
<div class="col-3">
<span class="text-secondary">Merchant:</span>
<span class="font-weight-medium">Dropbox</span>
</div>
<div class="col-6">
<span class="text-secondary">Authorization code:</span>
<span class="font-weight-medium">901274182319</span>
</div>
</div>
<div class="row">
<div class="col-sm-6 mb-3 mb-sm-0">
<h5 class="text-dark font-size-14 text-uppercase">Billing address:</h5>
<address class="text-secondary">
<span class="d-block text-dark font-size-20 font-weight-medium mb-2">Dropbox</span>
Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
</address>
</div>
<div class="col-sm-6">
<h5 class="text-dark font-size-14 text-uppercase">Client info:</h5>
<ul class="list-unstyled mb-0">
<li class="mb-2">
<span class="text-secondary">First name:</span>
<span class="font-weight-medium">Natalie</span>
</li>
<li class="mb-2">
<span class="text-secondary">Last name:</span>
<span class="font-weight-medium">Curtis</span>
</li>
<li class="mb-2">
<span class="text-secondary">Country:</span>
<span class="font-weight-medium">England</span>
</li>
</ul>
</div>
</div>
<div class="row justify-content-end mb-4">
<div class="col-sm-6">
<hr class="my-4">
<h5 class="text-dark font-size-14 text-uppercase">Transaction details:</h5>
<ul class="list-unstyled mb-0">
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Transaction amount</span>
<span class="font-weight-medium">$257.93</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Fee</span>
<span class="font-weight-medium">$0.50</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Total amount</span>
<span class="text-primary font-weight-medium">$257.43</span>
</li>
</ul>
</div>
</div>
<ul class="list-inline mb-0">
<li class="list-inline-item u-ver-divider pr-3 mr-3">
<a href="#">
<span class="fa fa-file-word text-secondary mr-1"></span>
Download invoice
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa fa-print text-secondary mr-1"></span>
Print details
</a>
</li>
</ul>
</div>'>
<td class="align-middle">
<div class="custom-control custom-checkbox d-flex align-items-center">
<input type="checkbox" class="custom-control-input" id="invoiceCheckbox02">
<label class="custom-control-label" for="invoiceCheckbox02">
<span class="text-hide">Checkbox</span>
</label>
</div>
</td>
<td class="align-middle text-secondary font-weight-normal u-datatable__trigger-icon">FR002</td>
<td class="align-middle">
<div class="media align-items-center">
<span class="u-icon u-icon-primary--air rounded-circle mr-2">
<span class="u-icon__inner font-weight-medium">D</span>
</span>
<span>Dropbox</span>
</div>
</td>
<td class="align-middle text-primary">$257.93</td>
<td class="align-middle text-secondary">12 May</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr class="js-datatabale-details" data-details='
<div class="border rounded p-5">
<h4 class="h3">Invoice</h4>
<div class="row mb-6">
<div class="col-3">
<span class="text-secondary">Date:</span>
<span class="font-weight-medium">15 May, 2018</span>
</div>
<div class="col-3">
<span class="text-secondary">Merchant:</span>
<span class="font-weight-medium">Google</span>
</div>
<div class="col-6">
<span class="text-secondary">Authorization code:</span>
<span class="font-weight-medium">9241291229</span>
</div>
</div>
<div class="row">
<div class="col-sm-6 mb-3 mb-sm-0">
<h5 class="text-dark font-size-14 text-uppercase">Billing address:</h5>
<address class="text-secondary">
<span class="d-block text-dark font-size-20 font-weight-medium mb-2">Google</span>
Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
</address>
</div>
<div class="col-sm-6">
<h5 class="text-dark font-size-14 text-uppercase">Client info:</h5>
<ul class="list-unstyled mb-0">
<li class="mb-2">
<span class="text-secondary">First name:</span>
<span class="font-weight-medium">Natalie</span>
</li>
<li class="mb-2">
<span class="text-secondary">Last name:</span>
<span class="font-weight-medium">Curtis</span>
</li>
<li class="mb-2">
<span class="text-secondary">Country:</span>
<span class="font-weight-medium">England</span>
</li>
</ul>
</div>
</div>
<div class="row justify-content-end mb-4">
<div class="col-sm-6">
<hr class="my-4">
<h5 class="text-dark font-size-14 text-uppercase">Transaction details:</h5>
<ul class="list-unstyled mb-0">
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Transaction amount</span>
<span class="font-weight-medium">441.49 USD</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Fee</span>
<span class="font-weight-medium">$0.50</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Total amount</span>
<span class="text-primary font-weight-medium">441.99 USD</span>
</li>
</ul>
</div>
</div>
<ul class="list-inline mb-0">
<li class="list-inline-item u-ver-divider pr-3 mr-3">
<a href="#">
<span class="fa fa-file-word text-secondary mr-1"></span>
Download invoice
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa fa-print text-secondary mr-1"></span>
Print details
</a>
</li>
</ul>
</div>'>
<td class="align-middle">
<div class="custom-control custom-checkbox d-flex align-items-center">
<input type="checkbox" class="custom-control-input" id="invoiceCheckbox03">
<label class="custom-control-label" for="invoiceCheckbox03">
<span class="text-hide">Checkbox</span>
</label>
</div>
</td>
<td class="align-middle text-secondary font-weight-normal u-datatable__trigger-icon">FR003</td>
<td class="align-middle">
<div class="media align-items-center">
<span class="u-icon u-icon-danger--air rounded-circle mr-2">
<span class="u-icon__inner font-weight-medium">G</span>
</span>
<span>Google</span>
</div>
</td>
<td class="align-middle text-primary">$441.99</td>
<td class="align-middle text-secondary">15 May</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr class="js-datatabale-details" data-details='
<div class="border rounded p-5">
<h4 class="h3">Invoice</h4>
<div class="row mb-6">
<div class="col-3">
<span class="text-secondary">Date:</span>
<span class="font-weight-medium">01 Jun, 2018</span>
</div>
<div class="col-3">
<span class="text-secondary">Merchant:</span>
<span class="font-weight-medium">FrontApp</span>
</div>
<div class="col-6">
<span class="text-secondary">Authorization code:</span>
<span class="font-weight-medium">4191239108931</span>
</div>
</div>
<div class="row">
<div class="col-sm-6 mb-3 mb-sm-0">
<h5 class="text-dark font-size-14 text-uppercase">Billing address:</h5>
<address class="text-secondary">
<span class="d-block text-dark font-size-20 font-weight-medium mb-2">FrontApp</span>
Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
</address>
</div>
<div class="col-sm-6">
<h5 class="text-dark font-size-14 text-uppercase">Client info:</h5>
<ul class="list-unstyled mb-0">
<li class="mb-2">
<span class="text-secondary">First name:</span>
<span class="font-weight-medium">Natalie</span>
</li>
<li class="mb-2">
<span class="text-secondary">Last name:</span>
<span class="font-weight-medium">Curtis</span>
</li>
<li class="mb-2">
<span class="text-secondary">Country:</span>
<span class="font-weight-medium">England</span>
</li>
</ul>
</div>
</div>
<div class="row justify-content-end mb-4">
<div class="col-sm-6">
<hr class="my-4">
<h5 class="text-dark font-size-14 text-uppercase">Transaction details:</h5>
<ul class="list-unstyled mb-0">
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Transaction amount</span>
<span class="font-weight-medium">98.50 USD</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Fee</span>
<span class="font-weight-medium">$0.50</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Total amount</span>
<span class="text-primary font-weight-medium">99.00 USD</span>
</li>
</ul>
</div>
</div>
<ul class="list-inline mb-0">
<li class="list-inline-item u-ver-divider pr-3 mr-3">
<a href="#">
<span class="fa fa-file-word text-secondary mr-1"></span>
Download invoice
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa fa-print text-secondary mr-1"></span>
Print details
</a>
</li>
</ul>
</div>'>
<td class="align-middle">
<div class="custom-control custom-checkbox d-flex align-items-center">
<input type="checkbox" class="custom-control-input" id="invoiceCheckbox04">
<label class="custom-control-label" for="invoiceCheckbox04">
<span class="text-hide">Checkbox</span>
</label>
</div>
</td>
<td class="align-middle text-secondary font-weight-normal u-datatable__trigger-icon">FR004</td>
<td class="align-middle">
<div class="media align-items-center">
<span class="u-icon u-icon-primary--air rounded-circle mr-2">
<span class="u-icon__inner font-weight-medium">F</span>
</span>
<span>FrontApp</span>
</div>
</td>
<td class="align-middle text-primary">$99.00</td>
<td class="align-middle text-secondary">01 Jun</td>
<td class="align-middle text-warning">Pending</td>
</tr>
<tr class="js-datatabale-details" data-details='
<div class="border rounded p-5">
<h4 class="h3">Invoice</h4>
<div class="row mb-6">
<div class="col-3">
<span class="text-secondary">Date:</span>
<span class="font-weight-medium">02 Jun, 2018</span>
</div>
<div class="col-3">
<span class="text-secondary">Merchant:</span>
<span class="font-weight-medium">Slack</span>
</div>
<div class="col-6">
<span class="text-secondary">Authorization code:</span>
<span class="font-weight-medium">12901372109401</span>
</div>
</div>
<div class="row">
<div class="col-sm-6 mb-3 mb-sm-0">
<h5 class="text-dark font-size-14 text-uppercase">Billing address:</h5>
<address class="text-secondary">
<span class="d-block text-dark font-size-20 font-weight-medium mb-2">Slack</span>
Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
</address>
</div>
<div class="col-sm-6">
<h5 class="text-dark font-size-14 text-uppercase">Client info:</h5>
<ul class="list-unstyled mb-0">
<li class="mb-2">
<span class="text-secondary">First name:</span>
<span class="font-weight-medium">Natalie</span>
</li>
<li class="mb-2">
<span class="text-secondary">Last name:</span>
<span class="font-weight-medium">Curtis</span>
</li>
<li class="mb-2">
<span class="text-secondary">Country:</span>
<span class="font-weight-medium">England</span>
</li>
</ul>
</div>
</div>
<div class="row justify-content-end mb-4">
<div class="col-sm-6">
<hr class="my-4">
<h5 class="text-dark font-size-14 text-uppercase">Transaction details:</h5>
<ul class="list-unstyled mb-0">
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Transaction amount</span>
<span class="font-weight-medium">14.39 USD</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Fee</span>
<span class="font-weight-medium">$0.50</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Total amount</span>
<span class="text-primary font-weight-medium">14.89 USD</span>
</li>
</ul>
</div>
</div>
<ul class="list-inline mb-0">
<li class="list-inline-item u-ver-divider pr-3 mr-3">
<a href="#">
<span class="fa fa-file-word text-secondary mr-1"></span>
Download invoice
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa fa-print text-secondary mr-1"></span>
Print details
</a>
</li>
</ul>
</div>'>
<td class="align-middle">
<div class="custom-control custom-checkbox d-flex align-items-center">
<input type="checkbox" class="custom-control-input" id="invoiceCheckbox05">
<label class="custom-control-label" for="invoiceCheckbox05">
<span class="text-hide">Checkbox</span>
</label>
</div>
</td>
<td class="align-middle text-secondary font-weight-normal u-datatable__trigger-icon">FR005</td>
<td class="align-middle">
<div class="media align-items-center">
<span class="u-icon u-icon-warning--air rounded-circle mr-2">
<span class="u-icon__inner font-weight-medium">S</span>
</span>
<span>Slack</span>
</div>
</td>
<td class="align-middle text-primary">$14.89</td>
<td class="align-middle text-secondary">02 Jun</td>
<td class="align-middle text-danger">Rejected</td>
</tr>
<tr class="js-datatabale-details" data-details='
<div class="border rounded p-5">
<h4 class="h3">Invoice</h4>
<div class="row mb-6">
<div class="col-3">
<span class="text-secondary">Date:</span>
<span class="font-weight-medium">05 Jun, 2018</span>
</div>
<div class="col-3">
<span class="text-secondary">Merchant:</span>
<span class="font-weight-medium">Spotify</span>
</div>
<div class="col-6">
<span class="text-secondary">Authorization code:</span>
<span class="font-weight-medium">8723903814282</span>
</div>
</div>
<div class="row">
<div class="col-sm-6 mb-3 mb-sm-0">
<h5 class="text-dark font-size-14 text-uppercase">Billing address:</h5>
<address class="text-secondary">
<span class="d-block text-dark font-size-20 font-weight-medium mb-2">Spotify</span>
Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
</address>
</div>
<div class="col-sm-6">
<h5 class="text-dark font-size-14 text-uppercase">Client info:</h5>
<ul class="list-unstyled mb-0">
<li class="mb-2">
<span class="text-secondary">First name:</span>
<span class="font-weight-medium">Natalie</span>
</li>
<li class="mb-2">
<span class="text-secondary">Last name:</span>
<span class="font-weight-medium">Curtis</span>
</li>
<li class="mb-2">
<span class="text-secondary">Country:</span>
<span class="font-weight-medium">England</span>
</li>
</ul>
</div>
</div>
<div class="row justify-content-end mb-4">
<div class="col-sm-6">
<hr class="my-4">
<h5 class="text-dark font-size-14 text-uppercase">Transaction details:</h5>
<ul class="list-unstyled mb-0">
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Transaction amount</span>
<span class="font-weight-medium">8.50 USD</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Fee</span>
<span class="font-weight-medium">$0.50</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Total amount</span>
<span class="text-primary font-weight-medium">9.00 USD</span>
</li>
</ul>
</div>
</div>
<ul class="list-inline mb-0">
<li class="list-inline-item u-ver-divider pr-3 mr-3">
<a href="#">
<span class="fa fa-file-word text-secondary mr-1"></span>
Download invoice
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa fa-print text-secondary mr-1"></span>
Print details
</a>
</li>
</ul>
</div>'>
<td class="align-middle">
<div class="custom-control custom-checkbox d-flex align-items-center">
<input type="checkbox" class="custom-control-input" id="invoiceCheckbox06">
<label class="custom-control-label" for="invoiceCheckbox06">
<span class="text-hide">Checkbox</span>
</label>
</div>
</td>
<td class="align-middle text-secondary font-weight-normal u-datatable__trigger-icon">FR006</td>
<td class="align-middle">
<div class="media align-items-center">
<span class="u-icon u-icon-success--air rounded-circle mr-2">
<span class="u-icon__inner font-weight-medium">D</span>
</span>
<span>Spotify</span>
</div>
</td>
<td class="align-middle text-primary">$9.00</td>
<td class="align-middle text-secondary">05 Jun</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr class="js-datatabale-details" data-details='
<div class="border rounded p-5">
<h4 class="h3">Invoice</h4>
<div class="row mb-6">
<div class="col-3">
<span class="text-secondary">Date:</span>
<span class="font-weight-medium">15 Jun, 2018</span>
</div>
<div class="col-3">
<span class="text-secondary">Merchant:</span>
<span class="font-weight-medium">Htmlstream</span>
</div>
<div class="col-6">
<span class="text-secondary">Authorization code:</span>
<span class="font-weight-medium">3641438346</span>
</div>
</div>
<div class="row">
<div class="col-sm-6 mb-3 mb-sm-0">
<h5 class="text-dark font-size-14 text-uppercase">Billing address:</h5>
<address class="text-secondary">
<span class="d-block text-dark font-size-20 font-weight-medium mb-2">Htmlstream</span>
Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
</address>
</div>
<div class="col-sm-6">
<h5 class="text-dark font-size-14 text-uppercase">Client info:</h5>
<ul class="list-unstyled mb-0">
<li class="mb-2">
<span class="text-secondary">First name:</span>
<span class="font-weight-medium">Natalie</span>
</li>
<li class="mb-2">
<span class="text-secondary">Last name:</span>
<span class="font-weight-medium">Curtis</span>
</li>
<li class="mb-2">
<span class="text-secondary">Country:</span>
<span class="font-weight-medium">England</span>
</li>
</ul>
</div>
</div>
<div class="row justify-content-end mb-4">
<div class="col-sm-6">
<hr class="my-4">
<h5 class="text-dark font-size-14 text-uppercase">Transaction details:</h5>
<ul class="list-unstyled mb-0">
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Transaction amount</span>
<span class="font-weight-medium">1,578.50 USD</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Fee</span>
<span class="font-weight-medium">$0.50</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Total amount</span>
<span class="text-primary font-weight-medium">1,579.00 USD</span>
</li>
</ul>
</div>
</div>
<ul class="list-inline mb-0">
<li class="list-inline-item u-ver-divider pr-3 mr-3">
<a href="#">
<span class="fa fa-file-word text-secondary mr-1"></span>
Download invoice
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa fa-print text-secondary mr-1"></span>
Print details
</a>
</li>
</ul>
</div>'>
<td class="align-middle">
<div class="custom-control custom-checkbox d-flex align-items-center">
<input type="checkbox" class="custom-control-input" id="invoiceCheckbox07">
<label class="custom-control-label" for="invoiceCheckbox07">
<span class="text-hide">Checkbox</span>
</label>
</div>
</td>
<td class="align-middle text-secondary font-weight-normal u-datatable__trigger-icon">FR007</td>
<td class="align-middle">
<div class="media align-items-center">
<span class="u-icon u-icon-dark--air rounded-circle mr-2">
<span class="u-icon__inner font-weight-medium">H</span>
</span>
<span>Htmlstream</span>
</div>
</td>
<td class="align-middle text-primary">$1,579.99</td>
<td class="align-middle text-secondary">15 Jun</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr class="js-datatabale-details" data-details='
<div class="border rounded p-5">
<h4 class="h3">Invoice</h4>
<div class="row mb-6">
<div class="col-3">
<span class="text-secondary">Date:</span>
<span class="font-weight-medium">16 Apr, 2018</span>
</div>
<div class="col-3">
<span class="text-secondary">Merchant:</span>
<span class="font-weight-medium">Spotify</span>
</div>
<div class="col-6">
<span class="text-secondary">Authorization code:</span>
<span class="font-weight-medium">56190247092853</span>
</div>
</div>
<div class="row">
<div class="col-sm-6 mb-3 mb-sm-0">
<h5 class="text-dark font-size-14 text-uppercase">Billing address:</h5>
<address class="text-secondary">
<span class="d-block text-dark font-size-20 font-weight-medium mb-2">Spotify</span>
Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
</address>
</div>
<div class="col-sm-6">
<h5 class="text-dark font-size-14 text-uppercase">Client info:</h5>
<ul class="list-unstyled mb-0">
<li class="mb-2">
<span class="text-secondary">First name:</span>
<span class="font-weight-medium">Natalie</span>
</li>
<li class="mb-2">
<span class="text-secondary">Last name:</span>
<span class="font-weight-medium">Curtis</span>
</li>
<li class="mb-2">
<span class="text-secondary">Country:</span>
<span class="font-weight-medium">England</span>
</li>
</ul>
</div>
</div>
<div class="row justify-content-end mb-4">
<div class="col-sm-6">
<hr class="my-4">
<h5 class="text-dark font-size-14 text-uppercase">Transaction details:</h5>
<ul class="list-unstyled mb-0">
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Transaction amount</span>
<span class="font-weight-medium">235.35 USD</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Fee</span>
<span class="font-weight-medium">$0.50</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Total amount</span>
<span class="text-primary font-weight-medium">235.85 USD</span>
</li>
</ul>
</div>
</div>
<ul class="list-inline mb-0">
<li class="list-inline-item u-ver-divider pr-3 mr-3">
<a href="#">
<span class="fa fa-file-word text-secondary mr-1"></span>
Download invoice
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa fa-print text-secondary mr-1"></span>
Print details
</a>
</li>
</ul>
</div>'>
<td class="align-middle">
<div class="custom-control custom-checkbox d-flex align-items-center">
<input type="checkbox" class="custom-control-input" id="invoiceCheckbox08">
<label class="custom-control-label" for="invoiceCheckbox08">
<span class="text-hide">Checkbox</span>
</label>
</div>
</td>
<td class="align-middle text-secondary font-weight-normal u-datatable__trigger-icon">FR008</td>
<td class="align-middle">
<div class="media align-items-center">
<span class="u-icon u-icon-dark--air rounded-circle mr-2">
<span class="u-icon__inner font-weight-medium">G</span>
</span>
<span>GitHub</span>
</div>
</td>
<td class="align-middle text-primary">$235.85</td>
<td class="align-middle text-secondary">16 Apr</td>
<td class="align-middle text-danger">Rejected</td>
</tr>
<tr class="js-datatabale-details" data-details='
<div class="border rounded p-5">
<h4 class="h3">Invoice</h4>
<div class="row mb-6">
<div class="col-3">
<span class="text-secondary">Date:</span>
<span class="font-weight-medium">12 Apr, 2018</span>
</div>
<div class="col-3">
<span class="text-secondary">Merchant:</span>
<span class="font-weight-medium">Dropbox</span>
</div>
<div class="col-6">
<span class="text-secondary">Authorization code:</span>
<span class="font-weight-medium">6172692721903</span>
</div>
</div>
<div class="row">
<div class="col-sm-6 mb-3 mb-sm-0">
<h5 class="text-dark font-size-14 text-uppercase">Billing address:</h5>
<address class="text-secondary">
<span class="d-block text-dark font-size-20 font-weight-medium mb-2">Dropbox</span>
Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
</address>
</div>
<div class="col-sm-6">
<h5 class="text-dark font-size-14 text-uppercase">Client info:</h5>
<ul class="list-unstyled mb-0">
<li class="mb-2">
<span class="text-secondary">First name:</span>
<span class="font-weight-medium">Natalie</span>
</li>
<li class="mb-2">
<span class="text-secondary">Last name:</span>
<span class="font-weight-medium">Curtis</span>
</li>
<li class="mb-2">
<span class="text-secondary">Country:</span>
<span class="font-weight-medium">England</span>
</li>
</ul>
</div>
</div>
<div class="row justify-content-end mb-4">
<div class="col-sm-6">
<hr class="my-4">
<h5 class="text-dark font-size-14 text-uppercase">Transaction details:</h5>
<ul class="list-unstyled mb-0">
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Transaction amount</span>
<span class="font-weight-medium">11.81 USD</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Fee</span>
<span class="font-weight-medium">$0.50</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Total amount</span>
<span class="text-primary font-weight-medium">12.31 USD</span>
</li>
</ul>
</div>
</div>
<ul class="list-inline mb-0">
<li class="list-inline-item u-ver-divider pr-3 mr-3">
<a href="#">
<span class="fa fa-file-word text-secondary mr-1"></span>
Download invoice
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa fa-print text-secondary mr-1"></span>
Print details
</a>
</li>
</ul>
</div>'>
<td class="align-middle">
<div class="custom-control custom-checkbox d-flex align-items-center">
<input type="checkbox" class="custom-control-input" id="invoiceCheckbox09">
<label class="custom-control-label" for="invoiceCheckbox09">
<span class="text-hide">Checkbox</span>
</label>
</div>
</td>
<td class="align-middle text-secondary font-weight-normal u-datatable__trigger-icon">FR009</td>
<td class="align-middle">
<div class="media align-items-center">
<span class="u-icon u-icon-primary--air rounded-circle mr-2">
<span class="u-icon__inner font-weight-medium">D</span>
</span>
<span>Dropbox</span>
</div>
</td>
<td class="align-middle text-primary">$12.31</td>
<td class="align-middle text-secondary">12 Apr</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr class="js-datatabale-details" data-details='
<div class="border rounded p-5">
<h4 class="h3">Invoice</h4>
<div class="row mb-6">
<div class="col-3">
<span class="text-secondary">Date:</span>
<span class="font-weight-medium">29 Apr, 2018</span>
</div>
<div class="col-3">
<span class="text-secondary">Merchant:</span>
<span class="font-weight-medium">Google</span>
</div>
<div class="col-6">
<span class="text-secondary">Authorization code:</span>
<span class="font-weight-medium">4125235412412</span>
</div>
</div>
<div class="row">
<div class="col-sm-6 mb-3 mb-sm-0">
<h5 class="text-dark font-size-14 text-uppercase">Billing address:</h5>
<address class="text-secondary">
<span class="d-block text-dark font-size-20 font-weight-medium mb-2">Google</span>
Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
</address>
</div>
<div class="col-sm-6">
<h5 class="text-dark font-size-14 text-uppercase">Client info:</h5>
<ul class="list-unstyled mb-0">
<li class="mb-2">
<span class="text-secondary">First name:</span>
<span class="font-weight-medium">Natalie</span>
</li>
<li class="mb-2">
<span class="text-secondary">Last name:</span>
<span class="font-weight-medium">Curtis</span>
</li>
<li class="mb-2">
<span class="text-secondary">Country:</span>
<span class="font-weight-medium">England</span>
</li>
</ul>
</div>
</div>
<div class="row justify-content-end mb-4">
<div class="col-sm-6">
<hr class="my-4">
<h5 class="text-dark font-size-14 text-uppercase">Transaction details:</h5>
<ul class="list-unstyled mb-0">
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Transaction amount</span>
<span class="font-weight-medium">890.50 USD</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Fee</span>
<span class="font-weight-medium">$0.50</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Total amount</span>
<span class="text-primary font-weight-medium">891.00 USD</span>
</li>
</ul>
</div>
</div>
<ul class="list-inline mb-0">
<li class="list-inline-item u-ver-divider pr-3 mr-3">
<a href="#">
<span class="fa fa-file-word text-secondary mr-1"></span>
Download invoice
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa fa-print text-secondary mr-1"></span>
Print details
</a>
</li>
</ul>
</div>'>
<td class="align-middle">
<div class="custom-control custom-checkbox d-flex align-items-center">
<input type="checkbox" class="custom-control-input" id="invoiceCheckbox10">
<label class="custom-control-label" for="invoiceCheckbox10">
<span class="text-hide">Checkbox</span>
</label>
</div>
</td>
<td class="align-middle text-secondary font-weight-normal u-datatable__trigger-icon">FR0010</td>
<td class="align-middle">
<div class="media align-items-center">
<span class="u-icon u-icon-danger--air rounded-circle mr-2">
<span class="u-icon__inner font-weight-medium">G</span>
</span>
<span>Google</span>
</div>
</td>
<td class="align-middle text-primary">$891.00</td>
<td class="align-middle text-secondary">29 Apr</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr class="js-datatabale-details" data-details='
<div class="border rounded p-5">
<h4 class="h3">Invoice</h4>
<div class="row mb-6">
<div class="col-3">
<span class="text-secondary">Date:</span>
<span class="font-weight-medium">30 Apr, 2018</span>
</div>
<div class="col-3">
<span class="text-secondary">Merchant:</span>
<span class="font-weight-medium">Atlassian</span>
</div>
<div class="col-6">
<span class="text-secondary">Authorization code:</span>
<span class="font-weight-medium">1241262182092</span>
</div>
</div>
<div class="row">
<div class="col-sm-6 mb-3 mb-sm-0">
<h5 class="text-dark font-size-14 text-uppercase">Billing address:</h5>
<address class="text-secondary">
<span class="d-block text-dark font-size-20 font-weight-medium mb-2">Atlassian</span>
Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
</address>
</div>
<div class="col-sm-6">
<h5 class="text-dark font-size-14 text-uppercase">Client info:</h5>
<ul class="list-unstyled mb-0">
<li class="mb-2">
<span class="text-secondary">First name:</span>
<span class="font-weight-medium">Natalie</span>
</li>
<li class="mb-2">
<span class="text-secondary">Last name:</span>
<span class="font-weight-medium">Curtis</span>
</li>
<li class="mb-2">
<span class="text-secondary">Country:</span>
<span class="font-weight-medium">England</span>
</li>
</ul>
</div>
</div>
<div class="row justify-content-end mb-4">
<div class="col-sm-6">
<hr class="my-4">
<h5 class="text-dark font-size-14 text-uppercase">Transaction details:</h5>
<ul class="list-unstyled mb-0">
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Transaction amount</span>
<span class="font-weight-medium">320.59 USD</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Fee</span>
<span class="font-weight-medium">$0.50</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Total amount</span>
<span class="text-primary font-weight-medium">321.11 USD</span>
</li>
</ul>
</div>
</div>
<ul class="list-inline mb-0">
<li class="list-inline-item u-ver-divider pr-3 mr-3">
<a href="#">
<span class="fa fa-file-word text-secondary mr-1"></span>
Download invoice
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa fa-print text-secondary mr-1"></span>
Print details
</a>
</li>
</ul>
</div>'>
<td class="align-middle">
<div class="custom-control custom-checkbox d-flex align-items-center">
<input type="checkbox" class="custom-control-input" id="invoiceCheckbox11">
<label class="custom-control-label" for="invoiceCheckbox11">
<span class="text-hide">Checkbox</span>
</label>
</div>
</td>
<td class="align-middle text-secondary font-weight-normal u-datatable__trigger-icon">FR0011</td>
<td class="align-middle">
<div class="media align-items-center">
<span class="u-icon u-icon-primary--air rounded-circle mr-2">
<span class="u-icon__inner font-weight-medium">A</span>
</span>
<span>Atlassian</span>
</div>
</td>
<td class="align-middle text-primary">$321.11</td>
<td class="align-middle text-secondary">30 Apr</td>
<td class="align-middle text-warning">Pending</td>
</tr>
<tr class="js-datatabale-details" data-details='
<div class="border rounded p-5">
<h4 class="h3">Invoice</h4>
<div class="row mb-6">
<div class="col-3">
<span class="text-secondary">Date:</span>
<span class="font-weight-medium">02 Mar, 2018</span>
</div>
<div class="col-3">
<span class="text-secondary">Merchant:</span>
<span class="font-weight-medium">Slack</span>
</div>
<div class="col-6">
<span class="text-secondary">Authorization code:</span>
<span class="font-weight-medium">7563970127419120</span>
</div>
</div>
<div class="row">
<div class="col-sm-6 mb-3 mb-sm-0">
<h5 class="text-dark font-size-14 text-uppercase">Billing address:</h5>
<address class="text-secondary">
<span class="d-block text-dark font-size-20 font-weight-medium mb-2">Slack</span>
Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
</address>
</div>
<div class="col-sm-6">
<h5 class="text-dark font-size-14 text-uppercase">Client info:</h5>
<ul class="list-unstyled mb-0">
<li class="mb-2">
<span class="text-secondary">First name:</span>
<span class="font-weight-medium">Natalie</span>
</li>
<li class="mb-2">
<span class="text-secondary">Last name:</span>
<span class="font-weight-medium">Curtis</span>
</li>
<li class="mb-2">
<span class="text-secondary">Country:</span>
<span class="font-weight-medium">England</span>
</li>
</ul>
</div>
</div>
<div class="row justify-content-end mb-4">
<div class="col-sm-6">
<hr class="my-4">
<h5 class="text-dark font-size-14 text-uppercase">Transaction details:</h5>
<ul class="list-unstyled mb-0">
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Transaction amount</span>
<span class="font-weight-medium">15.79 USD</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Fee</span>
<span class="font-weight-medium">$0.50</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Total amount</span>
<span class="text-primary font-weight-medium">16.29 USD</span>
</li>
</ul>
</div>
</div>
<ul class="list-inline mb-0">
<li class="list-inline-item u-ver-divider pr-3 mr-3">
<a href="#">
<span class="fa fa-file-word text-secondary mr-1"></span>
Download invoice
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa fa-print text-secondary mr-1"></span>
Print details
</a>
</li>
</ul>
</div>'>
<td class="align-middle">
<div class="custom-control custom-checkbox d-flex align-items-center">
<input type="checkbox" class="custom-control-input" id="invoiceCheckbox12">
<label class="custom-control-label" for="invoiceCheckbox12">
<span class="text-hide">Checkbox</span>
</label>
</div>
</td>
<td class="align-middle text-secondary font-weight-normal u-datatable__trigger-icon">FR0012</td>
<td class="align-middle">
<div class="media align-items-center">
<span class="u-icon u-icon-warning--air rounded-circle mr-2">
<span class="u-icon__inner font-weight-medium">S</span>
</span>
<span>Slack</span>
</div>
</td>
<td class="align-middle text-primary">$16.29</td>
<td class="align-middle text-secondary">02 Mar</td>
<td class="align-middle text-danger">Rejected</td>
</tr>
<tr class="js-datatabale-details" data-details='
<div class="border rounded p-5">
<h4 class="h3">Invoice</h4>
<div class="row mb-6">
<div class="col-3">
<span class="text-secondary">Date:</span>
<span class="font-weight-medium">01 Mar, 2018</span>
</div>
<div class="col-3">
<span class="text-secondary">Merchant:</span>
<span class="font-weight-medium">Spotify</span>
</div>
<div class="col-6">
<span class="text-secondary">Authorization code:</span>
<span class="font-weight-medium">4554212156223</span>
</div>
</div>
<div class="row">
<div class="col-sm-6 mb-3 mb-sm-0">
<h5 class="text-dark font-size-14 text-uppercase">Billing address:</h5>
<address class="text-secondary">
<span class="d-block text-dark font-size-20 font-weight-medium mb-2">Spotify</span>
Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
</address>
</div>
<div class="col-sm-6">
<h5 class="text-dark font-size-14 text-uppercase">Client info:</h5>
<ul class="list-unstyled mb-0">
<li class="mb-2">
<span class="text-secondary">First name:</span>
<span class="font-weight-medium">Natalie</span>
</li>
<li class="mb-2">
<span class="text-secondary">Last name:</span>
<span class="font-weight-medium">Curtis</span>
</li>
<li class="mb-2">
<span class="text-secondary">Country:</span>
<span class="font-weight-medium">England</span>
</li>
</ul>
</div>
</div>
<div class="row justify-content-end mb-4">
<div class="col-sm-6">
<hr class="my-4">
<h5 class="text-dark font-size-14 text-uppercase">Transaction details:</h5>
<ul class="list-unstyled mb-0">
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Transaction amount</span>
<span class="font-weight-medium">3.50 USD</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Fee</span>
<span class="font-weight-medium">$0.50</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Total amount</span>
<span class="text-primary font-weight-medium">4.00 USD</span>
</li>
</ul>
</div>
</div>
<ul class="list-inline mb-0">
<li class="list-inline-item u-ver-divider pr-3 mr-3">
<a href="#">
<span class="fa fa-file-word text-secondary mr-1"></span>
Download invoice
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa fa-print text-secondary mr-1"></span>
Print details
</a>
</li>
</ul>
</div>'>
<td class="align-middle">
<div class="custom-control custom-checkbox d-flex align-items-center">
<input type="checkbox" class="custom-control-input" id="invoiceCheckbox13">
<label class="custom-control-label" for="invoiceCheckbox13">
<span class="text-hide">Checkbox</span>
</label>
</div>
</td>
<td class="align-middle text-secondary font-weight-normal u-datatable__trigger-icon">FR0013</td>
<td class="align-middle">
<div class="media align-items-center">
<span class="u-icon u-icon-success--air rounded-circle mr-2">
<span class="u-icon__inner font-weight-medium">D</span>
</span>
<span>Spotify</span>
</div>
</td>
<td class="align-middle text-primary">$4.00</td>
<td class="align-middle text-secondary">01 Mar</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr class="js-datatabale-details" data-details='
<div class="border rounded p-5">
<h4 class="h3">Invoice</h4>
<div class="row mb-6">
<div class="col-3">
<span class="text-secondary">Date:</span>
<span class="font-weight-medium">23 Mar, 2018</span>
</div>
<div class="col-3">
<span class="text-secondary">Merchant:</span>
<span class="font-weight-medium">Htmlstream</span>
</div>
<div class="col-6">
<span class="text-secondary">Authorization code:</span>
<span class="font-weight-medium">153464574367</span>
</div>
</div>
<div class="row">
<div class="col-sm-6 mb-3 mb-sm-0">
<h5 class="text-dark font-size-14 text-uppercase">Billing address:</h5>
<address class="text-secondary">
<span class="d-block text-dark font-size-20 font-weight-medium mb-2">Htmlstream</span>
Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
</address>
</div>
<div class="col-sm-6">
<h5 class="text-dark font-size-14 text-uppercase">Client info:</h5>
<ul class="list-unstyled mb-0">
<li class="mb-2">
<span class="text-secondary">First name:</span>
<span class="font-weight-medium">Natalie</span>
</li>
<li class="mb-2">
<span class="text-secondary">Last name:</span>
<span class="font-weight-medium">Curtis</span>
</li>
<li class="mb-2">
<span class="text-secondary">Country:</span>
<span class="font-weight-medium">England</span>
</li>
</ul>
</div>
</div>
<div class="row justify-content-end mb-4">
<div class="col-sm-6">
<hr class="my-4">
<h5 class="text-dark font-size-14 text-uppercase">Transaction details:</h5>
<ul class="list-unstyled mb-0">
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Transaction amount</span>
<span class="font-weight-medium">3,461.50 USD</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Fee</span>
<span class="font-weight-medium">$0.50</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Total amount</span>
<span class="text-primary font-weight-medium">3,462.00 USD</span>
</li>
</ul>
</div>
</div>
<ul class="list-inline mb-0">
<li class="list-inline-item u-ver-divider pr-3 mr-3">
<a href="#">
<span class="fa fa-file-word text-secondary mr-1"></span>
Download invoice
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa fa-print text-secondary mr-1"></span>
Print details
</a>
</li>
</ul>
</div>'>
<td class="align-middle">
<div class="custom-control custom-checkbox d-flex align-items-center">
<input type="checkbox" class="custom-control-input" id="invoiceCheckbox14">
<label class="custom-control-label" for="invoiceCheckbox14">
<span class="text-hide">Checkbox</span>
</label>
</div>
</td>
<td class="align-middle text-secondary font-weight-normal u-datatable__trigger-icon">FR0014</td>
<td class="align-middle">
<div class="media align-items-center">
<span class="u-icon u-icon-dark--air rounded-circle mr-2">
<span class="u-icon__inner font-weight-medium">H</span>
</span>
<span>Htmlstream</span>
</div>
</td>
<td class="align-middle text-primary">$3,462.00</td>
<td class="align-middle text-secondary">23 Mar</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr class="js-datatabale-details" data-details='
<div class="border rounded p-5">
<h4 class="h3">Invoice</h4>
<div class="row mb-6">
<div class="col-3">
<span class="text-secondary">Date:</span>
<span class="font-weight-medium">27 Mar, 2018</span>
</div>
<div class="col-3">
<span class="text-secondary">Merchant:</span>
<span class="font-weight-medium">Spotify</span>
</div>
<div class="col-6">
<span class="text-secondary">Authorization code:</span>
<span class="font-weight-medium">981473734748</span>
</div>
</div>
<div class="row">
<div class="col-sm-6 mb-3 mb-sm-0">
<h5 class="text-dark font-size-14 text-uppercase">Billing address:</h5>
<address class="text-secondary">
<span class="d-block text-dark font-size-20 font-weight-medium mb-2">Spotify</span>
Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
</address>
</div>
<div class="col-sm-6">
<h5 class="text-dark font-size-14 text-uppercase">Client info:</h5>
<ul class="list-unstyled mb-0">
<li class="mb-2">
<span class="text-secondary">First name:</span>
<span class="font-weight-medium">Natalie</span>
</li>
<li class="mb-2">
<span class="text-secondary">Last name:</span>
<span class="font-weight-medium">Curtis</span>
</li>
<li class="mb-2">
<span class="text-secondary">Country:</span>
<span class="font-weight-medium">England</span>
</li>
</ul>
</div>
</div>
<div class="row justify-content-end mb-4">
<div class="col-sm-6">
<hr class="my-4">
<h5 class="text-dark font-size-14 text-uppercase">Transaction details:</h5>
<ul class="list-unstyled mb-0">
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Transaction amount</span>
<span class="font-weight-medium">8.50 USD</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Fee</span>
<span class="font-weight-medium">$0.50</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Total amount</span>
<span class="text-primary font-weight-medium">9.00 USD</span>
</li>
</ul>
</div>
</div>
<ul class="list-inline mb-0">
<li class="list-inline-item u-ver-divider pr-3 mr-3">
<a href="#">
<span class="fa fa-file-word text-secondary mr-1"></span>
Download invoice
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa fa-print text-secondary mr-1"></span>
Print details
</a>
</li>
</ul>
</div>'>
<td class="align-middle">
<div class="custom-control custom-checkbox d-flex align-items-center">
<input type="checkbox" class="custom-control-input" id="invoiceCheckbox15">
<label class="custom-control-label" for="invoiceCheckbox15">
<span class="text-hide">Checkbox</span>
</label>
</div>
</td>
<td class="align-middle text-secondary font-weight-normal u-datatable__trigger-icon">FR0015</td>
<td class="align-middle">
<div class="media align-items-center">
<span class="u-icon u-icon-success--air rounded-circle mr-2">
<span class="u-icon__inner font-weight-medium">S</span>
</span>
<span>Spotify</span>
</div>
</td>
<td class="align-middle text-primary">$9.00</td>
<td class="align-middle text-secondary">27 Mar</td>
<td class="align-middle text-danger">Rejected</td>
</tr>
<tr class="js-datatabale-details" data-details='
<div class="border rounded p-5">
<h4 class="h3">Invoice</h4>
<div class="row mb-6">
<div class="col-3">
<span class="text-secondary">Date:</span>
<span class="font-weight-medium">04 Feb, 2018</span>
</div>
<div class="col-3">
<span class="text-secondary">Merchant:</span>
<span class="font-weight-medium">Dropbox</span>
</div>
<div class="col-6">
<span class="text-secondary">Authorization code:</span>
<span class="font-weight-medium">2323521524624</span>
</div>
</div>
<div class="row">
<div class="col-sm-6 mb-3 mb-sm-0">
<h5 class="text-dark font-size-14 text-uppercase">Billing address:</h5>
<address class="text-secondary">
<span class="d-block text-dark font-size-20 font-weight-medium mb-2">Dropbox</span>
Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
</address>
</div>
<div class="col-sm-6">
<h5 class="text-dark font-size-14 text-uppercase">Client info:</h5>
<ul class="list-unstyled mb-0">
<li class="mb-2">
<span class="text-secondary">First name:</span>
<span class="font-weight-medium">Natalie</span>
</li>
<li class="mb-2">
<span class="text-secondary">Last name:</span>
<span class="font-weight-medium">Curtis</span>
</li>
<li class="mb-2">
<span class="text-secondary">Country:</span>
<span class="font-weight-medium">England</span>
</li>
</ul>
</div>
</div>
<div class="row justify-content-end mb-4">
<div class="col-sm-6">
<hr class="my-4">
<h5 class="text-dark font-size-14 text-uppercase">Transaction details:</h5>
<ul class="list-unstyled mb-0">
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Transaction amount</span>
<span class="font-weight-medium">196.23 USD</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Fee</span>
<span class="font-weight-medium">$0.50</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Total amount</span>
<span class="text-primary font-weight-medium">196.73 USD</span>
</li>
</ul>
</div>
</div>
<ul class="list-inline mb-0">
<li class="list-inline-item u-ver-divider pr-3 mr-3">
<a href="#">
<span class="fa fa-file-word text-secondary mr-1"></span>
Download invoice
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa fa-print text-secondary mr-1"></span>
Print details
</a>
</li>
</ul>
</div>'>
<td class="align-middle">
<div class="custom-control custom-checkbox d-flex align-items-center">
<input type="checkbox" class="custom-control-input" id="invoiceCheckbox16">
<label class="custom-control-label" for="invoiceCheckbox16">
<span class="text-hide">Checkbox</span>
</label>
</div>
</td>
<td class="align-middle text-secondary font-weight-normal u-datatable__trigger-icon">FR0016</td>
<td class="align-middle">
<div class="media align-items-center">
<span class="u-icon u-icon-primary--air rounded-circle mr-2">
<span class="u-icon__inner font-weight-medium">D</span>
</span>
<span>Dropbox</span>
</div>
</td>
<td class="align-middle text-primary">$196.73</td>
<td class="align-middle text-secondary">04 Feb</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr class="js-datatabale-details" data-details='
<div class="border rounded p-5">
<h4 class="h3">Invoice</h4>
<div class="row mb-6">
<div class="col-3">
<span class="text-secondary">Date:</span>
<span class="font-weight-medium">18 Feb, 2018</span>
</div>
<div class="col-3">
<span class="text-secondary">Merchant:</span>
<span class="font-weight-medium">Google</span>
</div>
<div class="col-6">
<span class="text-secondary">Authorization code:</span>
<span class="font-weight-medium">89791293819238</span>
</div>
</div>
<div class="row">
<div class="col-sm-6 mb-3 mb-sm-0">
<h5 class="text-dark font-size-14 text-uppercase">Billing address:</h5>
<address class="text-secondary">
<span class="d-block text-dark font-size-20 font-weight-medium mb-2">Google</span>
Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
</address>
</div>
<div class="col-sm-6">
<h5 class="text-dark font-size-14 text-uppercase">Client info:</h5>
<ul class="list-unstyled mb-0">
<li class="mb-2">
<span class="text-secondary">First name:</span>
<span class="font-weight-medium">Natalie</span>
</li>
<li class="mb-2">
<span class="text-secondary">Last name:</span>
<span class="font-weight-medium">Curtis</span>
</li>
<li class="mb-2">
<span class="text-secondary">Country:</span>
<span class="font-weight-medium">England</span>
</li>
</ul>
</div>
</div>
<div class="row justify-content-end mb-4">
<div class="col-sm-6">
<hr class="my-4">
<h5 class="text-dark font-size-14 text-uppercase">Transaction details:</h5>
<ul class="list-unstyled mb-0">
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Transaction amount</span>
<span class="font-weight-medium">235.49 USD</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Fee</span>
<span class="font-weight-medium">$0.50</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Total amount</span>
<span class="text-primary font-weight-medium">235.99 USD</span>
</li>
</ul>
</div>
</div>
<ul class="list-inline mb-0">
<li class="list-inline-item u-ver-divider pr-3 mr-3">
<a href="#">
<span class="fa fa-file-word text-secondary mr-1"></span>
Download invoice
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa fa-print text-secondary mr-1"></span>
Print details
</a>
</li>
</ul>
</div>'>
<td class="align-middle">
<div class="custom-control custom-checkbox d-flex align-items-center">
<input type="checkbox" class="custom-control-input" id="invoiceCheckbox17">
<label class="custom-control-label" for="invoiceCheckbox17">
<span class="text-hide">Checkbox</span>
</label>
</div>
</td>
<td class="align-middle text-secondary font-weight-normal u-datatable__trigger-icon">FR0017</td>
<td class="align-middle">
<div class="media align-items-center">
<span class="u-icon u-icon-danger--air rounded-circle mr-2">
<span class="u-icon__inner font-weight-medium">G</span>
</span>
<span>Google</span>
</div>
</td>
<td class="align-middle text-primary">$235.99</td>
<td class="align-middle text-secondary">18 Feb</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr class="js-datatabale-details" data-details='
<div class="border rounded p-5">
<h4 class="h3">Invoice</h4>
<div class="row mb-6">
<div class="col-3">
<span class="text-secondary">Date:</span>
<span class="font-weight-medium">21 Feb, 2018</span>
</div>
<div class="col-3">
<span class="text-secondary">Merchant:</span>
<span class="font-weight-medium">FrontApp</span>
</div>
<div class="col-6">
<span class="text-secondary">Authorization code:</span>
<span class="font-weight-medium">412415246235</span>
</div>
</div>
<div class="row">
<div class="col-sm-6 mb-3 mb-sm-0">
<h5 class="text-dark font-size-14 text-uppercase">Billing address:</h5>
<address class="text-secondary">
<span class="d-block text-dark font-size-20 font-weight-medium mb-2">FrontApp</span>
Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
</address>
</div>
<div class="col-sm-6">
<h5 class="text-dark font-size-14 text-uppercase">Client info:</h5>
<ul class="list-unstyled mb-0">
<li class="mb-2">
<span class="text-secondary">First name:</span>
<span class="font-weight-medium">Natalie</span>
</li>
<li class="mb-2">
<span class="text-secondary">Last name:</span>
<span class="font-weight-medium">Curtis</span>
</li>
<li class="mb-2">
<span class="text-secondary">Country:</span>
<span class="font-weight-medium">England</span>
</li>
</ul>
</div>
</div>
<div class="row justify-content-end mb-4">
<div class="col-sm-6">
<hr class="my-4">
<h5 class="text-dark font-size-14 text-uppercase">Transaction details:</h5>
<ul class="list-unstyled mb-0">
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Transaction amount</span>
<span class="font-weight-medium">33.50 USD</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Fee</span>
<span class="font-weight-medium">$0.50</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Total amount</span>
<span class="text-primary font-weight-medium">34.00 USD</span>
</li>
</ul>
</div>
</div>
<ul class="list-inline mb-0">
<li class="list-inline-item u-ver-divider pr-3 mr-3">
<a href="#">
<span class="fa fa-file-word text-secondary mr-1"></span>
Download invoice
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa fa-print text-secondary mr-1"></span>
Print details
</a>
</li>
</ul>
</div>'>
<td class="align-middle">
<div class="custom-control custom-checkbox d-flex align-items-center">
<input type="checkbox" class="custom-control-input" id="invoiceCheckbox18">
<label class="custom-control-label" for="invoiceCheckbox18">
<span class="text-hide">Checkbox</span>
</label>
</div>
</td>
<td class="align-middle text-secondary font-weight-normal u-datatable__trigger-icon">FR0018</td>
<td class="align-middle">
<div class="media align-items-center">
<span class="u-icon u-icon-primary--air rounded-circle mr-2">
<span class="u-icon__inner font-weight-medium">F</span>
</span>
<span>FrontApp</span>
</div>
</td>
<td class="align-middle text-primary">$34.00</td>
<td class="align-middle text-secondary">21 Feb</td>
<td class="align-middle text-warning">Pending</td>
</tr>
<tr class="js-datatabale-details" data-details='
<div class="border rounded p-5">
<h4 class="h3">Invoice</h4>
<div class="row mb-6">
<div class="col-3">
<span class="text-secondary">Date:</span>
<span class="font-weight-medium">28 Feb, 2018</span>
</div>
<div class="col-3">
<span class="text-secondary">Merchant:</span>
<span class="font-weight-medium">S</span>
</div>
<div class="col-6">
<span class="text-secondary">Authorization code:</span>
<span class="font-weight-medium">543653251921</span>
</div>
</div>
<div class="row">
<div class="col-sm-6 mb-3 mb-sm-0">
<h5 class="text-dark font-size-14 text-uppercase">Billing address:</h5>
<address class="text-secondary">
<span class="d-block text-dark font-size-20 font-weight-medium mb-2">S</span>
Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
</address>
</div>
<div class="col-sm-6">
<h5 class="text-dark font-size-14 text-uppercase">Client info:</h5>
<ul class="list-unstyled mb-0">
<li class="mb-2">
<span class="text-secondary">First name:</span>
<span class="font-weight-medium">Natalie</span>
</li>
<li class="mb-2">
<span class="text-secondary">Last name:</span>
<span class="font-weight-medium">Curtis</span>
</li>
<li class="mb-2">
<span class="text-secondary">Country:</span>
<span class="font-weight-medium">England</span>
</li>
</ul>
</div>
</div>
<div class="row justify-content-end mb-4">
<div class="col-sm-6">
<hr class="my-4">
<h5 class="text-dark font-size-14 text-uppercase">Transaction details:</h5>
<ul class="list-unstyled mb-0">
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Transaction amount</span>
<span class="font-weight-medium">72.39 USD</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Fee</span>
<span class="font-weight-medium">$0.50</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Total amount</span>
<span class="text-primary font-weight-medium">72.89 USD</span>
</li>
</ul>
</div>
</div>
<ul class="list-inline mb-0">
<li class="list-inline-item u-ver-divider pr-3 mr-3">
<a href="#">
<span class="fa fa-file-word text-secondary mr-1"></span>
Download invoice
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa fa-print text-secondary mr-1"></span>
Print details
</a>
</li>
</ul>
</div>'>
<td class="align-middle">
<div class="custom-control custom-checkbox d-flex align-items-center">
<input type="checkbox" class="custom-control-input" id="invoiceCheckbox19">
<label class="custom-control-label" for="invoiceCheckbox19">
<span class="text-hide">Checkbox</span>
</label>
</div>
</td>
<td class="align-middle text-secondary font-weight-normal u-datatable__trigger-icon">FR0019</td>
<td class="align-middle">
<div class="media align-items-center">
<span class="u-icon u-icon-warning--air rounded-circle mr-2">
<span class="u-icon__inner font-weight-medium">S</span>
</span>
<span>Slack</span>
</div>
</td>
<td class="align-middle text-primary">$72.89</td>
<td class="align-middle text-secondary">28 Feb</td>
<td class="align-middle text-danger">Rejected</td>
</tr>
<tr class="js-datatabale-details" data-details='
<div class="border rounded p-5">
<h4 class="h3">Invoice</h4>
<div class="row mb-6">
<div class="col-3">
<span class="text-secondary">Date:</span>
<span class="font-weight-medium">05 Jan, 2018</span>
</div>
<div class="col-3">
<span class="text-secondary">Merchant:</span>
<span class="font-weight-medium">Spotify</span>
</div>
<div class="col-6">
<span class="text-secondary">Authorization code:</span>
<span class="font-weight-medium">6878782791820</span>
</div>
</div>
<div class="row">
<div class="col-sm-6 mb-3 mb-sm-0">
<h5 class="text-dark font-size-14 text-uppercase">Billing address:</h5>
<address class="text-secondary">
<span class="d-block text-dark font-size-20 font-weight-medium mb-2">Spotify</span>
Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
</address>
</div>
<div class="col-sm-6">
<h5 class="text-dark font-size-14 text-uppercase">Client info:</h5>
<ul class="list-unstyled mb-0">
<li class="mb-2">
<span class="text-secondary">First name:</span>
<span class="font-weight-medium">Natalie</span>
</li>
<li class="mb-2">
<span class="text-secondary">Last name:</span>
<span class="font-weight-medium">Curtis</span>
</li>
<li class="mb-2">
<span class="text-secondary">Country:</span>
<span class="font-weight-medium">England</span>
</li>
</ul>
</div>
</div>
<div class="row justify-content-end mb-4">
<div class="col-sm-6">
<hr class="my-4">
<h5 class="text-dark font-size-14 text-uppercase">Transaction details:</h5>
<ul class="list-unstyled mb-0">
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Transaction amount</span>
<span class="font-weight-medium">8.50 USD</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Fee</span>
<span class="font-weight-medium">$0.50</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Total amount</span>
<span class="text-primary font-weight-medium">9.00 USD</span>
</li>
</ul>
</div>
</div>
<ul class="list-inline mb-0">
<li class="list-inline-item u-ver-divider pr-3 mr-3">
<a href="#">
<span class="fa fa-file-word text-secondary mr-1"></span>
Download invoice
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa fa-print text-secondary mr-1"></span>
Print details
</a>
</li>
</ul>
</div>'>
<td class="align-middle">
<div class="custom-control custom-checkbox d-flex align-items-center">
<input type="checkbox" class="custom-control-input" id="invoiceCheckbox20">
<label class="custom-control-label" for="invoiceCheckbox20">
<span class="text-hide">Checkbox</span>
</label>
</div>
</td>
<td class="align-middle text-secondary font-weight-normal u-datatable__trigger-icon">FR0020</td>
<td class="align-middle">
<div class="media align-items-center">
<span class="u-icon u-icon-success--air rounded-circle mr-2">
<span class="u-icon__inner font-weight-medium">D</span>
</span>
<span>Spotify</span>
</div>
</td>
<td class="align-middle text-primary">$9.00</td>
<td class="align-middle text-secondary">05 Jan</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr class="js-datatabale-details" data-details='
<div class="border rounded p-5">
<h4 class="h3">Invoice</h4>
<div class="row mb-6">
<div class="col-3">
<span class="text-secondary">Date:</span>
<span class="font-weight-medium">15 Jan, 2018</span>
</div>
<div class="col-3">
<span class="text-secondary">Merchant:</span>
<span class="font-weight-medium">Htmlstream</span>
</div>
<div class="col-6">
<span class="text-secondary">Authorization code:</span>
<span class="font-weight-medium">0912974318264</span>
</div>
</div>
<div class="row">
<div class="col-sm-6 mb-3 mb-sm-0">
<h5 class="text-dark font-size-14 text-uppercase">Billing address:</h5>
<address class="text-secondary">
<span class="d-block text-dark font-size-20 font-weight-medium mb-2">Htmlstream</span>
Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
</address>
</div>
<div class="col-sm-6">
<h5 class="text-dark font-size-14 text-uppercase">Client info:</h5>
<ul class="list-unstyled mb-0">
<li class="mb-2">
<span class="text-secondary">First name:</span>
<span class="font-weight-medium">Natalie</span>
</li>
<li class="mb-2">
<span class="text-secondary">Last name:</span>
<span class="font-weight-medium">Curtis</span>
</li>
<li class="mb-2">
<span class="text-secondary">Country:</span>
<span class="font-weight-medium">England</span>
</li>
</ul>
</div>
</div>
<div class="row justify-content-end mb-4">
<div class="col-sm-6">
<hr class="my-4">
<h5 class="text-dark font-size-14 text-uppercase">Transaction details:</h5>
<ul class="list-unstyled mb-0">
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Transaction amount</span>
<span class="font-weight-medium">7,484.50 USD</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Fee</span>
<span class="font-weight-medium">$0.50</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Total amount</span>
<span class="text-primary font-weight-medium">7,485.00 USD</span>
</li>
</ul>
</div>
</div>
<ul class="list-inline mb-0">
<li class="list-inline-item u-ver-divider pr-3 mr-3">
<a href="#">
<span class="fa fa-file-word text-secondary mr-1"></span>
Download invoice
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa fa-print text-secondary mr-1"></span>
Print details
</a>
</li>
</ul>
</div>'>
<td class="align-middle">
<div class="custom-control custom-checkbox d-flex align-items-center">
<input type="checkbox" class="custom-control-input" id="invoiceCheckbox21">
<label class="custom-control-label" for="invoiceCheckbox21">
<span class="text-hide">Checkbox</span>
</label>
</div>
</td>
<td class="align-middle text-secondary font-weight-normal u-datatable__trigger-icon">FR0021</td>
<td class="align-middle">
<div class="media align-items-center">
<span class="u-icon u-icon-dark--air rounded-circle mr-2">
<span class="u-icon__inner font-weight-medium">H</span>
</span>
<span>Htmlstream</span>
</div>
</td>
<td class="align-middle text-primary">$7,485.00</td>
<td class="align-middle text-secondary">15 Jan</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr class="js-datatabale-details" data-details='
<div class="border rounded p-5">
<h4 class="h3">Invoice</h4>
<div class="row mb-6">
<div class="col-3">
<span class="text-secondary">Date:</span>
<span class="font-weight-medium">22 Jan, 2018</span>
</div>
<div class="col-3">
<span class="text-secondary">Merchant:</span>
<span class="font-weight-medium">Slack</span>
</div>
<div class="col-6">
<span class="text-secondary">Authorization code:</span>
<span class="font-weight-medium">1231524674634</span>
</div>
</div>
<div class="row">
<div class="col-sm-6 mb-3 mb-sm-0">
<h5 class="text-dark font-size-14 text-uppercase">Billing address:</h5>
<address class="text-secondary">
<span class="d-block text-dark font-size-20 font-weight-medium mb-2">Slack</span>
Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
</address>
</div>
<div class="col-sm-6">
<h5 class="text-dark font-size-14 text-uppercase">Client info:</h5>
<ul class="list-unstyled mb-0">
<li class="mb-2">
<span class="text-secondary">First name:</span>
<span class="font-weight-medium">Natalie</span>
</li>
<li class="mb-2">
<span class="text-secondary">Last name:</span>
<span class="font-weight-medium">Curtis</span>
</li>
<li class="mb-2">
<span class="text-secondary">Country:</span>
<span class="font-weight-medium">England</span>
</li>
</ul>
</div>
</div>
<div class="row justify-content-end mb-4">
<div class="col-sm-6">
<hr class="my-4">
<h5 class="text-dark font-size-14 text-uppercase">Transaction details:</h5>
<ul class="list-unstyled mb-0">
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Transaction amount</span>
<span class="font-weight-medium">75.50 USD</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Fee</span>
<span class="font-weight-medium">$0.50</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Total amount</span>
<span class="text-primary font-weight-medium">76.00 USD</span>
</li>
</ul>
</div>
</div>
<ul class="list-inline mb-0">
<li class="list-inline-item u-ver-divider pr-3 mr-3">
<a href="#">
<span class="fa fa-file-word text-secondary mr-1"></span>
Download invoice
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa fa-print text-secondary mr-1"></span>
Print details
</a>
</li>
</ul>
</div>'>
<td class="align-middle">
<div class="custom-control custom-checkbox d-flex align-items-center">
<input type="checkbox" class="custom-control-input" id="invoiceCheckbox22">
<label class="custom-control-label" for="invoiceCheckbox22">
<span class="text-hide">Checkbox</span>
</label>
</div>
</td>
<td class="align-middle text-secondary font-weight-normal u-datatable__trigger-icon">FR0022</td>
<td class="align-middle">
<div class="media align-items-center">
<span class="u-icon u-icon-warning--air rounded-circle mr-2">
<span class="u-icon__inner font-weight-medium">S</span>
</span>
<span>Slack</span>
</div>
</td>
<td class="align-middle text-primary">$76.00</td>
<td class="align-middle text-secondary">22 Jan</td>
<td class="align-middle text-danger">Rejected</td>
</tr>
<tr class="js-datatabale-details" data-details='
<div class="border rounded p-5">
<h4 class="h3">Invoice</h4>
<div class="row mb-6">
<div class="col-3">
<span class="text-secondary">Date:</span>
<span class="font-weight-medium">18 Jan, 2018</span>
</div>
<div class="col-3">
<span class="text-secondary">Merchant:</span>
<span class="font-weight-medium">Spotify</span>
</div>
<div class="col-6">
<span class="text-secondary">Authorization code:</span>
<span class="font-weight-medium">4753616512242</span>
</div>
</div>
<div class="row">
<div class="col-sm-6 mb-3 mb-sm-0">
<h5 class="text-dark font-size-14 text-uppercase">Billing address:</h5>
<address class="text-secondary">
<span class="d-block text-dark font-size-20 font-weight-medium mb-2">Spotify</span>
Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
</address>
</div>
<div class="col-sm-6">
<h5 class="text-dark font-size-14 text-uppercase">Client info:</h5>
<ul class="list-unstyled mb-0">
<li class="mb-2">
<span class="text-secondary">First name:</span>
<span class="font-weight-medium">Natalie</span>
</li>
<li class="mb-2">
<span class="text-secondary">Last name:</span>
<span class="font-weight-medium">Curtis</span>
</li>
<li class="mb-2">
<span class="text-secondary">Country:</span>
<span class="font-weight-medium">England</span>
</li>
</ul>
</div>
</div>
<div class="row justify-content-end mb-4">
<div class="col-sm-6">
<hr class="my-4">
<h5 class="text-dark font-size-14 text-uppercase">Transaction details:</h5>
<ul class="list-unstyled mb-0">
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Transaction amount</span>
<span class="font-weight-medium">11.50 USD</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Fee</span>
<span class="font-weight-medium">$0.50</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Total amount</span>
<span class="text-primary font-weight-medium">12.00 USD</span>
</li>
</ul>
</div>
</div>
<ul class="list-inline mb-0">
<li class="list-inline-item u-ver-divider pr-3 mr-3">
<a href="#">
<span class="fa fa-file-word text-secondary mr-1"></span>
Download invoice
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa fa-print text-secondary mr-1"></span>
Print details
</a>
</li>
</ul>
</div>'>
<td class="align-middle">
<div class="custom-control custom-checkbox d-flex align-items-center">
<input type="checkbox" class="custom-control-input" id="invoiceCheckbox23">
<label class="custom-control-label" for="invoiceCheckbox23">
<span class="text-hide">Checkbox</span>
</label>
</div>
</td>
<td class="align-middle text-secondary font-weight-normal u-datatable__trigger-icon">FR0023</td>
<td class="align-middle">
<div class="media align-items-center">
<span class="u-icon u-icon-success--air rounded-circle mr-2">
<span class="u-icon__inner font-weight-medium">D</span>
</span>
<span>Spotify</span>
</div>
</td>
<td class="align-middle text-primary">$12.00</td>
<td class="align-middle text-secondary">18 Jan</td>
<td class="align-middle text-success">Completed</td>
</tr>
<tr class="js-datatabale-details" data-details='
<div class="border rounded p-5">
<h4 class="h3">Invoice</h4>
<div class="row mb-6">
<div class="col-3">
<span class="text-secondary">Date:</span>
<span class="font-weight-medium">30 Jan, 2018</span>
</div>
<div class="col-3">
<span class="text-secondary">Merchant:</span>
<span class="font-weight-medium">Htmlstream</span>
</div>
<div class="col-6">
<span class="text-secondary">Authorization code:</span>
<span class="font-weight-medium">7029841902791230</span>
</div>
</div>
<div class="row">
<div class="col-sm-6 mb-3 mb-sm-0">
<h5 class="text-dark font-size-14 text-uppercase">Billing address:</h5>
<address class="text-secondary">
<span class="d-block text-dark font-size-20 font-weight-medium mb-2">Htmlstream</span>
Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
</address>
</div>
<div class="col-sm-6">
<h5 class="text-dark font-size-14 text-uppercase">Client info:</h5>
<ul class="list-unstyled mb-0">
<li class="mb-2">
<span class="text-secondary">First name:</span>
<span class="font-weight-medium">Natalie</span>
</li>
<li class="mb-2">
<span class="text-secondary">Last name:</span>
<span class="font-weight-medium">Curtis</span>
</li>
<li class="mb-2">
<span class="text-secondary">Country:</span>
<span class="font-weight-medium">England</span>
</li>
</ul>
</div>
</div>
<div class="row justify-content-end mb-4">
<div class="col-sm-6">
<hr class="my-4">
<h5 class="text-dark font-size-14 text-uppercase">Transaction details:</h5>
<ul class="list-unstyled mb-0">
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Transaction amount</span>
<span class="font-weight-medium">86.93 USD</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Fee</span>
<span class="font-weight-medium">$0.50</span>
</li>
<li class="d-flex justify-content-between align-items-center mb-2">
<span class="text-secondary">Total amount</span>
<span class="text-primary font-weight-medium">87.43 USD</span>
</li>
</ul>
</div>
</div>
<ul class="list-inline mb-0">
<li class="list-inline-item u-ver-divider pr-3 mr-3">
<a href="#">
<span class="fa fa-file-word text-secondary mr-1"></span>
Download invoice
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa fa-print text-secondary mr-1"></span>
Print details
</a>
</li>
</ul>
</div>'>
<td class="align-middle">
<div class="custom-control custom-checkbox d-flex align-items-center">
<input type="checkbox" class="custom-control-input" id="invoiceCheckbox24">
<label class="custom-control-label" for="invoiceCheckbox24">
<span class="text-hide">Checkbox</span>
</label>
</div>
</td>
<td class="align-middle text-secondary font-weight-normal u-datatable__trigger-icon">FR0024</td>
<td class="align-middle">
<div class="media align-items-center">
<span class="u-icon u-icon-dark--air rounded-circle mr-2">
<span class="u-icon__inner font-weight-medium">H</span>
</span>
<span>Htmlstream</span>
</div>
</td>
<td class="align-middle text-primary">$87.43</td>
<td class="align-middle text-secondary">30 Jan</td>
<td class="align-middle text-success">Completed</td>
</tr>
</tbody>
</table>
</div>
<!-- End Activity Table -->
<!-- Pagination -->
<div class="d-flex justify-content-between align-items-center">
<nav id="datatablePagination" aria-label="Activity pagination"></nav>
<small id="datatableInfo" class="text-secondary"></small>
</div>
<!-- End Pagination -->
CSS library:
<link rel="stylesheet" href="assets/vendor/flatpickr/dist/flatpickr.min.css">
<link rel="stylesheet" href="assets/vendor/bootstrap-select/dist/css/bootstrap-select.min.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/vendor/datatables/media/js/jquery.dataTables.min.js"></script>
<script src="assets/vendor/flatpickr/dist/flatpickr.min.js"></script>
<script src="assets/vendor/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="assets/js/helpers/hs.range-datepicker.js"></script>
<script src="assets/js/helpers/hs.datatables.js"></script>
<script src="assets/js/helpers/hs.selectpicker.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of range datepicker
$.HSCore.components.HSRangeDatepicker.init('.js-range-datepicker');
// initialization of datatables
$.HSCore.components.HSDatatables.init('.js-datatable');
// initialization of select picker
$.HSCore.components.HSSelectPicker.init('.js-select');
});
</script>