Phoenix

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	anna@example.com	18	View Export Remove
Homer	homer@example.com	35	View Export Remove
Oscar	oscar@example.com	52	View Export Remove
Emily	emily@example.com	30	View Export Remove
Jara	jara@example.com	25	View Export Remove
Clark	clark@example.com	39	View Export Remove
Jennifer	jennifer@example.com	52	View Export Remove
Tony	tony@example.com	30	View Export Remove
Tom	tom@example.com	25	View Export Remove
Michael	michael@example.com	39	View Export Remove
Antony	antony@example.com	39	View Export Remove
Raymond	raymond@example.com	52	View Export Remove
Marie	marie@example.com	30	View Export Remove
Cohen	cohen@example.com	25	View Export Remove
Rowen	rowen@example.com	39	View Export Remove

— View all View Less

Click the button to get selected rows

Demo widget

I need help with something

I can’t reorder a product I previously ordered

How do I place an order?

My payment method not working

Eric

Ask us anything – we’ll get back to you here or by email within 24 hours.

MacBook Air - 13″

MacBook Pro - 13″

Carry Anna

John Smith

Jessie Samson

Jane Foster

Jessie Samson

Kiera Anderson

Herman Carter

Benjamin Button

Jessie Samson

Jane Foster

Jessie Samson

Kiera Anderson

Herman Carter

Benjamin Button

Forms

Icons

ECharts

Components

Tables

Utilities

Jessie Samson

Jane Foster

Jessie Samson

Kiera Anderson

Herman Carter

Benjamin Button

Forms

Icons

ECharts

Components

Tables

Utilities

Jessie Samson

Jane Foster

Jessie Samson

Kiera Anderson

Herman Carter

Benjamin Button

Forms

Icons

ECharts

Components

Tables

Utilities

Jessie Samson

Jane Foster

Jessie Samson

Kiera Anderson

Herman Carter

Benjamin Button

Forms

Icons

ECharts

Components

Tables

Utilities

Jessie Samson

Jane Foster

Jessie Samson

Kiera Anderson

Herman Carter

Benjamin Button

MacBook Air - 13″

MacBook Pro - 13″

Carry Anna

John Smith

Notificatons

Jessie Samson

Jane Foster

Jessie Samson

Kiera Anderson

Herman Carter

Benjamin Button

Jerry Seinfield

Forms

Icons

ECharts

Components