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-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 attribute data-bulk-select-row.
  • 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)
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 6 
<div class="card">
  <div class="card-header">
    <div class="d-flex align-items-center justify-content-between">
      <h5 class="mb-0" data-anchor="data-anchor">Example</h5>
      <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>
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table mb-0">
        <thead class="text-black bg-200">
          <tr>
            <th class="align-middle white-space-nowrap">
              <div class="form-check mb-0">
                <input class="form-check-input" type="checkbox" data-bulk-select='{"body":"bulk-select-body","actions":"bulk-select-actions","replacedElement":"bulk-select-replace-element"}' />
              </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 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="data-bulk-select-row" />
              </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="data-bulk-select-row" />
              </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="data-bulk-select-row" />
              </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="data-bulk-select-row" />
              </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="data-bulk-select-row" />
              </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="data-bulk-select-row" />
              </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>
    </div>
  </div>
  <div class="card-footer"><small>showing 6 of 6</small>
  </div>
</div>

Thank you for creating with Falcon |
2021 © Themewagon

v3.0.0-beta4

customize