snitchbot | Dashboard & Remote Field Sensing

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:

The main checkbox, which is used for checking all the other checkboxes, the class checkbox-bulk-select is used to define that item.
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"
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"
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">
                <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">
                <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">
                <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">
                <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">
                <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">
                <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">
                <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>