Advanced · Axure Promotion · Axure RP · Axure Tutorial · Learn axure · Repeater · Table · Jan 21, 2022

Axure Case: Making a Table that Can Merge Cells with Repeater

by WELLJOE

Introduction

This article is a part of course Axure Full Course: Tutorial, Tips and Templates.

When making tables, we often need to merge cells, but the default table widget in Axure does not has merging cells feature. Our previous solutions: the first is to do it in Excel, and then copy the image to Axure, but you can't modify the text content in the image, or set interaction for each cell like a table; The other is to cover multiple cells with rectangles and then simulate the effect of merging. Although this is OK, it will be troublesome if there are too many merged contents.

So today I'll teach you how to use the repeater to make a table that can merge cells. By filling in the repeater table or copying the contents of Excel table to the repeater table, the repeater can automatically merge the cells.

Preview the completed prototype for this tutorial

Features to be Realized

1. If the cell to the left of a cell is empty, it is automatically merged.
2. If the text of a cell is Work, fill in the green background color. If the text is Rest, fill in the red background color.

How to Realize the Features

1. When item of the repeater is loaded, judge whether the text of the cell is empty. If it is empty, hide it and merge it with the text of the left cell.

2. Add disable and error state styles to the cell widget. When it is loaded, disable it if its text is Work, and set it as error style if its text is Rest.

Widgets Setup

1. Drag a repeater onto the canvas and fill in the data.

Widgets setup of repeater

2. Double click to enter the repeater, and drag the number of rectangles corresponding to the data column into the canvas. Give each widget a name, group them, and name it Header.

3. Set the style of selected, disable and error state of each widget. This will be used in the later design.

Interactions Setup

Header style setting

1.Here we need to set up the interactions when each repeater item is loaded.
Because we set the selected style of the rectangle to blue and the text to white, we add a judgment event to judge whether the row is the first row. If it is the first row, select it to change color.

2. We need to judge whether the text in the widget on the far right is empty. If it is empty, hide it. And merge it with the widget on the left.

For example, if the value of rectangular Sat is empty, the rectangular Sat is hidden. Then we need to set the size of Fri. The size of rectangular Fri is equal to its own size + the size of Sat, and then judge whether the value of rectangular Fri is empty. If it is empty, set the size of rectangular Thu equal to its own size + the size of rectangular Fri, and so on. Note: this should be a horizontal merging. The dimensions mentioned above are all width, and the height of the rectangle remains the same.

3. Finally, when the rectangle is loaded, we need to judge the text of the rectangle. If the text is Work, disable the rectangle. If it is Rest, set the rectangle to the error state.