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"><input class="form-check-input" type="checkbox" data-bulk-select='{"body":"bulk-select-body","actions":"bulk-select-actions","replacedElement":"bulk-select-replace-element"}' /></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-selectis 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 inbody. In this examplebulk-select-body. Every targeted checkbox within this wrapper is marked with the data attributedata-bulk-select-row.You will get the value passed in this attribute as return value ofgetSelectedRowsmethod in JS.actions:The target actions are wrapped using a unique id defined inactions. The element with this id (inexample 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 inreplacedElement. Bulk select actions will be replaced with the content of this element with this id (in examplebulk-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 invokinggetSelectedRowsmethod on theBulkSelectinstanceconst 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="{"name":"Anna","email":"anna@example.com","age":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="{"name":"Homer","email":"homer@example.com","age":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="{"name":"Oscar","email":"oscar@example.com","age":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="{"name":"Emily","email":"emily@example.com","age":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="{"name":"Jara","email":"jara@example.com","age":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="{"name":"Clark","email":"clark@example.com","age":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="{"name":"Jennifer","email":"jennifer@example.com","age":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="{"name":"Tony","email":"tony@example.com","age":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="{"name":"Tom","email":"tom@example.com","age":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="{"name":"Michael","email":"michael@example.com","age":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="{"name":"Antony","email":"antony@example.com","age":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="{"name":"Raymond","email":"raymond@example.com","age":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="{"name":"Marie","email":"marie@example.com","age":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="{"name":"Cohen","email":"cohen@example.com","age":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="{"name":"Rowen","email":"rowen@example.com","age":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"> — </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 | 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 |
|
Click the button to get selected rows