What are Tables?
A table is used to display multiple records from objects and connected objects in your database using rows and columns.
Tables use fields from objects in your Knack Builder to display records in your live app. Each column in your table will correspond to a field in an object. Then each row in your table will correspond to an individual record in an object.
In your table, you can also add links to view more details, edit or delete individual records shown in the table.
What Do Tables Look Like in the Live App?
In the live app, a table displays as shown below. Fields from the object will be used as columns in the table, and records display as rows.
Where Do I Access Tables?
You can access your tables by clicking on the page that contains your table in the Pages section of the Builder. The table view will have a table icon and label to the left of the table’s name.
Add a Table
Tables can be added in the Pages section of the Builder. First, select the page you would like to add the table to and then select the table option at the top of the page:
Once chosen, you will be prompted to select the object you want to display records from. Once you have selected the object, click the "Add table" button:
When adding a table, you will also be presented with the option to automatically add linked pages to view or edit details about records in the table.
Click the checkbox next to the links you'd like to add to your table view. Once you add the view, you’ll see child pages have been automatically added for each link you selected.
Note: Even if no linked pages are selected when creating the table, you will be able to add linked pages after the table has been created.
Edit a Table
To edit the table, click the table view or select the gear icon on the table view in the Pages section of the Builder.
This will take you to the view editor page.
Delete a Table
To delete a table from your page, just click on the trashcan icon on the table view.
Warning: Please note that deleting a table view will also delete any child pages connected to it.
Copy or Move a Table
To copy your table, drag the original table from its page and drop it on a new page:
To move your table and rearrange your page, click anywhere on the table view and drag it above or below other views present on the page. Views can also be copied or moved from within the View editor by clicking the "gear" icon in the top-right corner:
Note: Views can only be copied or moved to pages which use the same object or connected object as its data source.
Once a table has been added, either click directly on the table view or click the gear icon to manage its settings.
The table will open in the view editor mode, where you can use the menu on the left to edit different aspects of the table. This includes managing field columns and link pages, gives options to add filters and enable features like exporting and row summaries for your table.
The Data Source section is used to control the records the table will display and how they’re displayed:
- Data: the table will display all the object's records by default. Use the data section to add rules to limit which records will be displayed.
- Sort: control the default sort order of which records will be displayed first.
- Limit: show all the available records or limit to a specific number.
The Columns section defines the table title and description, as well as which fields the table will display for each record.
You can edit the title and description of your table by editing the title and description fields that are listed above the columns.
These are optional and, when added, will display at the top of the table.
Manage Field Columns
Field columns are the columns associated with the fields in your object. Each individual field is associated with a field in your object.
Add Field Columns
The Fields tab in the left menu lists all the fields available to add as columns. Click on a field to add it as a column:
The field will be added to the right of the table as the last column.
- If you need to add a new column to your table that doesn't exist yet, you'll first need to add a new field to the associated object in your database.
- If you edit the field name in the object, all existing columns for that field will be updated unless the label has been manually edited.
Edit Field Columns
Hover over a column and click the edit pencil link to edit that column:
A pop-up window will display to edit the column's properties, layout, and display rules.
- Field: This will display the name of the field shown in the column. This cannot be changed.
- Column Header: The name of the column header. This will default to the name of the field in the object.
- Allow Inline Editing: This will allow users to edit fields directly from the table. This option will only be enabled if it is enabled in the Options section.
- Value Link: Allows users to link the field's value to an existing page displaying details about a connected record. This option is only available when adding a connected object's field as a column.
- Value Separator: Choose how multiple values will display in your table. They can either be separated by commas or listed on a new line. This option is only available when adding a connected object's field as a column.
- Grouping: Groups common records based on the column’s field. For example, if grouping based on a Status field, records will be grouped by common statuses.
From Layout you can adjust a column’s width and change the alignment of records:
- Column Width: Choose either a default width for your column or you can use a custom width of your choosing.
- Align: This will align the data in that column based on your choice. You can choose to have data aligned to the left, center or right.
Using display rules, you can add rules to update the column's display:
A display rule is added by defining the conditions (if) that trigger the actions (then):
If: the condition(s) that will trigger the actions when the condition is true. More than one condition can be added to trigger the action, in which case every condition must be true.
Then: the action to trigger when the condition is met. There are five actions that can be triggered by display rules:
- Set Text Color: changes the text color to a color of your choice.
- Set Text Style: can choose to change the text to italic, bold, or both.
- Set Background Color: changes the background color of the cell in the table to a color of your choice.
- Display Icon: displays an icon next to the value in the cell with a color of your choice.
- Hide Value: hides the value in that cell in the table.
Multiple conditions and actions can be added for each rule by using the green "plus" button.
Delete Field Columns
Hover over a column and click the "trash can" icon to delete that column:
Warning: Choosing to delete a field column will remove any pages linked to from that column.
Move Field Columns
To move field columns, click the header of the column you would like to move and drag it to either the left or right.
Manage Link Columns
To the right of the fields menu is the Links menu:
This is where you can add links to delete a record, edit a record, view more details about a record, or link to another child page.
- Link to delete record: this will add a link to delete a record. When the user clicks on the link they will be asked to confirm the delete. Clicking yes will then remove the record from the table and delete it from the object.
- Link to edit record: this will create a new child page with a form to edit the record. Clicking on the link will go to that page to edit the record.
- Link to view more details: this will create a new child page that displays all further details for the record. Clicking on the link will go to that page to view those details. This is useful if an object has too many fields to fit in a table since you can pick a few to show in the table and then show more details on the linking page.
- Link to another page: reuse another page you've already created by linking to it. For example, if you already have a complex page that shows details about a company record, we could link to that page instead of creating a new page for this table.
- Trigger an action: create a link on the view and trigger an action to (a) update this record / update connected records / insert connected records / send emails and (b) redirect to another URL or show success messages. View full “Action Links” help article for further information
Filters give the user tools to further refine which records the table will show. You can add filters as options for the user to add or as a menu.
Enabling user filters will allow users to filter the records in your table when they access your app.
This will display as an "add filters" link above the table:
The table will update as soon as a filter is added and multiple filters can be added as needed. You can also set here if the available fields to filter are limited to the table columns or all of the object fields.
You can also add preset filters that will automatically apply preset filters when selected.
Enabling a filter menu will present links above the table the user can click that will filter the records based on the rules you create:
The user can then click on the menu links to automatically filter the records:
Knack Tip: If rules were added to the table's Data Source, those rules will be combined with any filters that are added.
The Options section provides additional settings for your table.
Pagination determines how many records will show at one time. If the total number of records exceeds the number set here, then links will be added to the table to navigate to additional pages, displaying more records. The Options section contains four features that you can enable to customize your Table view:
- Set how many records (10, 25, 50, or 100) to view at a time
- Let the user set how many records to view per page: This allows the user to change how many records they are viewing per page.
- Show pagination controls at the bottom of the table: this will display pagination controls at the bottom of the table as well as at the top. By default this will be the page X of X display. Pagination controls will also show at the bottom of the table if the feature allowing users to set how many records to view per page is enabled (see previous bullet point).
Here's an example of a table displaying pagination links in the top right:
The Options section contains four features that you can enable to customize your Table view:
- Keyword Search: This will add a search field above the table for the user to enter keywords that will filter which records to display. On the search results display, a “reset” link will appear. Clicking this will reset all search criteria to easily search again with new criteria.
- Exporting: This adds a link above the table allows the user to export all the data from the table into either a CSV, JSON or TXT format.
- Inline Editing: This allows the user to edit each field directly from the table, without utilizing a form view.
- Hide Empty Columns: Enabling this feature will hide all columns that are empty from the table view.
"No Data" Text
Here you can change the text which is shown when the table has no records to show. This will replace the default "No Data" text.
Row summaries are used to run calculations on all the rows in the column. Results will display as a summary at the bottom:
You can also add Formula options, such as Sum, Average, Minimum, and Maximum, to your table.
Any label you add will be placed in a left column if available. You can use the green "add" buttons to add multiple summaries:
When row summaries are enabled, you can edit each table column to disable it for a specific column, if needed. To do so, hover over the column and click the pencil edit icon. Select "No" in the Allow Summary dropdown to hide the summary for that column.
Use Tables in your App
Tables and Connected Records
In addition to displaying fields from the object used to create the table, you can also add field columns from connected objects as well. This will allow you to display records from multiple connected objects in one table.
Records Connected to this Page's Object
Objects that are connected to the table's primary object will display under this header. You will be able to add field columns from these objects into your table.
Records Further Connected to this Page's Object
Options under this header will allow you to add field columns to display records connected to a specific record. For example, records connected to the logged-in user would fall under this category.
Adding Columns from Connected Objects
When adding field columns, you can add columns from connected objects by selecting the dropdown menu:
Once added, these connected fields will display on your table.
Note: This dropdown will only be available if the object used to create the table is connected to at least one other object.
Notes & Troubleshooting
- Adding a new field to your object will not automatically add this field to your table. You will need to manually add the field to your table columns for it to display.
- Child pages for tables are listed beneath the table view. Deleting the table will also delete all child pages connected to the table.
How To Guides
There are several How-To Guides that use table views to display records.
- Show records connected to the logged-in user.
- Show records connected to the logged-in user's company or other groups.
- Track customer orders in a table in an Orders App.
- Display inventory reports in an Inventory Manager or Warehouse Manager app.
- Keep track of edit logs with a Version Control History for Records.