### 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

Click the button to get selected rows

    <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="{&quot;id&quot;:1,&quot;name&quot;:&quot;Kit Harington&quot;,&quot;nationality&quot;:&quot;British&quot;,&quot;gender&quot;:&quot;Male&quot;,&quot;age&quot;: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="{&quot;id&quot;:2,&quot;name&quot;:&quot;Emilia Clarke&quot;,&quot;nationality&quot;:&quot;British&quot;,&quot;gender&quot;:&quot;Female&quot;,&quot;age&quot;: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="{&quot;id&quot;:3,&quot;name&quot;:&quot;Peter Dinklage&quot;,&quot;nationality&quot;:&quot;American&quot;,&quot;gender&quot;:&quot;Male&quot;,&quot;age&quot;: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="{&quot;id&quot;:4,&quot;name&quot;:&quot;Sean Bean&quot;,&quot;nationality&quot;:&quot;British&quot;,&quot;gender&quot;:&quot;Male&quot;,&quot;age&quot;: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="{&quot;id&quot;:5,&quot;name&quot;:&quot;Maisie Williams&quot;,&quot;nationality&quot;:&quot;British&quot;,&quot;gender&quot;:&quot;Female&quot;,&quot;age&quot;: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="{&quot;id&quot;:6,&quot;name&quot;:&quot;Sophie Turner&quot;,&quot;nationality&quot;:&quot;British&quot;,&quot;gender&quot;:&quot;Female&quot;,&quot;age&quot;: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>

#### Register

Please create your free Falcon account

Name
Email address
Password
Confirm Password
I accept the terms and privacy policy

or register with
google
facebook

##### 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