Tables and repeating rows

When users add multiple similar entries (line items, dependents, addresses), use Repeater, List, or table components from the palette.

Lists and repeaters

PatternTypical use
RepeaterDynamic rows users add or remove (invoice lines, guests)
List / List itemStructured repeated blocks with a fixed layout
TableColumn grid when your library provides a table component (see below)

Search Components for Repeater or List.

Choose a pattern

Components tab open with Repeater highlighted in the palette search.Components tab open with Repeater highlighted in the palette search.
  1. Open Components.
  2. Search for Repeater or List.
  3. Pick Repeater when users should add or remove rows at runtime.

Example: invoice line items (repeater)

This walkthrough builds an Invoice form where each line item has Item name, Quantity, and Unit price. One Repeater holds the row template, an Add line item button appends rows, and a Remove line item button inside each row removes that row.

How a repeater combines components

LayerComponentRole
ScreenScreenRoot container
RowsRepeaterRepeating array of line items
Row layoutStackHorizontal group inside each row
FieldsText fieldItem name, Quantity, Unit price
Row actionButtonRemove line item with the removeRow action
Form actionButtonAdd line item with the addRow action

Step 1: Add a Repeater

Components tab open with Repeater highlighted in the palette.Components tab open with Repeater highlighted in the palette.
  1. Open Components.
  2. Search for Repeater.
  3. Drag Repeater onto the canvas below the form title.
  4. On Main, set Key to lineItemsRepeater.

Step 2: Add a row layout inside the repeater

  1. Drag Stack from Components into the Repeater.
  2. Set Direction to row on the Stack so fields sit side by side.
  3. Set the Stack key to lineItemRow.

Step 3: Add fields to the row template

Tree tab showing lineItemsRepeater with lineItemRow and nested text fields.Tree tab showing lineItemsRepeater with lineItemRow and nested text fields.

  1. Drag Text field components into lineItemRow (Item name, Quantity, Unit price).
  2. Open Tree → Expand all.
  3. Confirm nesting: lineItemsRepeater → lineItemRow → itemName, quantity, and unitPrice.

Step 4: Add a Remove line item button inside the row

Invoice form with Remove line item highlighted inside the repeater row and its removeRow action visible.Invoice form with Remove line item highlighted inside the repeater row and its removeRow action visible.
  1. Drag Button into lineItemRow, after Unit price.
  2. Set the label to Remove line item.
  3. On Actions → onClick, add the removeRow action.
  4. Leave dataKey and index empty. Because the button is inside the repeater, removeRow finds the parent repeater and removes the row that contains the clicked button.
  5. Optional: set min to 1 to keep at least one line item. The completed example uses this setting.

Step 5: Add an Add line item button

Invoice form with Add line item highlighted below the repeater and its addRow action visible.Invoice form with Add line item highlighted below the repeater and its addRow action visible.
  1. Drag Button below the Repeater.
  2. Set the label to Add line item.
  3. On Actions → onClick, add the addRow action with dataKey set to the repeater key (lineItemsRepeater).

Step 6: Verify the component tree

Tree tab showing removeLineItem inside lineItemRow and addLineItem below lineItemsRepeater.Tree tab showing removeLineItem inside lineItemRow and addLineItem below lineItemsRepeater.

  1. Open Tree → Expand all.
  2. Confirm that removeLineItem is nested under lineItemRow so every rendered row receives its own removal button.
  3. Confirm that addLineItem is outside lineItemsRepeater so it renders once below all rows.

Step 7: Test adding and removing rows in preview

Preview mode showing two invoice rows after adding rows and removing the middle line item.Preview mode showing two invoice rows after adding rows and removing the middle line item.
  1. Click Preview.
  2. Click Add line item twice. The repeater should now contain three rows.
  3. Enter different Item name values so you can identify each row.
  4. Click Remove line item in the middle row. Only that row should disappear, leaving the first and third rows.
  5. If you set min to 1, remove rows until one remains and confirm that the last row cannot be removed.
  6. Run Validate from Preview mode tools.

Row template fields need distinct Keys inside the repeater. Confirm runtime behavior with developers when binding data.

Tables (RSuite)

Use a table when you need a column grid with headers and read-only or lightly editable cells. RSuite table components are available when RSuite UI inject is selected in the component library.

Example: team directory

This walkthrough builds a Team directory table with Name, Department, and Email columns.

Step 1: Select the RSuite component library

Top toolbar with RSuite UI inject selected for table components.Top toolbar with RSuite UI inject selected for table components.
  1. Open the Component library menu.
  2. Choose RSuite UI inject (or RSuite UI).

Step 2: Add a Table component

Components tab open with Table highlighted in the palette search.Components tab open with Table highlighted in the palette search.
  1. Open Components.
  2. Search for Table.
  3. Drag Table onto the canvas below the form title.

Step 3: Add and configure columns

Tree tab showing teamTable with nameColumn, departmentColumn, and emailColumn.Tree tab showing teamTable with nameColumn, departmentColumn, and emailColumn.

  1. Expand teamTable in Tree.
  2. For each column, add Column → Header cell (label) + Cell (dataKey matching row data).
  3. Set sample data on the Table in Main properties for preview.

Step 4: Check the canvas

Team directory table on the canvas with Name, Department, and Email columns.Team directory table on the canvas with Name, Department, and Email columns.
  1. Confirm column headers and sample rows render in Designer.
  2. Adjust column width in Main properties if needed.

Step 5: Test the table in preview

Preview mode showing Team directory table with sample rows.Preview mode showing Team directory table with sample rows.
  1. Click Preview.
  2. Scroll and click rows if your form wires row actions.

Data tables with sorting, paging, or API-backed rows usually need developer configuration. Authors supply layout inside cells; developers bind data.

Developers: See RSuite table and List + detail pattern.

Summary

Use Repeater for dynamic “add another row” forms. Use List for fixed repeated blocks. Use RSuite Table for column grids. Build the repeater row template in Tree, wire removeRow to a button inside the row, and wire addRow to a button outside the repeater. For tables, switch to RSuite UI and nest Column → Header cell + Cell under Table.

See also