List

Tiny, invisible and simple, yet powerful and incredibly fast vanilla JavaScript that adds search, sort, filters and flexibility to plain HTML lists, tables, or anything.

<script src="js/vendor/list.js"></script>

var existingHtmlList = new List('existingHtmlList', {valueNames: ['name', 'position']});

<div class="card">
  <div class="card-body mb-n2" id="existingHtmlList">
    <!-- class="search" automagically makes the input a search field. -->
    <div class="search-input-container border border-separator rounded-md bg-foreground mb-4">
      <input class="form-control search" type="text" autocomplete="off" placeholder="Search" />
      <span class="search-magnifier-icon">
        <i data-acorn-icon="search"></i>
      </span>
    </div>

    <!-- Child elements of container with class="list" becomes list items -->
    <div class="list">
      <div class="row g-0 sh-6 mb-2">
        <div class="col-auto">
          <img src="img/profile/profile-1.webp" class="card-img rounded-xl sh-6 sw-6" alt="thumb" />
        </div>
        <div class="col">
          <div class="card-body d-flex flex-row pt-0 pb-0 ps-3 pe-0 h-100 align-items-center justify-content-between">
            <div class="d-flex flex-column">
              <!-- class="name" and class="position" provides the data -->
              <div class="name">Blaine Cottrell</div>
              <div class="text-small text-muted position">Project Manager</div>
            </div>
            <div class="d-flex">
              <button type="button" class="btn btn-outline-primary btn-sm ms-1">Follow</button>
            </div>
          </div>
        </div>
      </div>
      <div class="row g-0 sh-6 mb-2">
        <div class="col-auto">
          <img src="img/profile/profile-2.webp" class="card-img rounded-xl sh-6 sw-6" alt="thumb" />
        </div>
        <div class="col">
          <div class="card-body d-flex flex-row pt-0 pb-0 ps-3 pe-0 h-100 align-items-center justify-content-between">
            <div class="d-flex flex-column">
              <div class="name">Cherish Kerr</div>
              <div class="text-small text-muted position">Development Lead</div>
            </div>
            <div class="d-flex">
              <button type="button" class="btn btn-outline-primary btn-sm ms-1">Follow</button>
            </div>
          </div>
        </div>
      </div>
      <div class="row g-0 sh-6 mb-2">
        <div class="col-auto">
          <img src="img/profile/profile-3.webp" class="card-img rounded-xl sh-6 sw-6" alt="thumb" />
        </div>
        <div class="col">
          <div class="card-body d-flex flex-row pt-0 pb-0 ps-3 pe-0 h-100 align-items-center justify-content-between">
            <div class="d-flex flex-column">
              <div class="name">Kirby Peters</div>
              <div class="text-small text-muted position">Accounting</div>
            </div>
            <div class="d-flex">
              <button type="button" class="btn btn-outline-primary btn-sm ms-1">Follow</button>
            </div>
          </div>
        </div>
      </div>
      <div class="row g-0 sh-6 mb-2">
        <div class="col-auto">
          <img src="img/profile/profile-4.webp" class="card-img rounded-xl sh-6 sw-6" alt="thumb" />
        </div>
        <div class="col">
          <div class="card-body d-flex flex-row pt-0 pb-0 ps-3 pe-0 h-100 align-items-center justify-content-between">
            <div class="d-flex flex-column">
              <div class="name">Olli Hawkins</div>
              <div class="text-small text-muted position">Client Relations Lead</div>
            </div>
            <div class="d-flex">
              <button type="button" class="btn btn-outline-primary btn-sm ms-1">Follow</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

You may find more examples in Interface.Plugins.List.html file which is initialized by js/plugins/list.js.