Datatables

Tables plug-in for jQuery

// Css
<link rel="stylesheet" href="css/vendor/datatables.min.css" />

// Javascript
<script src="js/vendor/datatables.min.js"></script>
<script src="js/cs/datatable.extend.js"></script>

jQuery('.data-table-standard').DataTable({
  destroy: true,
  paging: true,
  buttons: ['copy', 'excel', 'csv', 'print'],
  length: 10,
  columnDefs: [
    // Adding Name content as an anchor with a target #
    {
      targets: 0,
      render: function (data, type, row, meta) {
        return '<a class="list-item-heading body" href="#">' + data + '</a>';
      },
    },
  ],
  sDom: '<"row"<"col-sm-12"<"table-container"t>r>><"row"<"col-12"p>>',
  responsive: true,
  language: {
    paginate: {
      previous: '<i class="cs-chevron-left"></i>',
      next: '<i class="cs-chevron-right"></i>',
    },
  },
});

<div class="card mb-5">
  <div class="card-body">
    <!-- Pagination Controls Start -->
    <div class="row">
      <div class="col-12 col-sm-5 col-lg-3 col-xxl-2 mb-1">
        <div class="d-inline-block float-md-start me-1 mb-1 search-input-container w-100 border border-separator bg-foreground search-sm">
          <input class="form-control form-control-sm datatable-search" placeholder="Search" data-datatable="#datatablePagination" />
          <span class="search-magnifier-icon">
            <i data-acorn-icon="search"></i>
          </span>
          <span class="search-delete-icon d-none">
            <i data-acorn-icon="close"></i>
          </span>
        </div>
      </div>
      <div class="col-12 col-sm-7 col-lg-9 col-xxl-10 text-end mb-1">
        <div class="d-inline-block">
          <button
            class="btn btn-icon btn-icon-only btn-outline-muted btn-sm datatable-print"
            type="button"
            data-datatable="#datatablePagination"
          >
            <i data-acorn-icon="print"></i>
          </button>

          <div class="d-inline-block datatable-export" data-datatable="#datatablePagination">
            <button
              class="btn btn-icon btn-icon-only btn-outline-muted btn-sm dropdown"
              data-bs-toggle="dropdown"
              type="button"
              data-bs-offset="0,3"
            >
              <i data-acorn-icon="download"></i>
            </button>
            <div class="dropdown-menu dropdown-menu-sm dropdown-menu-end">
              <button class="dropdown-item export-copy" type="button">Copy</button>
              <button class="dropdown-item export-excel" type="button">Excel</button>
              <button class="dropdown-item export-cvs" type="button">Cvs</button>
            </div>
          </div>
          <div class="dropdown-as-select d-inline-block datatable-length" data-datatable="#datatablePagination">
            <button
              class="btn btn-outline-muted btn-sm dropdown-toggle"
              type="button"
              data-bs-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
              data-bs-offset="0,3"
            >
              10 Items
            </button>
            <div class="dropdown-menu dropdown-menu-sm dropdown-menu-end">
              <a class="dropdown-item" href="#">5 Items</a>
              <a class="dropdown-item active" href="#">10 Items</a>
              <a class="dropdown-item" href="#">20 Items</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Pagination Controls End -->

    <!-- Pagination Table Start -->
    <table
      class="data-table data-table-pagination data-table-standard responsive nowrap"
      id="datatablePagination"
      data-order='[[ 0, "desc" ]]'
    >
      <thead>
        <tr>
          <th class="text-muted text-small text-uppercase">Name</th>
          <th class="text-muted text-small text-uppercase">Sales</th>
          <th class="text-muted text-small text-uppercase">Stock</th>
          <th class="text-muted text-small text-uppercase">Category</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Pita</td>
          <td class="text-alternate">1452</td>
          <td class="text-alternate">62</td>
          <td class="text-alternate">Whole Wheat</td>
        </tr>
        <tr>
          <td>Pane Ticinese</td>
          <td class="text-alternate">1414</td>
          <td class="text-alternate">85</td>
          <td class="text-alternate">Multigrain</td>
        </tr>
        <tr>
          <td>Pandoro</td>
          <td class="text-alternate">1401</td>
          <td class="text-alternate">21</td>
          <td class="text-alternate">Whole Wheat</td>
        </tr>
        <tr>
          <td>Naan</td>
          <td class="text-alternate">1387</td>
          <td class="text-alternate">114</td>
          <td class="text-alternate">Multigrain</td>
        </tr>
        <tr>
          <td>Michetta</td>
          <td class="text-alternate">1356</td>
          <td class="text-alternate">27</td>
          <td class="text-alternate">Multigrain</td>
        </tr>
        <tr>
          <td>Damper</td>
          <td class="text-alternate">1323</td>
          <td class="text-alternate">57</td>
          <td class="text-alternate">Multigrain</td>
        </tr>
        <tr>
          <td>Cozonac</td>
          <td class="text-alternate">1301</td>
          <td class="text-alternate">11</td>
          <td class="text-alternate">Sourdough</td>
        </tr>
        <tr>
          <td>Spelt Bread</td>
          <td class="text-alternate">1287</td>
          <td class="text-alternate">94</td>
          <td class="text-alternate">Multigrain</td>
        </tr>
        <tr>
          <td>Zopf</td>
          <td class="text-alternate">1261</td>
          <td class="text-alternate">37</td>
          <td class="text-alternate">Multigrain</td>
        </tr>
        <tr>
          <td>Arepa</td>
          <td class="text-alternate">1245</td>
          <td class="text-alternate">65</td>
          <td class="text-alternate">Whole Wheat</td>
        </tr>
        <tr>
          <td>Barmbrack</td>
          <td class="text-alternate">1218</td>
          <td class="text-alternate">19</td>
          <td class="text-alternate">Whole Wheat</td>
        </tr>
        <tr>
          <td>Bublik</td>
          <td class="text-alternate">1200</td>
          <td class="text-alternate">45</td>
          <td class="text-alternate">Multigrain</td>
        </tr>
        <tr>
          <td>Chapati</td>
          <td class="text-alternate">1192</td>
          <td class="text-alternate">22</td>
          <td class="text-alternate">Sourdough</td>
        </tr>
        <tr>
          <td>Eggette</td>
          <td class="text-alternate">1176</td>
          <td class="text-alternate">48</td>
          <td class="text-alternate">Multigrain</td>
        </tr>
        <tr>
          <td>Hallulla</td>
          <td class="text-alternate">1154</td>
          <td class="text-alternate">13</td>
          <td class="text-alternate">Multigrain</td>
        </tr>
        <tr>
          <td>Kifli</td>
          <td class="text-alternate">1150</td>
          <td class="text-alternate">4</td>
          <td class="text-alternate">Whole Wheat</td>
        </tr>
        <tr>
          <td>Lángos</td>
          <td class="text-alternate">1108</td>
          <td class="text-alternate">87</td>
          <td class="text-alternate">Whole Wheat</td>
        </tr>
        <tr>
          <td>Lefse</td>
          <td class="text-alternate">1068</td>
          <td class="text-alternate">43</td>
          <td class="text-alternate">Whole Wheat</td>
        </tr>
        <tr>
          <td>Matzo</td>
          <td class="text-alternate">1050</td>
          <td class="text-alternate">41</td>
          <td class="text-alternate">Sourdough</td>
        </tr>
        <tr>
          <td>Mollete</td>
          <td class="text-alternate">1024</td>
          <td class="text-alternate">12</td>
          <td class="text-alternate">Sourdough</td>
        </tr>
      </tbody>
    </table>
    <!-- Pagination Table End -->
  </div>
</div>

You may find more examples in below files:

Javascripts for Initialization of these files are below:

js/plugins/datatable.ajax.js
js/plugins/datatable.boxedvariations.js
js/plugins/datatable.editableboxed.js
js/plugins/datatable.editablerows.js
js/plugins/datatable.serverside.js