More options exist such as multiple views and on-demand rendering, but this tutorial focuses on creating a custom-column repeater. Most of the work goes into defining and manipulating a data-providing function and a column-rendering function.

Save these changes and reload the page. At this point you should see an empty repeater example. We will create a datasource provider in the next step which will eventually be bound to the repeater to populate the data. Inline styling has been added for this tutorial.

The three sections of a repeater are repeater-header, repeater-viewport, and repeater-footer. Custom controls can be placed in repeater-header if needed. To simplify this tutorial, header controls have been disabled.

Let's start by creating a function staticDataSource that handles this. Place this function within a <script> before the libraries load. The repeater still hasn't been initialized, so you will not see any changes yet.

AsideExample with an API

If you wanted to change the data providing function to fetch the dataset rows from an API and calculate the datasource properties from the results, you could do something like this (we won't be using this for our tutorial though, since it requires a specific response from your server and won't work locally.):

Repeater with custom rendering

That's all folks!

Now that you've created a simple datagrid, we'd love to get feedback on Twitter about this tutorial or any of the other 15 Fuel UX controls. We love fixing issues and receiving pull requests on Github. Open source for-the-win!