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 four main parts:
  1. The main checkbox, which is used for checking all the other checkboxes, the class checkbox-bulk-select is used to define that item.
  2. The target checkboxes are wrapped using a unique id, in this example bulk-select-body. Every targeted checkbox within this wrapper is marked as checkbox-bulk-select-target. The id bulk-select-body is used to hook it to the main checkbox with data-checkbox-body="#bulk-select-body"
  3. The element with id bulk-select-actions will be toggled by checking the main checkbox, which is hooked using data-checkbox-actions="#bulk-select-actions"
  4. Bulk select actions will be replaced with the content of bulk-select-replace-element id, which is hooked using data-checkbox-replaced-element="#bulk-select-replace-element"
Example
 Name Nationality Gender Age
Kit Harington British Male 32
Emilia Clarke British Female 32
Peter Dinklage American Male 49
Sean Bean British Male 59
Maisie Williams British Female 21
Sophie Turner British Female 23
showing 6 of 342
<div class="card">
  <div class="card-header d-flex align-items-center justify-content-between border-top py-0">
    <h5 class="mb-0 py-card">Example</h5>
    <div id="bulk-select-replace-element"><button class="btn btn-falcon-default btn-sm" type="button"><span class="fas fa-plus" data-fa-transform="shrink-3 down-2"></span><span class="ml-1">New</span></button></div>
    <div class="d-none ml-3" id="bulk-select-actions">
      <div class="input-group input-group-sm">
        <select class="custom-select" aria-label="Bulk actions">
          <option selected="">Bulk actions</option>
          <option value="Delete">Delete</option>
          <option value="Archive">Archive</option>
        </select>
        <button class="btn btn-falcon-default btn-sm ml-2" type="button">Apply</button>
      </div>
    </div>
  </div>
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table table-sm table-dashboard fs--1 mb-0">
        <thead class="bg-200 text-black">
          <tr>
            <th class="align-middle white-space-nowrap">
              <div class="custom-control custom-checkbox ml-3">
                <input class="custom-control-input checkbox-bulk-select" id="checkbox-bulk-select" type="checkbox" data-checkbox-body="#bulk-select-body" data-checkbox-actions="#bulk-select-actions" data-checkbox-replaced-element="#bulk-select-replace-element">
                <label class="custom-control-label" for="checkbox-bulk-select"></label>
              </div>
            </th>
            <th class="align-middle">Name</th>
            <th class="align-middle">Nationality </th>
            <th class="align-middle">Gender</th>
            <th class="align-middle white-space-nowrap pr-3">Age</th>
          </tr>
        </thead>
        <tbody id="bulk-select-body">
          <tr>
            <td class="align-middle white-space-nowrap">
              <div class="custom-control custom-checkbox ml-3">
                <input class="custom-control-input checkbox-bulk-select-target" type="checkbox" id="checkbox-1">
                <label class="custom-control-label" for="checkbox-1"></label>
              </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-right pr-3">32</td>
          </tr>
          <tr>
            <td class="align-middle white-space-nowrap">
              <div class="custom-control custom-checkbox ml-3">
                <input class="custom-control-input checkbox-bulk-select-target" type="checkbox" id="checkbox-2">
                <label class="custom-control-label" for="checkbox-2"></label>
              </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-right pr-3">32</td>
          </tr>
          <tr>
            <td class="align-middle white-space-nowrap">
              <div class="custom-control custom-checkbox ml-3">
                <input class="custom-control-input checkbox-bulk-select-target" type="checkbox" id="checkbox-3">
                <label class="custom-control-label" for="checkbox-3"></label>
              </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-right pr-3">49</td>
          </tr>
          <tr>
            <td class="align-middle white-space-nowrap">
              <div class="custom-control custom-checkbox ml-3">
                <input class="custom-control-input checkbox-bulk-select-target" type="checkbox" id="checkbox-4">
                <label class="custom-control-label" for="checkbox-4"></label>
              </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-right pr-3">59</td>
          </tr>
          <tr>
            <td class="align-middle white-space-nowrap">
              <div class="custom-control custom-checkbox ml-3">
                <input class="custom-control-input checkbox-bulk-select-target" type="checkbox" id="checkbox-5">
                <label class="custom-control-label" for="checkbox-5"></label>
              </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-right pr-3">21</td>
          </tr>
          <tr>
            <td class="align-middle white-space-nowrap">
              <div class="custom-control custom-checkbox ml-3">
                <input class="custom-control-input checkbox-bulk-select-target" type="checkbox" id="checkbox-6">
                <label class="custom-control-label" for="checkbox-6"></label>
              </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-right pr-3">23</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="card-footer border-top"><small>showing 6 of 342</small></div>
</div>