Table of Contents

How to Add Inline Editing to a Table

Sarto Jama Updated by Sarto Jama

Scenario

Inline editing allows users to edit fields directly from a table, without using a form. So instead of jumping between edit forms to update different records, all changes can be made from the same page.

For example, admins of this business directory app can quickly make updates to businesses by clicking on any field on the table they want to edit:

You’ll see that fields that are editable with inline editing will be highlighted. When clicked, a small pop-up window will show up so an update can be made.

Requirements

If this your first time creating an app, you'll need to know some basics about adding objects, fields, pages, and views. You can start by watching our "Introducing Knack" video tour and then working through the articles in our Builder Basics section. Other good resources can be found in our designing the database and building pages sections of the knowledge base.

Steps

  1. Select the Page with the Table

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

  1. Open the Table Editor

Click on the table on that page to open the editor.

  1. Go to Options Section to Enable Inline Editing

Go to the Settings section when editing your table and check the box next to “Inline Editing”:

Disable Inline Editing for Certain Fields

When inline editing is enabled, it will affect any editable fields. However, if there are fields where you don’t want to allow inline editing, you can specify that.

For example, in the table below, all fields have inline editing enabled. But we don’t want the Business ID field to have inline editing enabled.

To remove inline editing from that field, hover over the field column and click the edit “pencil” icon. This will take you to the Columns Properties section of the editor:

From there, check the 'No' option under "Allow Inline Editing".

That process can be repeated for any fields that shouldn’t have inline editing enabled.

Notes & Troubleshooting

Non-Editable Fields

When inline editing is enabled, it makes any fields on the view's object editable available for inline editing. Non-editable fields are those whose values are generated by your app or a connected object's field values.

For example, auto increment fields are automatically populated by your app with a unique value. Non-editable fields include:

How did we do?

How to Add Connection Links to Views

Create a Print-Friendly Invoice Page

Contact