Hide Specific Column On Repeat Table View

In this guide, we will walk through how to hide a specific column in the Repeat Group when displayed in Table View using a custom CSS code.

When utility fields like “Field Update Workflow” or other non-input fields are placed inside a Repeat field with Table View, they create an empty column in the table. These fields run logic in the background and don't have a visible input for the user to fill. This empty column adds visual clutter and confuses end users.

image
image

To resolve this, we use a custom CSS code inside an "HTML" field that targets the specific column position (using nth-child) of the Repeat field's table and hides it from the UI.

1. INITIAL SETUP:

  • Drag and drop an “HTML” field onto your form. Place it outside the "Repeat" field.
  • Rename the field as needed.
image

2. CONFIGURE THE “HTML” FIELD:

  • Click the pencil icon of the “HTML” field.
  • Add CSS to hide the column.
image
  • Use this example CSS.
  • Here, 3c63-1ef7-b5ea refers to the Component ID of the Repeat field.
  • The number 4 inside nth-child(4) represents the position of the empty column you want to hide (counting from left to right, starting at 1). In this example, the Field Update Workflow is the 4th field inside the Repeat group, so we use nth-child(4). If your background/utility field sits in a different position, update this number accordingly. 
<style>
  #component-3c63-1ef7-b5ea tr td:nth-child(4), 
  #component-3c63-1ef7-b5ea th:nth-child(4) {
	  display: none;
  }
</style>

3. TEST YOUR FORM:

  • Try the form.
  • The empty column previously created by the Field Update Workflow field will no longer be visible.
image

For any questions, please contact us - [email protected] or the Formyoula in-app chat 🙂

Hide Specific Column On Repeat Table View