Datatables

Showcase your latest works with a jQuery grid plugin that provides powerful portfolio system, beautiful animated filtering or any other ordered grid content.

Datatables documentation

How to use?

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

<script src="../../assets/vendor/datatables.net/js/jquery.dataTables.min.js"></script>

Copy-paste the following <script> near the end of your pages under JS Front to enable it.

<script src="../../assets/js/hs.datatables.js"></script>

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

<script>
  $(document).on('ready', function () {
    // initialization of datatables
    var datatable = $.HSCore.components.HSDatatables.init($('#datatable'));
  });
</script>

Show entries

Search:

Order	Client	Amount	Date	Status
FR001	Spotify	$9.00	05 May	Rejected
FR002	Dropbox	$257.93	12 May	Completed
FR003	Google	$441.99	15 May	Completed
FR004	FrontApp	$99.00	01 Jun	Pending
FR005	Slack	$14.89	02 Jun	Rejected
FR006	Spotify	$9.00	05 Jun	Completed
FR007	Htmlstream	$1,579.99	15 Jun	Completed
FR008	GitHub	$235.85	16 Apr	Rejected
FR009	Dropbox	$12.31	12 Apr	Completed
FR0010	Google	$891.00	29 Apr	Completed

Showing 1 to 10 of 12 entries

1
2

<div class="table-responsive-md datatable">
  <table id="datatable" class="table table-borderless datatable-striped datatable-content datatable-trigger mb-5">
    <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">
            Order
            <div class="ml-2">
              <i class="fas fa-angle-up datatable-thead-icon"></i>
              <i class="fas fa-angle-down datatable-thead-icon"></i>
            </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">
              <i class="fas fa-angle-up datatable-thead-icon"></i>
              <i class="fas fa-angle-down datatable-thead-icon"></i>
            </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">
              <i class="fas fa-angle-up datatable-thead-icon"></i>
              <i class="fas fa-angle-down datatable-thead-icon"></i>
            </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">
              <i class="fas fa-angle-up datatable-thead-icon"></i>
              <i class="fas fa-angle-down datatable-thead-icon"></i>
            </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">
              <i class="fas fa-angle-up datatable-thead-icon"></i>
              <i class="fas fa-angle-down datatable-thead-icon"></i>
            </div>
          </div>
        </th>
      </tr>
    </thead>
    <tbody class="font-size-1">
      <tr>
        <td class="align-middle text-body">FR001</td>
        <td>
          <span>Spotify</span>
        </td>
        <td class="align-middle text-primary">$9.00</td>
        <td class="align-middle text-body">05 May</td>
        <td class="align-middle text-danger">Rejected</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR002</td>
        <td>
          <span>Dropbox</span>
        </td>
        <td class="align-middle text-primary">$257.93</td>
        <td class="align-middle text-body">12 May</td>
        <td class="align-middle text-success">Completed</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR003</td>
        <td>
          <span>Google</span>
        </td>
        <td class="align-middle text-primary">$441.99</td>
        <td class="align-middle text-body">15 May</td>
        <td class="align-middle text-success">Completed</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR004</td>
        <td>
          <span>FrontApp</span>
        </td>
        <td class="align-middle text-primary">$99.00</td>
        <td class="align-middle text-body">01 Jun</td>
        <td class="align-middle text-warning">Pending</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR005</td>
        <td>
          <span>Slack</span>
        </td>
        <td class="align-middle text-primary">$14.89</td>
        <td class="align-middle text-body">02 Jun</td>
        <td class="align-middle text-danger">Rejected</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR006</td>
        <td>
          <span>Spotify</span>
        </td>
        <td class="align-middle text-primary">$9.00</td>
        <td class="align-middle text-body">05 Jun</td>
        <td class="align-middle text-success">Completed</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR007</td>
        <td>
          <span>Htmlstream</span>
        </td>
        <td class="align-middle text-primary">$1,579.99</td>
        <td class="align-middle text-body">15 Jun</td>
        <td class="align-middle text-success">Completed</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR008</td>
        <td>
          <span>GitHub</span>
        </td>
        <td class="align-middle text-primary">$235.85</td>
        <td class="align-middle text-body">16 Apr</td>
        <td class="align-middle text-danger">Rejected</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR009</td>
        <td>
          <span>Dropbox</span>
        </td>
        <td class="align-middle text-primary">$12.31</td>
        <td class="align-middle text-body">12 Apr</td>
        <td class="align-middle text-success">Completed</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR0010</td>
        <td>
          <span>Google</span>
        </td>
        <td class="align-middle text-primary">$891.00</td>
        <td class="align-middle text-body">29 Apr</td>
        <td class="align-middle text-success">Completed</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR0011</td>
        <td>
          <span>Atlassian</span>
        </td>
        <td class="align-middle text-primary">$321.11</td>
        <td class="align-middle text-body">30 Apr</td>
        <td class="align-middle text-warning">Pending</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR0012</td>
        <td>
          <span>Slack</span>
        </td>
        <td class="align-middle text-primary">$16.29</td>
        <td class="align-middle text-body">02 Mar</td>
        <td class="align-middle text-danger">Rejected</td>
      </tr>
    </tbody>
  </table>
</div>

With pagination

Preview
HTML

Show entries

Search:

Order	Client	Amount	Date	Status
FR001	Spotify	$9.00	05 May	Rejected
FR002	Dropbox	$257.93	12 May	Completed
FR003	Google	$441.99	15 May	Completed
FR004	FrontApp	$99.00	01 Jun	Pending
FR005	Slack	$14.89	02 Jun	Rejected
FR006	Spotify	$9.00	05 Jun	Completed
FR007	Htmlstream	$1,579.99	15 Jun	Completed
FR008	GitHub	$235.85	16 Apr	Rejected
FR009	Dropbox	$12.31	12 Apr	Completed
FR0010	Google	$891.00	29 Apr	Completed
FR0011	Atlassian	$321.11	30 Apr	Pending
FR0012	Slack	$16.29	02 Mar	Rejected

Showing 1 to 12 of 24 entries

Showing of 24 entries

<div class="table-responsive-md datatable">
  <table id="datatableWithPagination" class="table table-borderless datatable-striped datatable-content datatable-trigger mb-5"
         data-hs-datatables-options='{
           "info": {
             "currentInterval": "#datatableWithPaginationInfoCurrentInterval",
             "totalQty": "#datatableWithPaginationInfoTotalQty"
           },
           "pageLength": 12,
           "isResponsive": false,
           "isShowPaging": true,
           "pagination": "datatablePagination",
           "paginationClasses": "pagination mb-0"
         }'>
    <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">
            Order
            <div class="ml-2">
              <i class="fas fa-angle-up datatable-thead-icon"></i>
              <i class="fas fa-angle-down datatable-thead-icon"></i>
            </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">
              <i class="fas fa-angle-up datatable-thead-icon"></i>
              <i class="fas fa-angle-down datatable-thead-icon"></i>
            </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">
              <i class="fas fa-angle-up datatable-thead-icon"></i>
              <i class="fas fa-angle-down datatable-thead-icon"></i>
            </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">
              <i class="fas fa-angle-up datatable-thead-icon"></i>
              <i class="fas fa-angle-down datatable-thead-icon"></i>
            </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">
              <i class="fas fa-angle-up datatable-thead-icon"></i>
              <i class="fas fa-angle-down datatable-thead-icon"></i>
            </div>
          </div>
        </th>
      </tr>
    </thead>
    <tbody class="font-size-1">
      <tr>
        <td class="align-middle text-body">FR001</td>
        <td>
          <span>Spotify</span>
        </td>
        <td class="align-middle text-primary">$9.00</td>
        <td class="align-middle text-body">05 May</td>
        <td class="align-middle text-danger">Rejected</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR002</td>
        <td>
          <span>Dropbox</span>
        </td>
        <td class="align-middle text-primary">$257.93</td>
        <td class="align-middle text-body">12 May</td>
        <td class="align-middle text-success">Completed</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR003</td>
        <td>
          <span>Google</span>
        </td>
        <td class="align-middle text-primary">$441.99</td>
        <td class="align-middle text-body">15 May</td>
        <td class="align-middle text-success">Completed</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR004</td>
        <td>
          <span>FrontApp</span>
        </td>
        <td class="align-middle text-primary">$99.00</td>
        <td class="align-middle text-body">01 Jun</td>
        <td class="align-middle text-warning">Pending</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR005</td>
        <td>
          <span>Slack</span>
        </td>
        <td class="align-middle text-primary">$14.89</td>
        <td class="align-middle text-body">02 Jun</td>
        <td class="align-middle text-danger">Rejected</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR006</td>
        <td>
          <span>Spotify</span>
        </td>
        <td class="align-middle text-primary">$9.00</td>
        <td class="align-middle text-body">05 Jun</td>
        <td class="align-middle text-success">Completed</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR007</td>
        <td>
          <span>Htmlstream</span>
        </td>
        <td class="align-middle text-primary">$1,579.99</td>
        <td class="align-middle text-body">15 Jun</td>
        <td class="align-middle text-success">Completed</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR008</td>
        <td>
          <span>GitHub</span>
        </td>
        <td class="align-middle text-primary">$235.85</td>
        <td class="align-middle text-body">16 Apr</td>
        <td class="align-middle text-danger">Rejected</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR009</td>
        <td>
          <span>Dropbox</span>
        </td>
        <td class="align-middle text-primary">$12.31</td>
        <td class="align-middle text-body">12 Apr</td>
        <td class="align-middle text-success">Completed</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR0010</td>
        <td>
          <span>Google</span>
        </td>
        <td class="align-middle text-primary">$891.00</td>
        <td class="align-middle text-body">29 Apr</td>
        <td class="align-middle text-success">Completed</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR0011</td>
        <td>
          <span>Atlassian</span>
        </td>
        <td class="align-middle text-primary">$321.11</td>
        <td class="align-middle text-body">30 Apr</td>
        <td class="align-middle text-warning">Pending</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR0012</td>
        <td>
          <span>Slack</span>
        </td>
        <td class="align-middle text-primary">$16.29</td>
        <td class="align-middle text-body">02 Mar</td>
        <td class="align-middle text-danger">Rejected</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR0013</td>
        <td>
          <span>Spotify</span>
        </td>
        <td class="align-middle text-primary">$4.00</td>
        <td class="align-middle text-body">01 Mar</td>
        <td class="align-middle text-success">Completed</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR0014</td>
        <td>
          <span>Htmlstream</span>
        </td>
        <td class="align-middle text-primary">$3,462.00</td>
        <td class="align-middle text-body">23 Mar</td>
        <td class="align-middle text-success">Completed</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR0015</td>
        <td>
          <span>Spotify</span>
        </td>
        <td class="align-middle text-primary">$9.00</td>
        <td class="align-middle text-body">27 Mar</td>
        <td class="align-middle text-danger">Rejected</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR0016</td>
        <td>
          <span>Dropbox</span>
        </td>
        <td class="align-middle text-primary">$196.73</td>
        <td class="align-middle text-body">04 Feb</td>
        <td class="align-middle text-success">Completed</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR0017</td>
        <td>
          <span>Google</span>
        </td>
        <td class="align-middle text-primary">$235.99</td>
        <td class="align-middle text-body">18 Feb</td>
        <td class="align-middle text-success">Completed</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR0018</td>
        <td>
          <span>FrontApp</span>
        </td>
        <td class="align-middle text-primary">$34.00</td>
        <td class="align-middle text-body">21 Feb</td>
        <td class="align-middle text-warning">Pending</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR0019</td>
        <td>
          <span>Slack</span>
        </td>
        <td class="align-middle text-primary">$72.89</td>
        <td class="align-middle text-body">28 Feb</td>
        <td class="align-middle text-danger">Rejected</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR0020</td>
        <td>
          <span>Spotify</span>
        </td>
        <td class="align-middle text-primary">$9.00</td>
        <td class="align-middle text-body">05 Jan</td>
        <td class="align-middle text-success">Completed</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR0021</td>
        <td>
          <span>Htmlstream</span>
        </td>
        <td class="align-middle text-primary">$7,485.00</td>
        <td class="align-middle text-body">15 Jan</td>
        <td class="align-middle text-success">Completed</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR0022</td>
        <td>
          <span>Slack</span>
        </td>
        <td class="align-middle text-primary">$76.00</td>
        <td class="align-middle text-body">22 Jan</td>
        <td class="align-middle text-danger">Rejected</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR0023</td>
        <td>
          <span>Spotify</span>
        </td>
        <td class="align-middle text-primary">$12.00</td>
        <td class="align-middle text-body">18 Jan</td>
        <td class="align-middle text-success">Completed</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR0024</td>
        <td>
          <span>Htmlstream</span>
        </td>
        <td class="align-middle text-primary">$87.43</td>
        <td class="align-middle text-body">30 Jan</td>
        <td class="align-middle text-success">Completed</td>
      </tr>
    </tbody>
  </table>
</div>

<!-- Pagination -->
<div class="d-flex justify-content-between align-items-center">
  <nav id="datatablePagination" aria-label="Activity pagination"></nav>
  <small class="text-body">
    Showing <span id="datatableWithPaginationInfoCurrentInterval"></span> of <span id="datatableWithPaginationInfoTotalQty"></span> entries
  </small>
</div>
<!-- End Pagination -->

With search

Preview
HTML

Show entries

Search:

Order	Client	Amount	Date	Status
FR001	Spotify	$9.00	05 May	Rejected
FR002	Dropbox	$257.93	12 May	Completed
FR003	Google	$441.99	15 May	Completed
FR004	FrontApp	$99.00	01 Jun	Pending
FR005	Slack	$14.89	02 Jun	Rejected
FR006	Spotify	$9.00	05 Jun	Completed
FR007	Htmlstream	$1,579.99	15 Jun	Completed
FR008	GitHub	$235.85	16 Apr	Rejected
FR009	Dropbox	$12.31	12 Apr	Completed
FR0010	Google	$891.00	29 Apr	Completed
FR0011	Atlassian	$321.11	30 Apr	Pending
FR0012	Slack	$16.29	02 Mar	Rejected
FR0013	Spotify	$4.00	01 Mar	Completed
FR0014	Htmlstream	$3,462.00	23 Mar	Completed
FR0015	Spotify	$9.00	27 Mar	Rejected
FR0016	Dropbox	$196.73	04 Feb	Completed
FR0017	Google	$235.99	18 Feb	Completed
FR0018	FrontApp	$34.00	21 Feb	Pending
FR0019	Slack	$72.89	28 Feb	Rejected
FR0020	Spotify	$9.00	05 Jan	Completed
FR0021	Htmlstream	$7,485.00	15 Jan	Completed
FR0022	Slack	$76.00	22 Jan	Rejected
FR0023	Spotify	$12.00	18 Jan	Completed
FR0024	Htmlstream	$87.43	30 Jan	Completed

Showing 1 to 24 of 24 entries

1

<!-- Search -->
<div class="input-group input-group-sm mb-4">
  <div class="input-group-prepend">
    <span class="input-group-text bg-white">
      <i class="fas fa-search"></i>
    </span>
  </div>
  <input id="datatableSearch" class="form-control" type="email" placeholder="Search activities" aria-label="Search activities">
</div>
<!-- End Search -->

<div class="table-responsive-md datatable">
  <table id="datatableWithSearch" class="table table-borderless datatable-striped datatable-content datatable-trigger mb-5"
         data-hs-datatables-options='{
           "search": "#datatableSearch",
           "pageLength": 24
         }'>
    <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">
            Order
            <div class="ml-2">
              <i class="fas fa-angle-up datatable-thead-icon"></i>
              <i class="fas fa-angle-down datatable-thead-icon"></i>
            </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">
              <i class="fas fa-angle-up datatable-thead-icon"></i>
              <i class="fas fa-angle-down datatable-thead-icon"></i>
            </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">
              <i class="fas fa-angle-up datatable-thead-icon"></i>
              <i class="fas fa-angle-down datatable-thead-icon"></i>
            </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">
              <i class="fas fa-angle-up datatable-thead-icon"></i>
              <i class="fas fa-angle-down datatable-thead-icon"></i>
            </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">
              <i class="fas fa-angle-up datatable-thead-icon"></i>
              <i class="fas fa-angle-down datatable-thead-icon"></i>
            </div>
          </div>
        </th>
      </tr>
    </thead>
    <tbody class="font-size-1">
      <tr>
        <td class="align-middle text-body">FR001</td>
        <td>
          <span>Spotify</span>
        </td>
        <td class="align-middle text-primary">$9.00</td>
        <td class="align-middle text-body">05 May</td>
        <td class="align-middle text-danger">Rejected</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR002</td>
        <td>
          <span>Dropbox</span>
        </td>
        <td class="align-middle text-primary">$257.93</td>
        <td class="align-middle text-body">12 May</td>
        <td class="align-middle text-success">Completed</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR003</td>
        <td>
          <span>Google</span>
        </td>
        <td class="align-middle text-primary">$441.99</td>
        <td class="align-middle text-body">15 May</td>
        <td class="align-middle text-success">Completed</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR004</td>
        <td>
          <span>FrontApp</span>
        </td>
        <td class="align-middle text-primary">$99.00</td>
        <td class="align-middle text-body">01 Jun</td>
        <td class="align-middle text-warning">Pending</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR005</td>
        <td>
          <span>Slack</span>
        </td>
        <td class="align-middle text-primary">$14.89</td>
        <td class="align-middle text-body">02 Jun</td>
        <td class="align-middle text-danger">Rejected</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR006</td>
        <td>
          <span>Spotify</span>
        </td>
        <td class="align-middle text-primary">$9.00</td>
        <td class="align-middle text-body">05 Jun</td>
        <td class="align-middle text-success">Completed</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR007</td>
        <td>
          <span>Htmlstream</span>
        </td>
        <td class="align-middle text-primary">$1,579.99</td>
        <td class="align-middle text-body">15 Jun</td>
        <td class="align-middle text-success">Completed</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR008</td>
        <td>
          <span>GitHub</span>
        </td>
        <td class="align-middle text-primary">$235.85</td>
        <td class="align-middle text-body">16 Apr</td>
        <td class="align-middle text-danger">Rejected</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR009</td>
        <td>
          <span>Dropbox</span>
        </td>
        <td class="align-middle text-primary">$12.31</td>
        <td class="align-middle text-body">12 Apr</td>
        <td class="align-middle text-success">Completed</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR0010</td>
        <td>
          <span>Google</span>
        </td>
        <td class="align-middle text-primary">$891.00</td>
        <td class="align-middle text-body">29 Apr</td>
        <td class="align-middle text-success">Completed</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR0011</td>
        <td>
          <span>Atlassian</span>
        </td>
        <td class="align-middle text-primary">$321.11</td>
        <td class="align-middle text-body">30 Apr</td>
        <td class="align-middle text-warning">Pending</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR0012</td>
        <td>
          <span>Slack</span>
        </td>
        <td class="align-middle text-primary">$16.29</td>
        <td class="align-middle text-body">02 Mar</td>
        <td class="align-middle text-danger">Rejected</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR0013</td>
        <td>
          <span>Spotify</span>
        </td>
        <td class="align-middle text-primary">$4.00</td>
        <td class="align-middle text-body">01 Mar</td>
        <td class="align-middle text-success">Completed</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR0014</td>
        <td>
          <span>Htmlstream</span>
        </td>
        <td class="align-middle text-primary">$3,462.00</td>
        <td class="align-middle text-body">23 Mar</td>
        <td class="align-middle text-success">Completed</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR0015</td>
        <td>
          <span>Spotify</span>
        </td>
        <td class="align-middle text-primary">$9.00</td>
        <td class="align-middle text-body">27 Mar</td>
        <td class="align-middle text-danger">Rejected</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR0016</td>
        <td>
          <span>Dropbox</span>
        </td>
        <td class="align-middle text-primary">$196.73</td>
        <td class="align-middle text-body">04 Feb</td>
        <td class="align-middle text-success">Completed</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR0017</td>
        <td>
          <span>Google</span>
        </td>
        <td class="align-middle text-primary">$235.99</td>
        <td class="align-middle text-body">18 Feb</td>
        <td class="align-middle text-success">Completed</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR0018</td>
        <td>
          <span>FrontApp</span>
        </td>
        <td class="align-middle text-primary">$34.00</td>
        <td class="align-middle text-body">21 Feb</td>
        <td class="align-middle text-warning">Pending</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR0019</td>
        <td>
          <span>Slack</span>
        </td>
        <td class="align-middle text-primary">$72.89</td>
        <td class="align-middle text-body">28 Feb</td>
        <td class="align-middle text-danger">Rejected</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR0020</td>
        <td>
          <span>Spotify</span>
        </td>
        <td class="align-middle text-primary">$9.00</td>
        <td class="align-middle text-body">05 Jan</td>
        <td class="align-middle text-success">Completed</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR0021</td>
        <td>
          <span>Htmlstream</span>
        </td>
        <td class="align-middle text-primary">$7,485.00</td>
        <td class="align-middle text-body">15 Jan</td>
        <td class="align-middle text-success">Completed</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR0022</td>
        <td>
          <span>Slack</span>
        </td>
        <td class="align-middle text-primary">$76.00</td>
        <td class="align-middle text-body">22 Jan</td>
        <td class="align-middle text-danger">Rejected</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR0023</td>
        <td>
          <span>Spotify</span>
        </td>
        <td class="align-middle text-primary">$12.00</td>
        <td class="align-middle text-body">18 Jan</td>
        <td class="align-middle text-success">Completed</td>
      </tr>

      <tr>
        <td class="align-middle text-body">FR0024</td>
        <td>
          <span>Htmlstream</span>
        </td>
        <td class="align-middle text-primary">$87.43</td>
        <td class="align-middle text-body">30 Jan</td>
        <td class="align-middle text-success">Completed</td>
      </tr>
    </tbody>
  </table>
</div>

SCSS

SCSS-files of the component can be found here assets/scss/front/vendor/datatable/

Extend

By assigning a variable, you can call the standard methods of the plugin:

<script>
  $(document).on('ready', function () {
    // initialization of datatables
    $('.table').each(function () {
      var datatable = $.HSCore.components.HSDatatables.init($(this));

      datatable.on('draw', function () {
        console.log('Table redrawn');
      });
    });
  });
</script>

Attributes

By assigning a variable, you can call the standard methods of the plugin:

data-hs-datatables-options='{
   ...

   // Custom
   "info": {
     "currentInterval": "#ID",
     "totalQty": "#ID",
     "divider": " to "
   },
   "isSelectable": false,
   "isColumnsSearch": false,
   "isColumnsSearchTheadAfter": false,
   "Pagination": "#ID",
   "paginationClasses": "pagination",
   "paginationLinksClasses": "page-link",
   "paginationItemsClasses": "page-item",
   "paginationPrevClasses": "page-item",
   "paginationPrevLinkClasses": "page-link",
   "paginationPrevLinkMarkup": "<span aria-hidden=\"true\">Prev</span>",
   "paginationNextClasses": "page-item",
   "paginationNextLinkClasses": "page-link",
   "paginationNextLinkMarkup": "<span aria-hidden=\"true\">Next</span>",
   "detailsInvoker": ".invoker",
   "selectAllControl": "#ID"
}' - array

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-circles-options='{}'. For more detailed or missing attributes/functions, see the official Datatables documentation page.

Parameters	Description	Default value
`info.currentInterval`	ID of the block in which the index of the first row visible in the table will be generated	`null`
`info.totalQty`	ID of the block in which the index of the last row visible in the table will be generated	`null`
`info.divider`	Index separator	`'to'`
`isSelectable`	If `true`, then includes the ability to select row by click, like a checkbox	`false`
`isColumnsSearch`	If `true`, then includes a mode in which it is possible to filter individual columns	`false`
`isColumnsSearchTheadAfter`	If `true`, it transfers the filter immediately after `thead`, otherwise it displays as `tfoot`	`false`
`pagination`	ID of the block in which pagination will be generated	`null`
`paginationClasses`	Pagination classes	`'pagination'`
`paginationLinksClasses`	Pagination links classes	`'page-link'`
`paginationItemsClasses`	Pagination items classes	`'page-item'`
`paginationPrevClasses`	Classes for the `prev` element	`'page-item'`
`paginationNextClasses`	Classes for the `next` element	`'page-item'`
`paginationPrevLinkClasses`	Classes for the link in the `prev` button	`'page-link'`
`paginationNextLinkClasses`	Classes for the link in the `next` button	`'page-link'`
`paginationPrevLinkMarkup`	`prev` button classes	`'<span aria-hidden="true">Prev</span>'`
`paginationNextLinkMarkup`	`next` button classes	`'<span aria-hidden="true">Prev</span>'`
`detailsInvoker`	Selector, clicking on which opens a detailed description	`null`
`selectAllControl`	Selector, when clicked, all checkboxes become `checked`	`null`

Datatables

How to use?

Basic example

With pagination

With search

SCSS

JavaScript behavior

Extend

Attributes

Methods