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 
<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" 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="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>

Thank you for creating with Falcon |
2023 © Themewagon

v3.19.0

Settings

Set your own customized style

Color Scheme

Choose the perfect color mode for your app.

RTL Mode

Switch your language direction

RTL Documentation
Fluid Layout

Toggle container layout system

Fluid Documentation
Navigation Position

Select a suitable navigation system for your web application

Vertical Navbar Style

Switch between styles for your vertical navbar

See Documentation

Like What You See?

Get Falcon now and create beautiful dashboards with hundreds of widgets.

Purchase
customize