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

# Implementing Click To Load

This example demos a click to load UI for a table.

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

- After the last row of data, emit a single row/column with a colspan of the entire table, with a button in it.
- That button has an `ic-get-from` attribute that loads the next page of data (including another button). The button targets the closest table row for replacement with the `ic-target` attribute, using the special `closest` syntax. Finally, because we want to replace the entire row with the new page of rows returned (rather than simply replacing the inner content of the row), the `ic-replace-target` is set to `true`

## Demo

Name | Email | ID #
--- | --- | ---
Agent Smith | void0@null.org | D92B582CA8GDD94
Agent Smith | void1@null.org | 4AEC9GF0F0A35G5
Agent Smith | void2@null.org | 3G80BFBF490BBAF
Agent Smith | void3@null.org | A4CB29F6G6D812D
Agent Smith | void4@null.org | FDFEGE1580A78C0
Agent Smith | void5@null.org | 96961373E447G6F
Agent Smith | void6@null.org | 05EE57C9C2GD1B0
Agent Smith | void7@null.org | 2G6BC043G9F12BD
Agent Smith | void8@null.org | 2G6BC043G9F12BD
Agent Smith | void9@null.org | 3C8D2157F4B854F