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 date
Status
Home page redesign Spotify Highest 25 Jul In progress
Logo branding Dropbox Medium 12 Aug In progress
Website redesign Google 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
                  
                    <!-- Transaction Table -->
                    <div class="table-responsive-md u-datatable">
                      <table class="js-datatable table table-borderless u-datatable__striped u-datatable__content"
                             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-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-1">
                            <th scope="col" class="font-weight-medium">
                              <div class="d-flex justify-content-between align-items-center">
                                Task
                                <div class="ml-2">
                                  <span class="fas fa-angle-up u-datatable__thead-icon"></span>
                                  <span class="fas 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="fas fa-angle-up u-datatable__thead-icon"></span>
                                  <span class="fas 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="fas fa-angle-up u-datatable__thead-icon"></span>
                                  <span class="fas 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 date
                                <div class="ml-2">
                                  <span class="fas fa-angle-up u-datatable__thead-icon"></span>
                                  <span class="fas 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="fas fa-angle-up u-datatable__thead-icon"></span>
                                  <span class="fas fa-angle-down u-datatable__thead-icon"></span>
                                </div>
                              </div>
                            </th>
                          </tr>
                        </thead>
                        <tbody class="font-size-1">
                          <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="fas fa-arrow-up mr-1"></span>
                              Highest
                            </td>
                            <td class="align-middle">25 Jul</td>
                            <td class="align-middle">
                              <span class="fas 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="fas fa-arrow-up mr-1"></span>
                              Medium
                            </td>
                            <td class="align-middle">12 Aug</td>
                            <td class="align-middle">
                              <span class="fas 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="fas fa-arrow-up mr-1"></span>
                              High
                            </td>
                            <td class="align-middle">15 Aug</td>
                            <td class="align-middle">
                              <span class="fas 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="fas fa-arrow-up mr-1"></span>
                              Medium
                            </td>
                            <td class="align-middle">01 Aug</td>
                            <td class="align-middle">
                              <span class="fas 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="fas fa-arrow-down mr-1"></span>
                              Lowest
                            </td>
                            <td class="align-middle">02 Aug</td>
                            <td class="align-middle">
                              <span class="fas 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="fas fa-arrow-up mr-1"></span>
                              High
                            </td>
                            <td class="align-middle">05 Sep</td>
                            <td class="align-middle">
                              <span class="fas 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="fas fa-arrow-up mr-1"></span>
                              High
                            </td>
                            <td class="align-middle">15 Sep</td>
                            <td class="align-middle">
                              <span class="fas 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="fas fa-arrow-down mr-1"></span>
                              Low
                            </td>
                            <td class="align-middle">16 Sep</td>
                            <td class="align-middle">
                              <span class="fas fa-circle text-warning small mr-1"></span>
                              On hold
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                    <!-- End Transaction Table -->
                  
                
                  
                    <!-- JS Implementing Plugins -->
                    <script src="../../assets/vendor/datatables/media/js/jquery.dataTables.min.js"></script>

                    <!-- JS Front -->
                    <script src="../../assets/js/components/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
S Spotify
$9.00 05 May Rejected
FR002
D Dropbox
$257.93 12 May Completed
FR003
G Google
$441.99 15 May Completed
FR004
F FrontApp
$99.00 01 Jun Pending
FR005
S Slack
$14.89 02 Jun Rejected
FR006
D Spotify
$9.00 05 Jun Completed
FR007
H Htmlstream
$1,579.99 15 Jun Completed
FR008
G GitHub
$235.85 16 Apr Rejected
FR009
D Dropbox
$12.31 12 Apr Completed
FR0010
G Google
$891.00 29 Apr Completed
FR0011
A Atlassian
$321.11 30 Apr Pending
FR0012
S Slack
$16.29 02 Mar Rejected
FR0013
D Spotify
$4.00 01 Mar Completed
FR0014
H Htmlstream
$3,462.00 23 Mar Completed
FR0015
S Spotify
$9.00 27 Mar Rejected
FR0016
D Dropbox
$196.73 04 Feb Completed
FR0017
G Google
$235.99 18 Feb Completed
FR0018
F FrontApp
$34.00 21 Feb Pending
FR0019
S Slack
$72.89 28 Feb Rejected
FR0020
D Spotify
$9.00 05 Jan Completed
FR0021
H Htmlstream
$7,485.00 15 Jan Completed
FR0022
S Slack
$76.00 22 Jan Rejected
FR0023
D Spotify
$12.00 18 Jan Completed
FR0024
H Htmlstream
$87.43 30 Jan Completed
                  
                    <div class="card">
                      <div class="card-header py-4 px-0 mx-4">
                        <!-- 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="js-focus-state u-datepicker w-auto input-group input-group-sm">
                              <div class="input-group-prepend">
                                <span class="input-group-text">
                                  <span class="fas fa-calendar"></span>
                                </span>
                              </div>
                              <input type="text" class="js-range-datepicker form-control bg-white rounded-right"
                                     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 selectpicker dropdown-select" data-width="fit" data-style="btn-soft-primary 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">
                                <div class="input-group-prepend">
                                  <span class="input-group-text" id="searchActivities">
                                    <span class="fas fa-search"></span>
                                  </span>
                                </div>
                                <input id="datatableSearch" type="email" class="form-control" placeholder="Search activities" aria-label="Search activities" aria-describedby="searchActivities">
                              </div>
                              <!-- End Search -->
                            </div>
                          </div>
                        </div>
                        <!-- End Activity Menu -->
                      </div>

                      <div class="card-body p-4">
                        <!-- 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-1">
                                <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="fas fa-angle-up u-datatable__thead-icon"></span>
                                      <span class="fas 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="fas fa-angle-up u-datatable__thead-icon"></span>
                                      <span class="fas 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="fas fa-angle-up u-datatable__thead-icon"></span>
                                      <span class="fas 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="fas fa-angle-up u-datatable__thead-icon"></span>
                                      <span class="fas 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="fas fa-angle-up u-datatable__thead-icon"></span>
                                      <span class="fas fa-angle-down u-datatable__thead-icon"></span>
                                    </div>
                                  </div>
                                </th>
                              </tr>
                            </thead>
                            <tbody class="font-size-1">
                              <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-1 text-uppercase">Billing address:</h5>
                                      <address class="text-secondary">
                                        <h6 class="h5 text-dark">Spotify</h6>
                                        Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
                                      </address>
                                    </div>

                                    <div class="col-sm-6">
                                      <h5 class="text-dark font-size-1 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-1 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="fas fa-file-word text-secondary mr-1"></span>
                                        Download invoice
                                      </a>
                                    </li>
                                    <li class="list-inline-item">
                                      <a href="#">
                                        <span class="fas 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="btn btn-sm btn-icon btn-soft-success rounded-circle mr-2">
                                      <span class="btn-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-1 text-uppercase">Billing address:</h5>
                                      <address class="text-secondary">
                                        <h6 class="h5 text-dark">Dropbox</h6>
                                        Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
                                      </address>
                                    </div>

                                    <div class="col-sm-6">
                                      <h5 class="text-dark font-size-1 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-1 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="fas fa-file-word text-secondary mr-1"></span>
                                        Download invoice
                                      </a>
                                    </li>
                                    <li class="list-inline-item">
                                      <a href="#">
                                        <span class="fas 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="btn btn-sm btn-icon btn-soft-primary rounded-circle mr-2">
                                      <span class="btn-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-1 text-uppercase">Billing address:</h5>
                                      <address class="text-secondary">
                                        <h6 class="h5 text-dark">Google</h6>
                                        Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
                                      </address>
                                    </div>

                                    <div class="col-sm-6">
                                      <h5 class="text-dark font-size-1 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-1 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="fas fa-file-word text-secondary mr-1"></span>
                                        Download invoice
                                      </a>
                                    </li>
                                    <li class="list-inline-item">
                                      <a href="#">
                                        <span class="fas 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="btn btn-sm btn-icon btn-soft-danger rounded-circle mr-2">
                                      <span class="btn-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-1 text-uppercase">Billing address:</h5>
                                      <address class="text-secondary">
                                        <h6 class="h5 text-dark">FrontApp</h6>
                                        Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
                                      </address>
                                    </div>

                                    <div class="col-sm-6">
                                      <h5 class="text-dark font-size-1 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-1 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="fas fa-file-word text-secondary mr-1"></span>
                                        Download invoice
                                      </a>
                                    </li>
                                    <li class="list-inline-item">
                                      <a href="#">
                                        <span class="fas 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="btn btn-sm btn-icon btn-soft-primary rounded-circle mr-2">
                                      <span class="btn-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-1 text-uppercase">Billing address:</h5>
                                      <address class="text-secondary">
                                        <h6 class="h5 text-dark">Slack</h6>
                                        Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
                                      </address>
                                    </div>

                                    <div class="col-sm-6">
                                      <h5 class="text-dark font-size-1 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-1 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="fas fa-file-word text-secondary mr-1"></span>
                                        Download invoice
                                      </a>
                                    </li>
                                    <li class="list-inline-item">
                                      <a href="#">
                                        <span class="fas 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="btn btn-sm btn-icon btn-soft-warning rounded-circle mr-2">
                                      <span class="btn-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-1 text-uppercase">Billing address:</h5>
                                      <address class="text-secondary">
                                        <h6 class="h5 text-dark">Spotify</h6>
                                        Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
                                      </address>
                                    </div>

                                    <div class="col-sm-6">
                                      <h5 class="text-dark font-size-1 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-1 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="fas fa-file-word text-secondary mr-1"></span>
                                        Download invoice
                                      </a>
                                    </li>
                                    <li class="list-inline-item">
                                      <a href="#">
                                        <span class="fas 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="btn btn-sm btn-icon btn-soft-success rounded-circle mr-2">
                                      <span class="btn-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-1 text-uppercase">Billing address:</h5>
                                      <address class="text-secondary">
                                        <h6 class="h5 text-dark">Htmlstream</h6>
                                        Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
                                      </address>
                                    </div>

                                    <div class="col-sm-6">
                                      <h5 class="text-dark font-size-1 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-1 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="fas fa-file-word text-secondary mr-1"></span>
                                        Download invoice
                                      </a>
                                    </li>
                                    <li class="list-inline-item">
                                      <a href="#">
                                        <span class="fas 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="btn btn-sm btn-icon btn-soft-dark rounded-circle mr-2">
                                      <span class="btn-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-1 text-uppercase">Billing address:</h5>
                                      <address class="text-secondary">
                                        <h6 class="h5 text-dark">Spotify</h6>
                                        Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
                                      </address>
                                    </div>

                                    <div class="col-sm-6">
                                      <h5 class="text-dark font-size-1 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-1 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="fas fa-file-word text-secondary mr-1"></span>
                                        Download invoice
                                      </a>
                                    </li>
                                    <li class="list-inline-item">
                                      <a href="#">
                                        <span class="fas 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="btn btn-sm btn-icon btn-soft-dark rounded-circle mr-2">
                                      <span class="btn-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-1 text-uppercase">Billing address:</h5>
                                      <address class="text-secondary">
                                        <h6 class="h5 text-dark">Dropbox</h6>
                                        Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
                                      </address>
                                    </div>

                                    <div class="col-sm-6">
                                      <h5 class="text-dark font-size-1 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-1 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="fas fa-file-word text-secondary mr-1"></span>
                                        Download invoice
                                      </a>
                                    </li>
                                    <li class="list-inline-item">
                                      <a href="#">
                                        <span class="fas 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="btn btn-sm btn-icon btn-soft-primary rounded-circle mr-2">
                                      <span class="btn-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-1 text-uppercase">Billing address:</h5>
                                      <address class="text-secondary">
                                        <h6 class="h5 text-dark">Google</h6>
                                        Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
                                      </address>
                                    </div>

                                    <div class="col-sm-6">
                                      <h5 class="text-dark font-size-1 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-1 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="fas fa-file-word text-secondary mr-1"></span>
                                        Download invoice
                                      </a>
                                    </li>
                                    <li class="list-inline-item">
                                      <a href="#">
                                        <span class="fas 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="btn btn-sm btn-icon btn-soft-danger rounded-circle mr-2">
                                      <span class="btn-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-1 text-uppercase">Billing address:</h5>
                                      <address class="text-secondary">
                                        <h6 class="h5 text-dark">Atlassian</h6>
                                        Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
                                      </address>
                                    </div>

                                    <div class="col-sm-6">
                                      <h5 class="text-dark font-size-1 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-1 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="fas fa-file-word text-secondary mr-1"></span>
                                        Download invoice
                                      </a>
                                    </li>
                                    <li class="list-inline-item">
                                      <a href="#">
                                        <span class="fas 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="btn btn-sm btn-icon btn-soft-primary rounded-circle mr-2">
                                      <span class="btn-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-1 text-uppercase">Billing address:</h5>
                                      <address class="text-secondary">
                                        <h6 class="h5 text-dark">Slack</h6>
                                        Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
                                      </address>
                                    </div>

                                    <div class="col-sm-6">
                                      <h5 class="text-dark font-size-1 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-1 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="fas fa-file-word text-secondary mr-1"></span>
                                        Download invoice
                                      </a>
                                    </li>
                                    <li class="list-inline-item">
                                      <a href="#">
                                        <span class="fas 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="btn btn-sm btn-icon btn-soft-warning rounded-circle mr-2">
                                      <span class="btn-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-1 text-uppercase">Billing address:</h5>
                                      <address class="text-secondary">
                                        <h6 class="h5 text-dark">Spotify</h6>
                                        Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
                                      </address>
                                    </div>

                                    <div class="col-sm-6">
                                      <h5 class="text-dark font-size-1 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-1 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="fas fa-file-word text-secondary mr-1"></span>
                                        Download invoice
                                      </a>
                                    </li>
                                    <li class="list-inline-item">
                                      <a href="#">
                                        <span class="fas 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="btn btn-sm btn-icon btn-soft-success rounded-circle mr-2">
                                      <span class="btn-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-1 text-uppercase">Billing address:</h5>
                                      <address class="text-secondary">
                                        <h6 class="h5 text-dark">Htmlstream</h6>
                                        Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
                                      </address>
                                    </div>

                                    <div class="col-sm-6">
                                      <h5 class="text-dark font-size-1 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-1 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="fas fa-file-word text-secondary mr-1"></span>
                                        Download invoice
                                      </a>
                                    </li>
                                    <li class="list-inline-item">
                                      <a href="#">
                                        <span class="fas 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="btn btn-sm btn-icon btn-soft-dark rounded-circle mr-2">
                                      <span class="btn-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-1 text-uppercase">Billing address:</h5>
                                      <address class="text-secondary">
                                        <h6 class="h5 text-dark">Spotify</h6>
                                        Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
                                      </address>
                                    </div>

                                    <div class="col-sm-6">
                                      <h5 class="text-dark font-size-1 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-1 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="fas fa-file-word text-secondary mr-1"></span>
                                        Download invoice
                                      </a>
                                    </li>
                                    <li class="list-inline-item">
                                      <a href="#">
                                        <span class="fas 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="btn btn-sm btn-icon btn-soft-success rounded-circle mr-2">
                                      <span class="btn-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-1 text-uppercase">Billing address:</h5>
                                      <address class="text-secondary">
                                        <h6 class="h5 text-dark">Dropbox</h6>
                                        Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
                                      </address>
                                    </div>

                                    <div class="col-sm-6">
                                      <h5 class="text-dark font-size-1 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-1 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="fas fa-file-word text-secondary mr-1"></span>
                                        Download invoice
                                      </a>
                                    </li>
                                    <li class="list-inline-item">
                                      <a href="#">
                                        <span class="fas 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="btn btn-sm btn-icon btn-soft-primary rounded-circle mr-2">
                                      <span class="btn-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-1 text-uppercase">Billing address:</h5>
                                      <address class="text-secondary">
                                        <h6 class="h5 text-dark">Google</h6>
                                        Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
                                      </address>
                                    </div>

                                    <div class="col-sm-6">
                                      <h5 class="text-dark font-size-1 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-1 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="fas fa-file-word text-secondary mr-1"></span>
                                        Download invoice
                                      </a>
                                    </li>
                                    <li class="list-inline-item">
                                      <a href="#">
                                        <span class="fas 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="btn btn-sm btn-icon btn-soft-danger rounded-circle mr-2">
                                      <span class="btn-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-1 text-uppercase">Billing address:</h5>
                                      <address class="text-secondary">
                                        <h6 class="h5 text-dark">FrontApp</h6>
                                        Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
                                      </address>
                                    </div>

                                    <div class="col-sm-6">
                                      <h5 class="text-dark font-size-1 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-1 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="fas fa-file-word text-secondary mr-1"></span>
                                        Download invoice
                                      </a>
                                    </li>
                                    <li class="list-inline-item">
                                      <a href="#">
                                        <span class="fas 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="btn btn-sm btn-icon btn-soft-primary rounded-circle mr-2">
                                      <span class="btn-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-1 text-uppercase">Billing address:</h5>
                                      <address class="text-secondary">
                                        <h6 class="h5 text-dark">S</h6>
                                        Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
                                      </address>
                                    </div>

                                    <div class="col-sm-6">
                                      <h5 class="text-dark font-size-1 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-1 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="fas fa-file-word text-secondary mr-1"></span>
                                        Download invoice
                                      </a>
                                    </li>
                                    <li class="list-inline-item">
                                      <a href="#">
                                        <span class="fas 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="btn btn-sm btn-icon btn-soft-warning rounded-circle mr-2">
                                      <span class="btn-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-1 text-uppercase">Billing address:</h5>
                                      <address class="text-secondary">
                                        <h6 class="h5 text-dark">Spotify</h6>
                                        Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
                                      </address>
                                    </div>

                                    <div class="col-sm-6">
                                      <h5 class="text-dark font-size-1 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-1 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="fas fa-file-word text-secondary mr-1"></span>
                                        Download invoice
                                      </a>
                                    </li>
                                    <li class="list-inline-item">
                                      <a href="#">
                                        <span class="fas 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="btn btn-sm btn-icon btn-soft-success rounded-circle mr-2">
                                      <span class="btn-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-1 text-uppercase">Billing address:</h5>
                                      <address class="text-secondary">
                                        <h6 class="h5 text-dark">Htmlstream</h6>
                                        Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
                                      </address>
                                    </div>

                                    <div class="col-sm-6">
                                      <h5 class="text-dark font-size-1 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-1 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="fas fa-file-word text-secondary mr-1"></span>
                                        Download invoice
                                      </a>
                                    </li>
                                    <li class="list-inline-item">
                                      <a href="#">
                                        <span class="fas 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="btn btn-sm btn-icon btn-soft-dark rounded-circle mr-2">
                                      <span class="btn-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-1 text-uppercase">Billing address:</h5>
                                      <address class="text-secondary">
                                        <h6 class="h5 text-dark">Slack</h6>
                                        Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
                                      </address>
                                    </div>

                                    <div class="col-sm-6">
                                      <h5 class="text-dark font-size-1 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-1 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="fas fa-file-word text-secondary mr-1"></span>
                                        Download invoice
                                      </a>
                                    </li>
                                    <li class="list-inline-item">
                                      <a href="#">
                                        <span class="fas 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="btn btn-sm btn-icon btn-soft-warning rounded-circle mr-2">
                                      <span class="btn-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-1 text-uppercase">Billing address:</h5>
                                      <address class="text-secondary">
                                        <h6 class="h5 text-dark">Spotify</h6>
                                        Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
                                      </address>
                                    </div>

                                    <div class="col-sm-6">
                                      <h5 class="text-dark font-size-1 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-1 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="fas fa-file-word text-secondary mr-1"></span>
                                        Download invoice
                                      </a>
                                    </li>
                                    <li class="list-inline-item">
                                      <a href="#">
                                        <span class="fas 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="btn btn-sm btn-icon btn-soft-success rounded-circle mr-2">
                                      <span class="btn-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-1 text-uppercase">Billing address:</h5>
                                      <address class="text-secondary">
                                        <h6 class="h5 text-dark">Htmlstream</h6>
                                        Flat 60, Ross Green, South Lilyberg, Q7M 8ZV
                                      </address>
                                    </div>

                                    <div class="col-sm-6">
                                      <h5 class="text-dark font-size-1 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-1 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="fas fa-file-word text-secondary mr-1"></span>
                                        Download invoice
                                      </a>
                                    </li>
                                    <li class="list-inline-item">
                                      <a href="#">
                                        <span class="fas 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="btn btn-sm btn-icon btn-soft-dark rounded-circle mr-2">
                                      <span class="btn-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 -->
                      </div>
                    </div>
                  
                
                  
                    <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 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 Front -->
                    <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>
                    <script src="../../assets/js/components/hs.focus-state.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');

                        // initialization of forms
                        $.HSCore.components.HSFocusState.init();
                      });
                    </script>