Grouping objects together and duplicating them is a simple enough task. However, when the properties of these objects are tied to a spreadsheet and require dynamic changes, the process can become quite tedious. Mistakes can easily be made, such as binding to the wrong cell or range, which can lead to errors down the line.
Additionally, if you’re dealing with data insertion, formulas, and dynamic visibility, you may find yourself spending far too much time trying to track down any issues that arise due to rogue bindings.
Version 1.15 introduced lots of new features and enhancements in its release package. Amongst these, there is a really versatile tool that automatically generates repeated components in rows, and dynamically adjusts bindings in a data block.
The new Repeat Container (sometimes referred to as the ‘Repeat grid’) is a massive time saver, allowing for quick and efficient row-based styling.
Take a look here!
To dynamically replace the property bindings for each new instance of an object/component, the container should be bound to a range that includes all the relevant values. You can see this in action by pressing play on the video below.
Essentially, the length of the range determines how many times the container will repeat its contents.
The values corresponding to the name, description, email, and image are all bound to cells located within the first row of our block.
In order to ensure that a bound property remains unaltered, it is essential to bind its value to a cell located outside the repeat container block. This will ensure that the value of the property remains constant throughout the course of its usage, thereby avoiding any unintended changes.
To maintain the color of the text label containing the email address, I have bound the color in a specific way. In order to ensure that the color remains unchanged, I have placed the cell that contains the hex value for this color outside of the block that will be used for the repeat grid.
All that’s left to do is to tell the repeat container what block to use to create rows and bindings.
Et voila!!!
With the Repeat Container component, you can take your projects to the next level by creating dynamic, visually stunning designs in half the time it would take using traditional methods. The component allows you to easily duplicate and modify content, giving you more control over the overall look and feel of your project.
You can experiment with different layouts, spacing, and styles to achieve the desired effect. Check out some examples of how other users have used the Repeat Container component to elevate their projects.
💙 Animated Data Table with Spotify
💙 Custom Visualization: Rounded Gradient Bar Chart
We’ve are even using the component ourselves on the Squirrel Website!
After the release of 1.15 we revisited the project for the Pricing Comparison Matrix to see how it could be simplified. Read all about that here.
