Appfarm Documentation
Getting startedDocumentationCommunityAppfarm Create
  • Overview
  • Getting Started
    • What is Appfarm?
    • Key concepts
    • Quickstart
      • Speed intro
      • Step-by-step guide
    • Appfarm Showroom
    • FAQ
  • Appcademy
    • Learning paths
    • Appfarm Fundamentals
      • Intro Course
        • 1. Intro to No-Code and Appfarm
        • 2. Navigation in Appfarm Create
        • 3. What is Apps?
        • 4. Intro to UI Editor
        • 5. Data Model
        • 6. App Data
        • 7. Actions
        • 8. Tips and Tricks
        • 9. Intro to practical walkthrough
        • 10. Create a details view of a Project
        • 11. Create a Custom List
        • 12. Swipe and Delete
        • 13. Functionality for simple Create of Data
        • 14. Upload and Download Photos
        • 15. Input Dialog with Validation and Save
        • 16. Dashboard
        • 17. Summary
        • Quiz
      • User Interface Fundamentals
        • Container - Sectioning, Styling and Repeating
        • Conditional Styles
        • Motions
        • Responsive Design
        • Step-by-step workflow
        • Featured UI Components
        • Quiz
      • App Data Fundamentals
        • Data Source Filtering
        • App Variables and Runtime Properties
        • URL Parameters
        • Quiz
      • Actions & Logic Fundamentals
        • Event Handlers
        • Featured Action Nodes
        • Context Parameters
        • Quiz
      • Services Fundamentals
        • Introduction to Services
        • Setting up a Service
        • Scheduling a Service
      • Integration Fundamentals
        • The web request action node
        • Fetch data from an endpoint
        • Map data to a data source
        • Modify the response
        • Nested data mapping
        • Path parameters
        • Authentication
        • Send data to an endpoint
        • Quiz
      • User handling and permissions
        • Users and roles
        • Permissions
        • Creating users
        • Extending the User object class
        • Updating and deleting users
        • Unauthenticated access
        • Quiz
    • Appfarm Professional
      • User Interfaces
        • Featured UI Components
        • Concepts and Use Cases
      • Data Structures & Data Handling
        • Data Features
        • Search & Filters
        • Featured Action Nodes
        • GraphQL
      • Logic & Flow
        • Logical Concepts
        • Date and Time Handling
        • Featured Action Nodes
        • Exception Handling
      • Login & Configuration
        • Login and Authentication
        • Settings, Configuration and Languages
      • Security & Operations
        • Security and Permissions
        • Deployment
        • Schedules and Logs
        • Debugging and App Health
      • Performance & Optimization
        • Optimizing Performance
        • Enhancing Functionality
    • Appfarm Sales Representative
    • Appfarm Developer Forum
      • Session 1: Data Modeling in Appfarm Create
      • Session 2: App Data in Appfarm Create
      • Session 3: Services in Appfarm Create
      • Session 4: Optimizing Performance
    • Background
      • Databases
        • Data modeling 101
        • Database normalization
  • Library
    • UI components
      • Advanced bar chart
      • Advanced bubble chart
      • Advanced combined chart
      • Advanced gantt chart
      • Advanced heatmap chart
      • Advanced line/area chart
      • Advanced pie chart
      • Advanced scatter plot chart
      • Advanced solid gauge chart
      • Animated component
      • Avatar
      • Avatar group
      • Basic bar chart
      • Basic gauge chart
      • Basic line chart
      • Basic pie chart
      • Bottom navigation
      • Button
      • Checkbox
      • Chip group
      • Circular progress
      • Coded component
      • Container
      • Date & time picker
      • Drawable canvas
      • Floating action button
      • Icon
      • Icon button
      • Iframe
      • Image
      • Linear progress
      • List
      • Map
      • Menu list
      • Multi select
      • PDF reader
      • Popover
      • Radio buttons
      • Rich text editor
      • Rich text
      • Select
      • Slider
      • Speed dial
      • Switch
      • Table
      • Tabs
      • Text
      • Text edit
      • View container
      • Visibility group
    • Action nodes
      • Aggregate data
      • Advanced search
      • Auth operations
      • Block
      • Catch exception
      • Copy to clipboard
      • Create file archive
      • Create file object
      • Create object
      • Create user account
      • Delete objects
      • Delete user account
      • Duplicate objects
      • End execution
      • Exit block
      • Exit loop
      • Export data
      • Foreach
      • Generate document
      • If
      • Import data
      • Invalidate cache
      • Log in
      • Log to console
      • Log out
      • Next iteration
      • Navigate
      • Open/close popover
      • Open confirm dialog
      • Open print dialog
      • Open snackbar
      • Open Unsplash dialog
      • Open URL
      • Persist objects
      • Push notifications
      • Read objects
      • Request permissions
      • Run code
      • Run other action
      • Run service
      • Scan barcode/QR code
      • Send email
      • Send SMS
      • Set client language
      • Set data source attributes
      • Set selection
      • Set theme
      • Set user account image
      • Show install app prompt
      • Sleep
      • Sort objects
      • Throw exception
      • Toggle drawer
      • Update object
      • Update secret
      • Update user account
      • Web request
      • While
  • Reference
    • Appfarm Create
      • Appfarm Commander
      • Blue dots
      • Copy & Paste
      • Farmer's Market
      • Find references
      • Find usage
      • Keyboard shortcuts
      • Undo/Redo
      • User preferences
    • Platform concepts
      • Conditions
      • Data bindings
      • Date and time
      • Event handlers
      • Filters
      • Functions
      • Markdown
      • Objects
      • Operators
      • Value processor
    • Dashboard
    • Apps
      • UI
        • Views
          • Dialog
          • Drawer
        • Layout designer
        • Component properties
        • Shareable UI components
      • Data
        • App variables
        • Data sources
        • Calendar data sources
      • Actions
      • App settings
      • App size
      • App health
    • Services
      • Service Endpoints
      • Service settings
      • Service health
      • API explorer
    • Data model
      • Object classes
      • Object class properties
      • Enumerated types
      • GraphQL
        • Queries
        • Mutations
      • Data Extract API
      • Time series data
    • Operations
      • Deploy
      • Schedules
      • Logs
    • Resources
      • Themes
      • Files
      • Fonts
      • Internationalization
    • Configuration
      • Environments
      • Login
        • Custom auth providers
    • Security
      • Users
      • Service accounts
      • Roles
      • Secrets
      • Permissions
        • Conditional Permissions
    • Appfarm Client
      • Developer tools for Apps
      • Developer tools for Services
      • Warnings and errors
  • How to
    • Data modeling
      • Many-to-many relationships
      • Use naming conventions
      • Offline data handling
      • Data silos and White labelling
    • User interface
      • Manage a many-to-many relationship with a Chip group
      • Configure drag and drop
      • Build a drag-and-drop calendar
      • Design a responsive layout
      • Work with flexbox
      • Use Mapbox as a map layer
      • Understand charts
    • Logic and flow
      • Event Log Design
      • Configure advanced search
    • Themes and styling
      • Change the active theme
      • Add custom email templates
    • Enhance your app
      • Add deep links
      • Add keyboard shortcuts
      • Add link previews for social media
      • Apply SEO best practices
      • Change the active language
      • Generate a PDF from a Container
    • Integrations
      • Integrate with external systems
      • Integrate with OpenAI
      • Integrate with Google Analytics (GA4)
      • Configure a custom email account
      • Integrate with a payment provider
      • Integrate with Signicat
      • Integrate directly with an external database
      • Retrieve a Bearer token from Google Cloud
      • Fetch data from BigQuery
      • Retrieve access token from Microsoft Entra ID
    • Workflow automation
      • Update an OAuth 2.0 access token from a service
    • Authentication and access control
      • Add users and assign roles
      • Configure unauthenticated access
      • Implement third-party authentication
    • Security, testing and deployment
      • Add a custom domain
      • Install an app on a device
      • Get ready for Production
      • Optimize performance
      • Security checklist
      • Test and debug
    • Example apps
      • Create an Instagram clone
        • The end result
        • Designing the feed
        • Create new post
        • Add a like-button
        • Add comment-functionality
  • Solution administration
    • Subscription and billing
    • Dedicated tier benefits
    • Guide to GDPR
      • Key principles
      • How Appfarm protects personal data
      • How you can protect your clients’ data
      • Glossary
    • Appfarm and the EU AI Act
  • Policies
    • Appfarm Policies
    • Data Processors
    • Privacy Policy
Powered by GitBook
On this page
  • Overview
  • Usage and basic settings
  • When should Tables be used?
  • Details on the Table Settings
  • Data
  • Columns
  • Row Selection
  • Edit mode
  • Toolbar
  • Header

Was this helpful?

Export as PDF
  1. Library
  2. UI components

Table

PreviousSwitchNextTabs

Last updated 28 days ago

Was this helpful?

Overview

A Table is an iterating component that allows you to display structured data from a Data Source with multiple objects (Cardinality Many).

An example setup of a Table is showcased in our ! You may view a demo, as well as access the setup in Appfarm Create. If you do not have access, you may register .

Usage and basic settings

The Data Source (or ) to be displayed in rows is set in the setting Data Source. Which properties to display as columns are selected by adding Columns to the table and mapping the property to display in the Value setting of each column, and the column header name in the Column Title setting. Setting a Value is not mandatory, for example, if you want a column with just a button (adding an Adornment to the column). The value may also be defined as a Function: For example, you may add Full Name as a Column Title, and have its value calculated by a function (return firstname + " " + lastname).

All data in a Data Source or some subset of the data can be shown in the table. The subset can be fixed using a Filter on the Table or changed runtime, using Conditional Filters.

Consider a solution displaying Projects in a table. Above the table, you have a radio button for the selection of the Project state. When a user selects one of the states, a conditional filter is enabled on the table data, filtering Projects according to the selected Project state.

Each row in the table represents an object and within each row, the given object is the Object in context. This allows, for example, adding adornments with events that can be run with Object in Context to access details of the row object.

The table allows initial sorting, as well as letting the end-user sort the table by clicking on the column header. Initial sorting is applied in the setting Sorting.

You can turn on either single or multiple row selection for the table, from the setting Enable Row Selection.

The table is read-only by default, but it is possible to enable Edit mode, which turns the cells into input fields. After enabling edit mode, you can set specific cells read-only or disabled, if some columns should not be editable.

Consider an inventory table that lists products, with product details and a column for inventory status. In this case, the product details might be read-only, while the column for inventory stock allows for entering and adjusting stock levels.

If you are displaying a lot of data, it might be better to allow the user to click on an adornment button, which opens a dialog where the context object can be changed, instead of setting the whole table editable. This might lead to a better user experience in the performance aspect, and it is often more clear and less overwhelming for the user.

It is possible to enable a Toolbar for the table. Here you can add toolbar actions and enable some built-in actions such as Search, Filter, Show/hide columns, and Download as CSV. Download as CSV is very powerful for administrative applications, where the user would like to export data to be e.g. used in Excel.

It is also possible to Enable Footer and show aggregated values for the columns. Once enabled for the Table, you may specify which columns should have a footer and aggregate function from the setting Footer Type (defined per column).

If there are great amounts of data to be displayed it might take time to render all rows in the table. If you experience that the table seems sluggish you can enable Pagination to limit the number of rows per page or try to decrease the visible data in the table some other way. This is especially important if the table uses a lot of adornments and property conditions.

When should Tables be used?

Tables are very powerful in terms of data overview, search, filtering and structure. Tables are the thing to use in administrative applications, where the end-user typically needs to access the data with various filters, and the data may have many columns. Tables are quite user-friendly, however, when the priority of the application is a fancy UI for e.g. consumers or customers, you might want to consider creating a more custom UI for this purpose.

Details on the Table Settings

Data

The Table component is used to display a set of data in a Data Source. Specify the Data Source you want to display data for in the table. By default, all data in the Data Source will be displayed in the table, but it is possible to display a subset of the data by applying a Filter on the table. Furthermore, you can add Conditional filters which can be enabled and disabled runtime. Set a condition specifying if the filter should be applied, and specify the filter. All conditional filters evaluated as enabled will be applied in addition to the top-level table filter.

Furthermore, the table data can be Sorted and it is possible to apply a Skip and Limit to the data. Skip will skip the n number of objects, while Limit specifies the maximum number of objects to be displayed.

If the amount of data to be displayed is big, it might be necessary to enable Pagination. This will render the n number of rows per page and let you flip between pages, thus decreasing the time it takes to render the table.

Columns

Each column specifies a Value to be shown in the cell, typically a property on the Data Source, but static values or some sort of function can also be displayed. Each column lets you specify a Column Title (header value) and an associated Tooltip. It is possible to add a Visibility Condition to the column. For instance, this can be used if you have a table that several user groups have access to, but where some of the columns should not be visible for all user groups.

To display line breaks for string values, Multiline must be enabled. The table will then render line breaks in read mode and support their entry in edit mode.

A column is set to be Sortable by default. This allows the user to sort data in columns by clicking the header.

The column has several settings related to the table's other settings. If Edit mode is enabled you can specify if a given column should be editable. You can specify which options should be available for properties referencing other objects (Enumerated Types or Object Classes). Furthermore, you can set a column Initially Hidden if the setting Show/hide Columns is enabled, or Exclude from Search / Filter if Search and Filter are enabled on the toolbar.

Conditional Column Properties can be used to set a column Initially Hidden based on a condition. This setting does not require the Show/hide Columns setting on the table to be enabled.

You can change the color of the text and background in a cell based on conditions using Conditional Cell Properties. The conditions are evaluated in the context of the current table row. This allows you to style the cell based on all properties stored on the object being displayed.

Row Selection

It is possible to enable Row selection on the table. The setting is data-bound, which allows Row selection to be toggled on and off runtime. The default selection type is multiple, and enabling row selection will include a checkbox at the beginning of each row. There is an explicit setting Single Select, which can be checked if the table should allow for only one selection. Furthermore, the Toolbar has a setting for displaying the number of items selected, Selection Count.

Note that enabling Row Selection will flag the objects in the Data Source as Selected when the user selects rows, and vice versa when deselecting them.

Edit mode

The table is read-only by default but can be set editable using the data-bound setting Edit mode. If the table has edit mode enabled, the table columns will be rendered as input fields. At the column level, there is a separate section for Edit mode which allows you to specify if the column should be read-only or disabled in the edit mode. Reference properties will be shown as selects, and they have their own settings on which options should be available. Furthermore, it is possible to add an action that should be run On value change.

Toolbar

It is possible to enable a toolbar on the table. On the toolbar, you can specify a data-bound title, which also has a parameter totalRowCount, which can be added using handlebars {{totalRowCount}} in the title, to display the total number of rows.

If Row selection is added to the table, it is possible to show the Selection Count in the toolbar.

There are predefined events for Search, Filter, Show/Hide Columns and Download as CSV that can be enabled, but you can also add your own toolbar actions. Search is an inline search field searching across all columns, while filter opens a popover with filters for the columns. At the column level, you can check the box Exclude from Search or Exclude from Filter if you want to exclude a specific column from search or filtering. Show/Hide Columns provide the end-user with a possibility to add or remove columns from the table. If this option is set, it is also possible to Initially hide a column at the column level. Download as CSV lets the user export the table content to a CSV file. Note that Download as CSV should have a CSV Value Delimiter set to ; for European users (where CSV files are stored with a semicolon as column separator), as opposed to US users (where , is used).

As previously mentioned, it is possible to add your own toolbar actions either in a dropdown menu in the toolbar or as single actions. It is possible to limit the action to only be available when some rows are selected.

Header

The header can be set to be fixed, meaning that the header sticks to the top of the page when scrolling. There is also an option to completely hide the header.

For a fixed header to work, you may need to set the height of the table to 100%.

Button Add all Properties as columns will add all the Object Class Properties (and runtime properties) of the selected Data Source as Table Columns. Reference properties will only be added if the refered Object Classes have a set. Example: Adding all columns for Data Source Contacts (having a reference Contact.Company) will add Contact.Company.Name as a columns if the Object Class Company has Name as Display Property.

Showroom
here
Display Property
multi-reference property