Adding Inline Editing to Tables

What You'll Learn

You'll discover how to enable inline editing in table elements, understand which fields support this feature, and learn how to selectively disable inline editing for specific columns - all helping you create a more efficient user experience that allows quick data updates from a single screen.

What is Inline Editing?

Inline editing enables users to conveniently modify fields directly from a table, eliminating the need for navigating through different edit forms to update various records. With this feature, all changes can be made from a single page.

For example, administrators of a business directory application can efficiently update businesses by simply clicking on any desired field within the table:

Users will notice that editable fields are highlighted when using inline editing. By clicking on these fields, a small pop-up window will appear, allowing them to easily make updates.

Requirements

If this is your first time creating an app, you'll need to know some basics about adding tables, fields, pages, and elements. You can start by working through the articles in our Builder Basics section.

Other good resources can be found in our About Your Database and Working With Pages sections of the knowledge base.

Enabling Inline Editing

1. Select the Page with the Table

In the Pages section of the Builder, select the page that contains the table you want to add inline editing to.

2. Select the Table Element

Select the table, and ensure the right panel is open

3. Enable Inline Editing in General Settings

Head over to the General Settings section and toggle the switch for "Inline editing": on

Disabling Inline Editing for Specific Fields

While enabling inline editing affects all editable fields by default, you can specify which fields should not allow this feature.

For example, if all fields in your table have inline editing enabled, but you want to disable it for the "Name" field:

To disable inline editing for a specific field:

1. Hover over the field column and click on the edit pen icon
2. This will take you to the Column Properties section of the editor
3. Toggle the switch to "No" under "Allow Inline Editing"

These steps can be repeated for any other fields that you would like to disable inline editing for.

Non-Editable Fields

When inline editing is enabled, most fields on the table's source table become editable. However, certain fields cannot be edited as their values are automatically generated by your app or determined by calculations.

Non-editable fields include:

• Auto increment fields
• Formulas
• Equations
• Text formulas
• Fields with conditional rules

These fields will not show the inline editing interface even when the feature is enabled for the table element.