Bulk Select

Bulk select allows users to check multiple checkboxes at once and toggles a UI for bulk actions to be performed for the selected items.

Docs

<h5>Bulk select consist of this following parts: </h5>
<ul>
  <li>The main checkbox, which is used for checking all the other checkboxes, the attribute <code>data-bulk-select</code> is used to define that item.</li>
  <li>Three(3) elements can be hooked with bulk select: <code>body</code>, <code>actions</code>, <code>replacedElement</code>.
    <pre><code class="language-html">&lt;input class=&quot;form-check-input&quot; type=&quot;checkbox&quot; data-bulk-select='{&quot;body&quot;:&quot;bulk-select-body&quot;,&quot;actions&quot;:&quot;bulk-select-actions&quot;,&quot;replacedElement&quot;:&quot;bulk-select-replace-element&quot;}' /&gt;</code></pre>
    <p class="mb-0">These ids definded in these keys are used to hook the respective elements.</p>
  </li>
  <li><code>body:</code> The target checkboxes are wrapped using a unique id defined in <code>body</code>. In this example <code>bulk-select-body</code>. Every targeted checkbox within this wrapper is marked with the data attribute <code>data-bulk-select-row.</code>You will get the value passed in this attribute as return value of <code>getSelectedRows </code>method in JS.</li>
  <li><code>actions:</code> The target actions are wrapped using a unique id defined in <code>actions</code>. The element with this id (in <code>example bulk-select-actions</code>) will be toggled by checking the main checkbox.</li>
  <li><code>replacedElement:</code> The target replaced element with action are wrapped using a unique id defined in <code>replacedElement</code>. Bulk select actions will be replaced with the content of this element with this id (in example <code>bulk-select-replace-element</code>)</li>
</ul>
<h5>Javascript</h5>
<ul>
  <li><code>getInstance: </code>Static method which allows you to get the <strong>BulkSelect </strong>instance associated to a DOM element, you can use it like this: <code>window.phoenix.BulkSelect.getInstance(element)</code></li>
  <li><code>getSelectedRows: </code>Get the selected rows data by invoking <code>getSelectedRows </code>method on the <code>BulkSelect </code>instance
    <div class="border rounded-2 p-3 bg-primary-100"><code>const bulkSelectEl = document.getElementById('bulk-select-example');</code><br /><code>const bulkSelectInstance = window.phoenix.BulkSelect.getInstance(bulkSelectEl);</code></div>
  </li>
</ul>
Bulk select consist of this following parts:
  • The main checkbox, which is used for checking all the other checkboxes, the attribute data-bulk-select is used to define that item.
  • Three(3) elements can be hooked with bulk select: body, actions, replacedElement.
    <input class="form-check-input" type="checkbox" data-bulk-select='{"body":"bulk-select-body","actions":"bulk-select-actions","replacedElement":"bulk-select-replace-element"}' />

    These ids definded in these keys are used to hook the respective elements.

  • body: The target checkboxes are wrapped using a unique id defined in body. In this example bulk-select-body. Every targeted checkbox within this wrapper is marked with the data attribute data-bulk-select-row.You will get the value passed in this attribute as return value of getSelectedRows method in JS.
  • actions: The target actions are wrapped using a unique id defined in actions. The element with this id (in example bulk-select-actions) will be toggled by checking the main checkbox.
  • replacedElement: The target replaced element with action are wrapped using a unique id defined in replacedElement. Bulk select actions will be replaced with the content of this element with this id (in example bulk-select-replace-element)
Javascript
  • getInstance: Static method which allows you to get the BulkSelect instance associated to a DOM element, you can use it like this: window.phoenix.BulkSelect.getInstance(element)
  • getSelectedRows: Get the selected rows data by invoking getSelectedRows method on the BulkSelect instance
    const bulkSelectEl = document.getElementById('bulk-select-example');
    const bulkSelectInstance = window.phoenix.BulkSelect.getInstance(bulkSelectEl);

Example

<div class="d-flex align-items-center justify-content-end my-3">
  <div id="bulk-select-replace-element">
    <button class="btn btn-phoenix-success btn-sm" type="button"><span class="fas fa-plus" data-fa-transform="shrink-3 down-2"></span><span class="ms-1">New</span></button>
  </div>
  <div class="d-none ms-3" id="bulk-select-actions">
    <div class="d-flex">
      <select class="form-select form-select-sm" aria-label="Bulk actions">
        <option selected="selected">Bulk actions</option>
        <option value="Delete">Delete</option>
        <option value="Archive">Archive</option>
      </select>
      <button class="btn btn-phoenix-danger btn-sm ms-2" type="button">Apply</button>
    </div>
  </div>
</div>
<div id="tableExample" data-list='{"valueNames":["name","email","age"],"page":5,"pagination":true}'>
  <div class="table-responsive mx-n1 px-1">
    <table class="table table-sm border-top border-200 fs--1 mb-0">
      <thead>
        <tr>
          <th class="white-space-nowrap fs--1 align-middle ps-0" style="max-width:20px; width:18px;">
            <div class="form-check mb-0 fs-0">
              <input class="form-check-input" id="bulk-select-example" type="checkbox" data-bulk-select='{"body":"bulk-select-body","actions":"bulk-select-actions","replacedElement":"bulk-select-replace-element"}' />
            </div>
          </th>
          <th class="sort align-middle ps-3" data-sort="name">Name</th>
          <th class="sort align-middle" data-sort="email">Email</th>
          <th class="sort align-middle" data-sort="age">Age</th>
          <th class="sort text-end align-middle pe-0" scope="col">ACTION</th>
        </tr>
      </thead>
      <tbody class="list" id="bulk-select-body">
        <tr>
          <td class="fs--1 align-middle">
            <div class="form-check mb-0 fs-0">
              <input class="form-check-input" type="checkbox" data-bulk-select-row="{&quot;name&quot;:&quot;Anna&quot;,&quot;email&quot;:&quot;anna@example.com&quot;,&quot;age&quot;:18}" />
            </div>
          </td>
          <td class="align-middle ps-3 name">Anna</td>
          <td class="align-middle email">anna@example.com</td>
          <td class="align-middle age">18</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static">
              <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="fs--1 align-middle">
            <div class="form-check mb-0 fs-0">
              <input class="form-check-input" type="checkbox" data-bulk-select-row="{&quot;name&quot;:&quot;Homer&quot;,&quot;email&quot;:&quot;homer@example.com&quot;,&quot;age&quot;:35}" />
            </div>
          </td>
          <td class="align-middle ps-3 name">Homer</td>
          <td class="align-middle email">homer@example.com</td>
          <td class="align-middle age">35</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static">
              <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="fs--1 align-middle">
            <div class="form-check mb-0 fs-0">
              <input class="form-check-input" type="checkbox" data-bulk-select-row="{&quot;name&quot;:&quot;Oscar&quot;,&quot;email&quot;:&quot;oscar@example.com&quot;,&quot;age&quot;:52}" />
            </div>
          </td>
          <td class="align-middle ps-3 name">Oscar</td>
          <td class="align-middle email">oscar@example.com</td>
          <td class="align-middle age">52</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static">
              <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="fs--1 align-middle">
            <div class="form-check mb-0 fs-0">
              <input class="form-check-input" type="checkbox" data-bulk-select-row="{&quot;name&quot;:&quot;Emily&quot;,&quot;email&quot;:&quot;emily@example.com&quot;,&quot;age&quot;:30}" />
            </div>
          </td>
          <td class="align-middle ps-3 name">Emily</td>
          <td class="align-middle email">emily@example.com</td>
          <td class="align-middle age">30</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static">
              <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="fs--1 align-middle">
            <div class="form-check mb-0 fs-0">
              <input class="form-check-input" type="checkbox" data-bulk-select-row="{&quot;name&quot;:&quot;Jara&quot;,&quot;email&quot;:&quot;jara@example.com&quot;,&quot;age&quot;:25}" />
            </div>
          </td>
          <td class="align-middle ps-3 name">Jara</td>
          <td class="align-middle email">jara@example.com</td>
          <td class="align-middle age">25</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static">
              <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="fs--1 align-middle">
            <div class="form-check mb-0 fs-0">
              <input class="form-check-input" type="checkbox" data-bulk-select-row="{&quot;name&quot;:&quot;Clark&quot;,&quot;email&quot;:&quot;clark@example.com&quot;,&quot;age&quot;:39}" />
            </div>
          </td>
          <td class="align-middle ps-3 name">Clark</td>
          <td class="align-middle email">clark@example.com</td>
          <td class="align-middle age">39</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static">
              <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="fs--1 align-middle">
            <div class="form-check mb-0 fs-0">
              <input class="form-check-input" type="checkbox" data-bulk-select-row="{&quot;name&quot;:&quot;Jennifer&quot;,&quot;email&quot;:&quot;jennifer@example.com&quot;,&quot;age&quot;:52}" />
            </div>
          </td>
          <td class="align-middle ps-3 name">Jennifer</td>
          <td class="align-middle email">jennifer@example.com</td>
          <td class="align-middle age">52</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static">
              <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="fs--1 align-middle">
            <div class="form-check mb-0 fs-0">
              <input class="form-check-input" type="checkbox" data-bulk-select-row="{&quot;name&quot;:&quot;Tony&quot;,&quot;email&quot;:&quot;tony@example.com&quot;,&quot;age&quot;:30}" />
            </div>
          </td>
          <td class="align-middle ps-3 name">Tony</td>
          <td class="align-middle email">tony@example.com</td>
          <td class="align-middle age">30</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static">
              <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="fs--1 align-middle">
            <div class="form-check mb-0 fs-0">
              <input class="form-check-input" type="checkbox" data-bulk-select-row="{&quot;name&quot;:&quot;Tom&quot;,&quot;email&quot;:&quot;tom@example.com&quot;,&quot;age&quot;:25}" />
            </div>
          </td>
          <td class="align-middle ps-3 name">Tom</td>
          <td class="align-middle email">tom@example.com</td>
          <td class="align-middle age">25</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static">
              <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="fs--1 align-middle">
            <div class="form-check mb-0 fs-0">
              <input class="form-check-input" type="checkbox" data-bulk-select-row="{&quot;name&quot;:&quot;Michael&quot;,&quot;email&quot;:&quot;michael@example.com&quot;,&quot;age&quot;:39}" />
            </div>
          </td>
          <td class="align-middle ps-3 name">Michael</td>
          <td class="align-middle email">michael@example.com</td>
          <td class="align-middle age">39</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static">
              <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="fs--1 align-middle">
            <div class="form-check mb-0 fs-0">
              <input class="form-check-input" type="checkbox" data-bulk-select-row="{&quot;name&quot;:&quot;Antony&quot;,&quot;email&quot;:&quot;antony@example.com&quot;,&quot;age&quot;:39}" />
            </div>
          </td>
          <td class="align-middle ps-3 name">Antony</td>
          <td class="align-middle email">antony@example.com</td>
          <td class="align-middle age">39</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static">
              <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="fs--1 align-middle">
            <div class="form-check mb-0 fs-0">
              <input class="form-check-input" type="checkbox" data-bulk-select-row="{&quot;name&quot;:&quot;Raymond&quot;,&quot;email&quot;:&quot;raymond@example.com&quot;,&quot;age&quot;:52}" />
            </div>
          </td>
          <td class="align-middle ps-3 name">Raymond</td>
          <td class="align-middle email">raymond@example.com</td>
          <td class="align-middle age">52</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static">
              <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="fs--1 align-middle">
            <div class="form-check mb-0 fs-0">
              <input class="form-check-input" type="checkbox" data-bulk-select-row="{&quot;name&quot;:&quot;Marie&quot;,&quot;email&quot;:&quot;marie@example.com&quot;,&quot;age&quot;:30}" />
            </div>
          </td>
          <td class="align-middle ps-3 name">Marie</td>
          <td class="align-middle email">marie@example.com</td>
          <td class="align-middle age">30</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static">
              <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="fs--1 align-middle">
            <div class="form-check mb-0 fs-0">
              <input class="form-check-input" type="checkbox" data-bulk-select-row="{&quot;name&quot;:&quot;Cohen&quot;,&quot;email&quot;:&quot;cohen@example.com&quot;,&quot;age&quot;:25}" />
            </div>
          </td>
          <td class="align-middle ps-3 name">Cohen</td>
          <td class="align-middle email">cohen@example.com</td>
          <td class="align-middle age">25</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static">
              <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="fs--1 align-middle">
            <div class="form-check mb-0 fs-0">
              <input class="form-check-input" type="checkbox" data-bulk-select-row="{&quot;name&quot;:&quot;Rowen&quot;,&quot;email&quot;:&quot;rowen@example.com&quot;,&quot;age&quot;:39}" />
            </div>
          </td>
          <td class="align-middle ps-3 name">Rowen</td>
          <td class="align-middle email">rowen@example.com</td>
          <td class="align-middle age">39</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static">
              <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="d-flex flex-between-center pt-3 mb-3">
    <div class="pagination d-none"></div>
    <p class="mb-0 fs--1">
      <span class="d-none d-sm-inline-block" data-list-info="data-list-info"></span>
      <span class="d-none d-sm-inline-block"> &mdash; </span>
      <a class="fw-semi-bold" href="#!" data-list-view="*">
        View all
        <span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span>
      </a><a class="fw-semi-bold d-none" href="#!" data-list-view="less">
        View Less
        <span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span>
      </a>
    </p>
    <div class="d-flex">

      <button class="btn btn-sm btn-primary" type="button" data-list-pagination="prev"><span>Previous</span></button>

      <button class="btn btn-sm btn-primary px-4 ms-2" type="button" data-list-pagination="next"><span>Next</span></button>
    </div>
  </div>
  <p class="mb-2">Click the button to get selected rows</p>
  <button class="btn btn-warning" data-selected-rows="data-selected-rows">Get Selected Rows</button>
  <pre id="selectedRows"></pre>
</div>
Name Email Age ACTION
Anna 18
Homer 35
Oscar 52
Emily 30
Jara 25
Clark 39
Jennifer 52
Tony 30
Tom 25
Michael 39
Antony 39
Raymond 52
Marie 30
Cohen 25
Rowen 39

View all View Less

Click the button to get selected rows


                      
On this page

Thank you for creating with Phoenix|
2023 ©Themewagon

v1.9.0

Theme Customizer

Explore different styles according to your preferences

Color Scheme
RTL

Change text direction

Navigation Type
Vertical Navbar Appearance
Horizontal Navbar Shape
Horizontal Navbar Appearance
Purchase template
customize