bulk-actions

A bar of actions that appears when table rows are selected.

Example

Name Members Status Actions
Lapsed members8,412 Synced
Volunteers642 Failing
Edit rule

Laravel

<div data-adm-selectable>
    <x-admin::table>
        <x-slot:toolbar>
            <x-admin::input name="g_q" type="search" icon="search" placeholder="Filter by name" aria-label="Filter by name" />
            <x-admin::select name="g_status" aria-label="Status" placeholder="All statuses" :options="['Synced', 'Failing']" style="width:auto" />
        </x-slot:toolbar>
        <x-admin::bulk-actions>
            <x-admin::button size="sm">Rebuild</x-admin::button>
            <x-admin::button size="sm" variant="destructive">Delete</x-admin::button>
        </x-admin::bulk-actions>
        <x-slot:head>
            <x-admin::select-all />
            <x-admin::th sort="name">Name</x-admin::th>
            <x-admin::th sort="members" numeric>Members</x-admin::th>
            <x-admin::th>Status</x-admin::th>
            <th class="adm-shrink"><span class="adm-sr-only">Actions</span></th>
        </x-slot:head>
        <tr>
            <x-admin::row-checkbox value="1" label="Select Lapsed members" />
            <td>Lapsed members</td><td class="adm-num">8,412</td>
            <td><x-admin::badge variant="success" dot>Synced</x-admin::badge></td>
            <td class="adm-shrink"></td>
        </tr>
        <tr>
            <x-admin::row-checkbox value="2" label="Select Volunteers" />
            <td>Volunteers</td><td class="adm-num">642</td>
            <td><x-admin::badge variant="destructive" dot>Failing</x-admin::badge></td>
            <td class="adm-shrink">
                <x-admin::dropdown sr-label="Actions for Volunteers" data-row-menu>
                    <x-admin::dropdown-item href="#" icon="edit">Edit rule</x-admin::dropdown-item>
                    <x-admin::dropdown-item icon="trash" destructive>Delete</x-admin::dropdown-item>
                </x-admin::dropdown>
            </td>
        </tr>
        <x-slot:footer><x-admin::pagination :paginator="$paginator" numbers :per-page="[10, 20, 50, 100]" per-page-auto-submit /></x-slot:footer>
    </x-admin::table>
</div>

Props

PropRequiredDefaultOptions
labelnull

Other attributes, such as wire:model or data-*, pass through to the element.

Other stacks

React and Vue: import { BulkActions } from "@admiral/ui-kit/react" (or /vue). See the React and Vue guide.

HTML, for any stack
<div data-adm-selectable>
    <div class="adm-card adm-card--flush">
    <div class="adm-table-toolbar"><div class="adm-input-group">    <span class="adm-input-group__addon"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg></span>        <input
        type="search"
         name="g_q"          id="g_q"                                         class="adm-input" placeholder="Filter by name" aria-label="Filter by name"
    >
        </div>
            <select
         name="g_status"          id="g_status"                                 class="adm-select" style="width:auto;" aria-label="Status"
    >
        <option value="">All statuses</option>                                <option value="Synced" >Synced</option>
                                <option value="Failing" >Failing</option>
                
    </select></div>    <div class="adm-table-wrap">
                    <table class="adm-table">
                <thead><tr><th class="adm-shrink" scope="col"><label class="adm-check"><input type="checkbox" data-adm-select-all aria-label="Select all rows" ></label></th>
            <th class=""  scope="col">
            <a href="?sort=name&amp;direction=asc">Name<svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></a>
    </th>
            <th class="adm-num"  scope="col">
            <a href="?sort=members&amp;direction=asc">Members<svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></a>
    </th>
            <th class=""  scope="col">
            Status
    </th>
            <th class="adm-shrink"><span class="adm-sr-only">Actions</span></th></tr></thead>                <tbody><div class="adm-bulk" data-adm-bulk hidden>
    <span class="adm-bulk__count"><span data-adm-selected-count>0</span> selected</span>
    <button type="button" class="adm-btn adm-btn--secondary adm-btn--sm" >Rebuild</button>
            <button type="button" class="adm-btn adm-btn--destructive adm-btn--sm" >Delete</button>
</div>
                 <tr>
            <td class="adm-shrink"><label class="adm-check"><input type="checkbox" name="ids[]" value="1" data-adm-row-check aria-label="Select Lapsed members" ></label></td>
            <td>Lapsed members</td><td class="adm-num">8,412</td>
            <td><span class="adm-badge adm-badge--success adm-badge--dot">Synced</span>
</td>
            <td class="adm-shrink"></td>
        </tr>
        <tr>
            <td class="adm-shrink"><label class="adm-check"><input type="checkbox" name="ids[]" value="2" data-adm-row-check aria-label="Select Volunteers" ></label></td>
            <td>Volunteers</td><td class="adm-num">642</td>
            <td><span class="adm-badge adm-badge--destructive adm-badge--dot">Failing</span>
</td>
            <td class="adm-shrink">
                <details class="adm-dropdown" data-row-menu="data-row-menu">
            <summary class="adm-btn adm-btn--ghost adm-btn--square adm-btn--sm" aria-label="Actions for Volunteers"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="5" cy="12" r="1.2" fill="currentColor"/><circle cx="12" cy="12" r="1.2" fill="currentColor"/><circle cx="19" cy="12" r="1.2" fill="currentColor"/></svg></summary>
        <div class="adm-menu"><a href="#" class="adm-menu__item"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 1 1 3 3L7 19l-4 1 1-4z"/></svg>Edit rule</a>
                    <button type="button" class="adm-menu__item adm-menu__item--destructive"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 6h18M8 6V4h8v2M6 6l1 15h10l1-15"/></svg>Delete</button></div>
</details>
            </td>
        </tr></tbody>
            </table>
            </div>
    <nav class="adm-pagination" aria-label="Pagination">
    <span>
                    Showing 21–40 of 240
            </span>
            <form method="GET" class="adm-pagination__size"  data-adm-autosubmit >
                        <label class="adm-small" for="per_page-size">Rows per page</label>
            <select class="adm-select adm-select--sm" id="per_page-size" name="per_page">
                <option value="10" >10</option><option value="20" selected>20</option><option value="50" >50</option><option value="100" >100</option>            </select>
            <button type="submit" class="adm-btn adm-btn--sm" data-adm-autosubmit-apply>Apply</button>
        </form>
        <div class="adm-btn-group">
        <a class="adm-btn adm-btn--sm" href="/segments?page=1" rel="prev">Previous</a>                                    <a class="adm-btn adm-btn--sm adm-pagination__page" href="/segments?page=1" >1</a>                            <a class="adm-btn adm-btn--sm adm-pagination__page" href="/segments?page=2"  aria-current="page" >2</a>                            <a class="adm-btn adm-btn--sm adm-pagination__page" href="/segments?page=3" >3</a>                            <a class="adm-btn adm-btn--sm adm-pagination__page" href="/segments?page=4" >4</a>                            <a class="adm-btn adm-btn--sm adm-pagination__page" href="/segments?page=5" >5</a>                            <a class="adm-btn adm-btn--sm adm-pagination__page" href="/segments?page=6" >6</a>                            <a class="adm-btn adm-btn--sm adm-pagination__page" href="/segments?page=7" >7</a>                            <a class="adm-btn adm-btn--sm adm-pagination__page" href="/segments?page=8" >8</a>                            <a class="adm-btn adm-btn--sm adm-pagination__page" href="/segments?page=9" >9</a>                            <a class="adm-btn adm-btn--sm adm-pagination__page" href="/segments?page=10" >10</a>                            <a class="adm-btn adm-btn--sm adm-pagination__page" href="/segments?page=11" >11</a>                            <a class="adm-btn adm-btn--sm adm-pagination__page" href="/segments?page=12" >12</a>                            <a class="adm-btn adm-btn--sm" href="/segments?page=3" rel="next">Next</a>    </div>
</nav></div>
</div>