Bulk Update

 1<div
 2    id="demo"
 3    data-signals__ifmissing="{_fetching: false, selections: Array(4).fill(false)}"
 4>
 5    <table>
 6        <thead>
 7            <tr>
 8                <th>
 9                    <input
10                        type="checkbox"
11                        data-bind-_all
12                        data-on-change="$selections = Array(4).fill($_all)"
13                        data-effect="$selections; $_all = $selections.every(Boolean)"
14                        data-attr-disabled="$_fetching"
15                    />
16                </th>
17                <th>Name</th>
18                <th>Email</th>
19                <th>Status</th>
20            </tr>
21        </thead>
22        <tbody>
23            <tr>
24                <td>
25                    <input
26                        type="checkbox"
27                        data-bind-selections
28                        data-attr-disabled="$_fetching"
29                    />
30                </td>
31                <td>Joe Smith</td>
32                <td>[email protected]</td>
33                <td>Active</td>
34            </tr>
35            <!-- More rows... -->
36        </tbody>
37    </table>
38    <div role="group">
39        <button
40            class="success"
41            data-on-click="@put('/examples/bulk_update/activate')"
42            data-indicator-_fetching
43            data-attr-disabled="$_fetching"
44        >
45            <i class="pixelarticons:user-plus"></i>
46            Activate
47        </button>
48        <button
49            class="error"
50            data-on-click="@put('/examples/bulk_update/deactivate')"
51            data-indicator-_fetching
52            data-attr-disabled="$_fetching"
53        >
54            <i class="pixelarticons:user-x"></i>
55            Deactivate
56        </button>
57    </div>
58</div>