Click Add Fields dropdown to insert fields into a table. You can also add a button group from that drop down.

Add Button Group

This inserts a button group directly into the Table component at the selected location.

When you add buttons to the Table component, these buttons have their own properties. All Table button properties are the same as those for Ink Button Set buttons.

Click Add features to add features to your table, including actions and filters.

Add Actions

You can access Row Actions, Global Actions, and Mass Actions via the Add features menu on the component. Actions can then be updated by clicking on them.

You can add actions to clicks and right-clicks by configuring actions in the Interactions tab.

Add Filters

You can filter data within a Table component using either the Filter Set component, or by adding a filter on the Table component itself ( Add features > Table filter ). Learn more about creating, configuring, and conditionally rendering filters.

• The property Allow users to reorder columns (Display tab > Columns) lets users drag and drop column headers to reorder them on the page.
• The property Allow column hiding (Display tab > Columns) lets users open the Table Settings modal and choose whether the associated column will be visible on the page.

Note:  These settings persist whenever end users revisit the page, as they are stored in the Personalization framework.

There are two ways to apply a sort in the Table component:

• Click on the Sort Builder in the component and build a sort.
• Click on the sort icon in the column header.

To enable sort within the column header, check the box to Allow users to sort by column on the General tab of the Table properties.

Click the sort icon in the column header to interact with the sort dropdown.

The sort dropdown provides three options:

• Sort ascending
• Sort descending
• Clear sort

As you select or clear options in the dropdown, the sort sequence in the Sort Builder will update accordingly.

Using Data grid mode will allow the user to rapidly input or edit data using up/down arrows, Esc, Enter, and Tab. This eliminates the need for a separate mouse click to edit and speeds up data input via the keyboard.

Checkbox

• Tab: focuses on the tab to the immediate right of the current cell
• Enter: checks/unchecks
• Spacebar: selects/deselects

Combobox

• Esc: confirms changes, closes dropdown and returns to Focus state
• Tab: confirms changes, focuses on the tab to the immediate right of the current cell
• Enter: when in edit mode, selects the focused menu item and returns the current cell to Focus state
• Up/down: navigate dropdown menu
• Spacebar: selects/deselects

Currency

• Tab: focuses on the tab to the immediate right of the current cell
• Enter: checks/unchecks

Date

• Esc: confirms changes and returns to Focus state
• Tab: confirms changes and focuses on the tab to the immediate right of the current cell
• Enter: confirms changes and focuses on the tab immediately below the current cell

If the date is incomplete when changes are confirmed, the date will default in the following ways:

• Date is blank: cell is left empty
• Only month provided: defaults the day to '1' and the year to [THIS YEAR]
• Only month and day provided: defaults the year to [THIS YEAR]

Datetime

• Esc: confirms changes and returns to Focus state

• Tab:

  • if editing the time, confirms changes and focuses on the tab to the immediate right of the current cell
  • if editing the date, highlights the time section of the current cell

• Enter:

  • when in edit mode, if item in dropdown menu is focused, confirms changes and highlights the date section of the current cell
  • when in edit mode, if no item in dropdown menu is focused, confirms changes and focuses on the tab immediately below the current cell

If the date is incomplete when changes are confirmed, the date will default in the following ways:

• Date is blank: cell is left empty
• Only month provided: defaults the day to '1' and the year to [THIS YEAR]
• Only month and day provided: defaults the year to [THIS YEAR]

Email

• Esc: exits edit mode and returns to Focus state
• Tab: confirms changes and focuses on the tab to the immediate right of the current cell
• Enter: when in edit mode, confirms changes and focuses on the tab immediately below the current cell

Formula

Formula fields are not editable in this mode.

Multi-select picklist

• Esc: confirms changes and closes dropdown and returns to Focus state
• Tab: confirms changes and focuses on the tab to the immediate right of the current cell
• Enter: when in edit mode, selects the focused menu item
• Up/down: navigate dropdown menu.

Number

• Esc: exits edit mode and returns to Focus state
• Tab: confirms changes and focuses on the tab to the immediate right of the current cell
• Enter: when in edit mode, confirms changes and focuses on the tab immediately below the current cell

Percent

• Esc: exits edit mode and returns to Focus state
• Tab: confirms changes and focuses on the tab to the immediate right of the current cell
• Enter: when in edit mode, confirms changes and focuses on the tab immediately below the current cell

Picklist

• Esc: closes dropdown and returns to Focus state
• Tab: focuses on the tab to the immediate right of the current cell
• Enter: when in edit mode, selects the focused menu item and returns the current cell to Focus state
• Up/down: navigate dropdown menu

Reference

• Esc: closes dropdown and returns to Focus state

• Tab:

  • when menu item focused, focuses on 'View all'
  • when 'View all' focused, focuses on the tab to the immediate right of the current cell

• Enter:

  • when in edit mode with a menu item focused, selects the focused menu item
  • when in edit mode with the 'View all' button focused, opens search modal

• Up/down: navigate dropdown menu

Text

• Esc: exits edit mode and returns to Focus state
• Tab: confirms changes and focuses on the tab to the immediate right of the current cell
• Enter: when in edit mode, confirms changes and focuses on the tab immediately below the current cell

Text area

• Esc: confirms changes and returns to Focus state
• Tab: confirms changes and focuses on the tab to the immediate right of the current cell
• Enter: when in edit mode, confirms changes and focuses on the tab immediately below the current cell

URL

• Esc: exits edit mode and returns to Focus state
• Tab: confirms changes and focuses on the tab to the immediate right of the current cell
• Enter: when in edit mode, confirms changes and focuses on the tab immediately below the current cell

Unique ID

• Esc: exits edit mode and returns to Focus state
• Tab: confirms changes and focuses on the tab to the immediate right of the current cell
• Enter: when in edit mode, confirms changes and focuses on the tab immediately below the current cell

A character counter helps end users know when they are approaching the content limit for text entry fields and encourages them to make input more succinct. Nintex Apps property Show length counter adds a counter for string fields and the larger textarea fields:

1. Click the string or textarea field within the component.
2. In the Field Properties pane, check Show length counter.

When editing the field, end users will now see a character countdown ("25/ 128") that indicates the number of characters used (the first number) and how many total characters are allowed (the second number).

Change the field character limits

When using the counter, the character limits are preset by the connection. (For example, Salesforce sets a limit of 128 characters for string fields, and 3200 characters for textarea fields). These limits are set by the field's metadata.

To change the limit:

1. Click the model with the field whose limit you want to override, then click Fields.

2. Click the specific textarea or string field.

3. In the Field's Description pane, check Override field metadata.

   • Under Length, set the length to the desired number of characters.

4. Click Save.

For more information on field metadata overrides, see Field Metadata Overrides topic.

• Model: The model the Table will display data from.

  Note:  When you have multiple models, make sure you select the correct one!

• Default mode:

  • Read with inline-editing (default): Displays records in read mode on page load. End users can click edit Edit to convert to Edit mode.

  • Edit: Records display in edit mode on page load; end users can toggle individual records to read mode by clicking edit Edit. Edit mode is best used for new, clone, and edit pages where you want all table rows open for editing.

  • Data grid: Records display in edit mode on page load. Optimized for keyboard interactions, end users can quickly move through the table to navigate and edit. A complete list of keyboard interactions is listed under

    • Esc - confirms changes and returns to Focus state
    • Tab - confirms changes and focuses on the tab to the immediate right of the current cell
    • Shift + Tab - Reverse tab through the table
    • Enter - confirms changes and focuses on the tab immediately below the current cell
    • Up/down - navigate the dropdown menu
    Note: 

    • If date is incomplete when changes are confirmed, the date will default in the following ways:
      • Date is blank: cell is left empty
      • Only month provided: defaults the day to '1' and the year to [THIS YEAR]
      • Only month and day provided: defaults the year to [THIS YEAR]
    • While in Data grid mode, links in editable fields aren't clickable. There are two ways to address this:
      • Select the field in the Table component and check Read-only in the Field properties pane. This locks the field for the end user.
      • Allow end users to toggle Table mode by adding a Change Table mode action and selecting either Edit or Read with inline-editing mode.

  • Read-only: Records display in read mode and cannot be edited.

    Note:  Skuid works with your connection's security settings so users will not be able to edit records they don't have permission to edit (even if the table is set to Edit mode). While you should not use this as a security measure, setting the Default Mode to Read-Only ensures that the end user can not edit the Table's content on the page.

• Allow users to sort by column: Check this box to display buttons that allow end users to sort the table by this column's values, both ascending and descending. ( Checked by default. )

  Note:  Columns with sorting allowed have clickable triangles: up-pointed triangles sort the column in Ascending (Z to A) order; down-pointed triangles sort the column in Descending (A to Z) order.

• Show save and cancel buttons: Check to display the Save and Cancel buttons above the table. ( Checked by default. )

• Table title: The title that displays above the Table. (If left blank, the Table does not have a title.) Can also contain rendered HTML if Allow HTML in title and column header labels is enabled.

• Allow HTML in title and column header labels: When enabled, any HTML markup within the component's title or any column header labels (configured via the field's Custom label property) will be parsed and rendered per the markup.

  It's also possible to use this feature for other, more advanced HTML elements.

  Important:  While using custom HTML can allow for powerful customizations, it can come with risks. Custom HTML can result in unexpected behaviors. If you do use custom HTML, test your pages thoroughly in a sandbox environment after each Nintex Apps update.

In this tab are properties that control whether or not you have a search box, and when search terms and conditions are applied.

Search properties

In this tab are properties that control whether or not you have a search box, and when search terms and conditions are applied.

• Filter & Search Behavior:

  • Apply filters and search immediately: If checked, all changes made to filters, or any text typed into the search bar, will be applied immediately. If unchecked, Nintex Apps displays the Apply and Cancel buttons. The changes will not be applied until the end user selects Apply.

    Note:  This is particularly useful when employing multiple filter criteria.

• Search Properties:

  • Show search box: If checked, Nintex Apps displays a search box above the component.

  • Search method: Determines if a search will query the server and filter its data, or filter local data on the client.

    • Server (default): Returns search results from all data on the server.

    • Client: Returns search results from only the data that is currently loaded on the page. Large data sets may require lengthy time to filter. If end users commonly need to sort only the data they have loaded within the page—as opposed to every record on the server—this property may speed the filter process.

      Important:  If the server contains a large data set not yet loaded into the page, but Search Method is set to Client, the filter may return incomplete results because it's filtering incomplete data. This may result in unexpected omissions.

• Search results: Determines which results are displayed based on the end user's search query.

  • Match exactly: Results are only shown for records that contain the search term verbatim.

    If the user searches for George Washington, only the records containing George Washington exactly as written—with no other terms in between—would be displayed.

  • Contain all terms: Results are shown for records that contain all of the terms in the query, even if they may appear in a different order or disconnected from each other.

    If the user searches for George Washington, any record containing George and Washington would be displayed, as long as both terms were anywhere within the record.

  • Contain at least one term: Results are shown for records that contain any of the terms in the query.

    If the user searches for George Washington, any record containing George or Washington would be displayed.

Search fields

Specifies which fields will be searched against from the component's search bar.

• Search fields: Specifies which fields will be searched against from the component's search bar.

  Note: 

  Depending on the connection used for the model attached to the component, this property may not be available.

  • Field: Nintex Apps searches on searchable fields by default. Search can be narrowed to individual fields by clicking add Add new Search Field, and then using the field picker to select the field.

    Note: 

    • ( Salesforce connections only ) SOQL can search Picklist fields and Reference fields, but not Long Text fields.
    • You can add multiple search fields.

    • Search operator: Select from the following logical operators:

      • =
      • starts with
      • Contains

Nintex Apps for Salesforce

By default, Salesforce Objects use SOQL. To ensure proper functionality, enable the Allow Search property on any Salesforce objects to be included in the search.

For more information on using these search options with Salesforce, check out Salesforce's SOQL and SOSL Reference Guide.

Sort tab

Sort properties

These properties determine the appearance and behavior of the Sort Builder.

• Show sort builder: Check to display the Sort Builder in the component at runtime.
  • Button icon: The icon to display next to the label. Click the icon picker to select a different icon.
  • Button label: The label text that appears on the Sort Builder at runtime. Change the text to match what you want to say to your end users.
• Sort client-side: Check to only sort on field values that are loaded into the page at the time the sort is applied. This means that the sort will be applied to data in the model, not to data still on the server.

Export properties allow end users to configure and customize the data they'd like to export into a CSV file.

Important:  Data export is not supported when using the Salesforce Mobile app.

Export properties apply to the Export Table data option in the Table header menu and the Export Table data component action.

• Add export option to the Table header menu: If checked, then users will see a menu in the Table's header. The menu provides an option to export the Table's data.

• Use table columns as export columns: If checked, the Table will export all columns added to the Table. If unchecked, Export Columns is displayed in the Properties pane allowing users to add new columns and customize which fields are exported.

  Note:  Checking Allow users to show/hide column on a field's properties will not affect which columns are exported. If users hide columns within a Table, their export will still include all columns within the component.

• Append row ID column: If checked, a column will be added to the export which contains the ID of each exported row.

• Attempt to load in all records before export: If checked, Nintex Apps will load every available record before exporting.

  Important:  Some connections may limit how many records are returned in one call. If a call tries to return records that exceed a connection's stated limit, an error will be returned and the export will fail.

• Sanitize field values: When enabled, all field values are prepended with a single quote and then wrapped in double quotes to ensure they are treated as strings. This helps prevent malicious formulas from running in other applications.

For example, this value:

=A4+'PotentiallyMaliciousFormula'+@

Becomes this value in the exported CSV:

"'=A4+'PotentiallyMaliciousFormula'+@"

• Custom file name: If set, the value of this field will be used as custom name for the exported CSV file.

Export columns

These properties allow end users to configure and customize the columns they'd like to export into a CSV file.

Note:  These properties only display if Use Table Columns as Export Columns is unchecked, a user has added at least one column, and the new column added under Export Columns is selected.

• Column type: The type of column used in the export:
  • Field: This option allows you to select a single field for export. Unselected columns will not be exported.
    • Field: The specific model field to export, selectable from picklist populated with fields from the connected model.
    • Header type: Determines what column header text is displayed in the exported CSV:
      • Use field label: If checked, the exported CSV will display the field's Label metadata, which is often a less-technical, human-readable name. For example: Account Name or Employees
      • Use field API name: If checked, the exported CSV will display the field API name, which is often used by systems for data import or other backend processes. For example: Name or NumberOfEmployees.
      • Custom label: If checked, the exported CSV will display a custom label instead of any associated label or API name.
        • Label: The custom text to be displayed as a column header.
  • Template: Use template column types to include multiple fields in one column through merge syntax.
    • Template: Specifies which fields the template should include by either selecting them from the field picker, manually entering their merge variables, or using custom text.
    • Label: The custom text to be displayed as a column header.

Click add Add interaction then select:

• Action type: Determines the type of user interaction that triggers the action script.

In the dots-vertical More Options menu on the selected interaction, click Add action, then edit the Action Type:

• Action Type: Use the Action Framework to launch actions.

• Style variant: Style variants are created and set in the Design System Studio. Some components have pre-defined variants for a specific aspect of a component's style. Also, Nintex Apps builders can style and customize elements to create their own themes within the DSS. These themes will dynamically populate as selectable values in the Style Variant dropdown menu.

  Note: 

  To refresh available style variant options, click refresh Refresh style variants.

  This is useful for when changes to the design system (like style variants or variable options) have been made in another browser window or by another user.

• Margin: Sets a component's margin (the space around it) relative to other components on the page.

  • To set margins for all sides, click border-all All.
  • To set margins for each side individually, click border-separate Separate.

  Margin values can be set to any configured spacing variable for the page's design system. Margin cannot be set an arbitrary value; it must use a design system variable.

Standard display logic options are available to display or hide the component or feature.

In addition to adding Fields from the Add Fields drop down on the component, it's possible to add a Template. This creates a field on the table which can be configured from the Field Properties tab.

Template fields provide a way to display arbitrary text or HTML alongside field data. Other fields may be included within a template field through the use of merge syntax.

A basic template field for a full name may look like this:

{{FirstName}} {{LastName}}

It is also possible to update any fields included within a template field at runtime by double-clicking the Template field within the component.

For additional information, see Using Fields.