--- layout: default nav: tutorial ---

# Implementing A Bulk Update UI

This example demos a bulk update UI for a table of data.

Note that the "server side" implementation is mocked out using mockjax, so you can see the entire implementation. Click the "Source Code" tab to see the code.

## Explanation

- The entire table is wrapped in a `form` tag, with checkboxes on each row indicating the row id.
- A drop-down button sits outside the form (not strictly necessary) and includes the form with the `ic-include` attribute. The drop-down button targets the body of the table using the `ic-target` attribute and specifies an request indicator via the `ic-indicator` attribute.
- The drop-down button has two options, "Active" and "Deactive" which issue posts via `ic-post-to` to `/activate` and `/deactivate` respectively. Both options inherit all the attibutes specified by the parent dropdown button.
- When the server side handles a post it re-renders all the rows of the table, and applies a class, `activate` or `deactivate` to a row that is activated or deactivated. Using CSS transitions and the `ic-transitioning`, we can flash the color of these rows green or red, respectively.

## Demo

| Name | Email | Status
--- | --- | --- | ---
| Joe Smith | joe@smith.org | Active
| Angie MacDowell | angie@macdowell.org | Active
| Fuqua Tarkenton | fuqua@tarkenton.org | Active
| Kim Yee | kim@yee.org | Inactive