<div class="container my-5 animation fade-in">

<h1 class="mb-5">Sortable <span class="text-danger">Table</span></h1>

  <p class="mb-5">

The code snippet is <strong>re-initializing popover</strong> components within a data 

table every time the table is sorted. This is necessary because sorting 

the table can dynamically alter or recreate elements in the DOM, 

potentially disrupting the previously initialized popovers. 

By re-initializing them after each sort action, we ensure that the 

popover functionality is maintained regardless of how the table's 

content is reordered.

  </p>

​

<div class="datatable" id="my-datatable">

  <table>

    <thead>

      <tr>

        <th class="th-sm">Button 1 (Click here to sort)</th>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td><button

            type="button"

            data-mdb-toggle="popover"

            class="btn btn-danger"

            title="Popover title"

            data-mdb-content="And here's some amazing content. It's very engaging. Right?"

            data-mdb-trigger="focus"

          >

          Click to toggle popover

        </button></td>

      </tr>

      <tr>

        <td><button

            type="button"

            data-mdb-toggle="popover"

            class="btn btn-dark"

            title="Popover title"

            data-mdb-content="And here's some amazing content. It's very engaging. Right?"

            data-mdb-trigger="focus"

          >

          Click to toggle popover

        </button></td>

      </tr>

    </tbody>

  </table>

</div>

</div>

​

<footer class="text-center bg-body-tertiary">

  <!-- Grid container -->

  <div class="container pt-4">

    <!-- Section: Social media -->

    <section class="mb-4">

      <!-- Facebook -->

      <a

        class="btn btn-link btn-floating btn-lg text-body m-1"

        href="#!"

        role="button"

        data-mdb-ripple-color="dark"

        ><i class="fab fa-facebook-f"></i

      ></a>

​

      <!-- Twitter -->

      <a

        class="btn btn-link btn-floating btn-lg text-body m-1"

        href="#!"

        role="button"

        data-mdb-ripple-color="dark"

        ><i class="fab fa-twitter"></i

      ></a>

​

      <!-- Google -->

      <a

        class="btn btn-link btn-floating btn-lg text-body m-1"

        href="#!"

        role="button"

        data-mdb-ripple-color="dark"

        ><i class="fab fa-google"></i

      ></a>

​

      <!-- Instagram -->

      <a

        class="btn btn-link btn-floating btn-lg text-body m-1"

        href="#!"

        role="button"

        data-mdb-ripple-color="dark"

        ><i class="fab fa-instagram"></i

      ></a>

      <!-- Linkedin -->

      <a

        class="btn btn-link btn-floating btn-lg text-body m-1"

        href="#!"

        role="button"

        data-mdb-ripple-color="dark"

        ><i class="fab fa-linkedin"></i

      ></a>

      <!-- Github -->

      <a

        class="btn btn-link btn-floating btn-lg text-body m-1"

        href="#!"

        role="button"

        data-mdb-ripple-color="dark"

        ><i class="fab fa-github"></i

      ></a>

    </section>

    <!-- Section: Social media -->

  </div>

  <!-- Grid container -->

​

  <!-- Copyright -->

  <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.05);">

    © 2020 Copyright:

    <a class="text-body" href="https://mdbootstrap.com/">MDBootstrap.com</a>

  </div>

  <!-- Copyright -->

</footer>