## 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 border-translucent rounded-2 p-3 bg-primary-subtle"><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-translucent fs-9 mb-0">
          <thead>
            <tr>
              <th class="white-space-nowrap fs-9 align-middle ps-0" style="max-width:20px; width:18px;">
                <div class="form-check mb-0 fs-8"><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-9 align-middle">
                <div class="form-check mb-0 fs-8"><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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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-9 align-middle">
                <div class="form-check mb-0 fs-8"><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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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-9 align-middle">
                <div class="form-check mb-0 fs-8"><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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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-9 align-middle">
                <div class="form-check mb-0 fs-8"><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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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-9 align-middle">
                <div class="form-check mb-0 fs-8"><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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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-9 align-middle">
                <div class="form-check mb-0 fs-8"><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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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-9 align-middle">
                <div class="form-check mb-0 fs-8"><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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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-9 align-middle">
                <div class="form-check mb-0 fs-8"><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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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-9 align-middle">
                <div class="form-check mb-0 fs-8"><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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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-9 align-middle">
                <div class="form-check mb-0 fs-8"><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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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-9 align-middle">
                <div class="form-check mb-0 fs-8"><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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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-9 align-middle">
                <div class="form-check mb-0 fs-8"><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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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-9 align-middle">
                <div class="form-check mb-0 fs-8"><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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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-9 align-middle">
                <div class="form-check mb-0 fs-8"><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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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-9 align-middle">
                <div class="form-check mb-0 fs-8"><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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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-9">
          <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-semibold" href="#!" data-list-view="*">
            View all
            <span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span>
          </a><a class="fw-semibold 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 |
| Homer | homer@example.com | 35 |
| Oscar | oscar@example.com | 52 |
| Emily | emily@example.com | 30 |
| Jara | jara@example.com | 25 |
| Clark | clark@example.com | 39 |
| Jennifer | jennifer@example.com | 52 |
| Tony | tony@example.com | 30 |
| Tom | tom@example.com | 25 |
| Michael | michael@example.com | 39 |
| Antony | antony@example.com | 39 |
| Raymond | raymond@example.com | 52 |
| Marie | marie@example.com | 30 |
| Cohen | cohen@example.com | 25 |
| Rowen | rowen@example.com | 39 |

— View all View Less

Click the button to get selected rows

##### On this page

##### 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.

##### Theme Customizer

Explore different styles according to your preferences

##### Color Scheme

Light
Dark
Auto

##### RTL

Change text direction

##### Support Chat

Toggle support chat

##### Navigation Type

Vertical
Horizontal
Combo
Dual nav

##### Vertical Navbar Appearance

Default Default
Darker Lighter

##### Horizontal Navbar Shape

Default
Slim

##### Horizontal Navbar Appearance

Default
Darker Lighter
Purchase template
customize