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.
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 attributedata-bulk-select-row.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)
Example
<div class="card shadow-none">
<div class="card-body p-0 pb-3">
<div class="d-flex align-items-center justify-content-end my-3">
<div id="bulk-select-replace-element"><button class="btn btn-falcon-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-falcon-danger btn-sm ms-2" type="button">Apply</button></div>
</div>
</div>
<div class="table-responsive scrollbar">
<table class="table mb-0">
<thead class="bg-200">
<tr>
<th class="align-middle white-space-nowrap">
<div class="form-check mb-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="text-black dark__text-white align-middle">Name</th>
<th class="text-black dark__text-white align-middle">Nationality </th>
<th class="text-black dark__text-white align-middle">Gender</th>
<th class="text-black dark__text-white align-middle white-space-nowrap pe-3">Age</th>
</tr>
</thead>
<tbody id="bulk-select-body">
<tr>
<td class="align-middle white-space-nowrap">
<div class="form-check mb-0"><input class="form-check-input" type="checkbox" id="checkbox-1" data-bulk-select-row="{"id":1,"name":"Kit Harington","nationality":"British","gender":"Male","age":32}" /></div>
</td>
<th class="align-middle">Kit Harington</th>
<td class="align-middle">British</td>
<td class="align-middle">Male</td>
<td class="align-middle white-space-nowrap text-end pe-3">32</td>
</tr>
<tr>
<td class="align-middle white-space-nowrap">
<div class="form-check mb-0"><input class="form-check-input" type="checkbox" id="checkbox-2" data-bulk-select-row="{"id":2,"name":"Emilia Clarke","nationality":"British","gender":"Female","age":32}" /></div>
</td>
<th class="align-middle">Emilia Clarke</th>
<td class="align-middle">British</td>
<td class="align-middle">Female</td>
<td class="align-middle white-space-nowrap text-end pe-3">32</td>
</tr>
<tr>
<td class="align-middle white-space-nowrap">
<div class="form-check mb-0"><input class="form-check-input" type="checkbox" id="checkbox-3" data-bulk-select-row="{"id":3,"name":"Peter Dinklage","nationality":"American","gender":"Male","age":49}" /></div>
</td>
<th class="align-middle">Peter Dinklage</th>
<td class="align-middle">American</td>
<td class="align-middle">Male</td>
<td class="align-middle white-space-nowrap text-end pe-3">49</td>
</tr>
<tr>
<td class="align-middle white-space-nowrap">
<div class="form-check mb-0"><input class="form-check-input" type="checkbox" id="checkbox-4" data-bulk-select-row="{"id":4,"name":"Sean Bean","nationality":"British","gender":"Male","age":59}" /></div>
</td>
<th class="align-middle">Sean Bean</th>
<td class="align-middle">British</td>
<td class="align-middle">Male</td>
<td class="align-middle white-space-nowrap text-end pe-3">59</td>
</tr>
<tr>
<td class="align-middle white-space-nowrap">
<div class="form-check mb-0"><input class="form-check-input" type="checkbox" id="checkbox-5" data-bulk-select-row="{"id":5,"name":"Maisie Williams","nationality":"British","gender":"Female","age":21}" /></div>
</td>
<th class="align-middle">Maisie Williams</th>
<td class="align-middle">British</td>
<td class="align-middle">Female</td>
<td class="align-middle white-space-nowrap text-end pe-3">21</td>
</tr>
<tr>
<td class="align-middle white-space-nowrap">
<div class="form-check mb-0"><input class="form-check-input" type="checkbox" id="checkbox-6" data-bulk-select-row="{"id":6,"name":"Sophie Turner","nationality":"British","gender":"Female","age":23}" /></div>
</td>
<th class="align-middle">Sophie Turner</th>
<td class="align-middle">British</td>
<td class="align-middle">Female</td>
<td class="align-middle white-space-nowrap text-end pe-3">23</td>
</tr>
</tbody>
</table>
<p class="mt-3 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>
</div>
</div>
