Skip to main content

​
Widget Core Function

UI Experience: Dropdown list for the user
Data Organization: Allows engineers to create selection tables directly within the calculator builder without external file dependencies.

​
Key Features

  • Create custom selection tables directly in the builder
  • Store and access the row index of selected items
  • Access entire rows of data once a user makes a selection
  • Support for radio button display as an alternative to dropdowns
  • Mix of numbers and strings in data tables

​
Video Tutorial

Create a Data Table Example

Watch Tutorial Learn how to create and configure data table lookups step by step

​
Visual Presentation

Data table dropdown interface in pause mode

​
Configuration

​
Example Code

{
  "type": "sheetTemplateWidgets",
  "attributes": {
    "type": "lookup",
    "label": "Load Factor",
    "symbol": "k_f",
    "defaultValue": "0",
    "visibleIf": "",
    "enableAutosize": false,
    "radioListDisplay": false,
    "dataColumns": [
      {
        "label": "Load Type",
        "key": "loadType",
        "type": "string"
      },
      {
        "label": "Factor",
        "key": "factor",
        "type": "number"
      }
    ],
    "dataTable": [
      ["Dead Load", 1.2],
      ["Live Load", 1.6],
      ["Wind Load", 1.0],
      ["Seismic Load", 1.0]
    ],
    "referenceId": "load_factor_lookup",
    "references": "AS 1170",
    "description": "Select appropriate load factor",
    "authorNotes": "",
    "referenceImage": ""
  }
}

​
Configuration Parameters

​
type
string
required
Set to “lookup” to define the widget type
​
enableAutosize
boolean
default:"false"
Whether or not to enable the autosize function on the lookup. Will only work if the table has preferred sections (not currently possible without sharedTables)
​
radioListDisplay
boolean
default:"false"
If true, the lookup widget will display as a set of radio buttons instead of as a dropdown list
​
dataColumns
array
required
Lookup Column Object - The column labels and properties for the lookup to display
​
dataTable
matrix
required
The data to be displayed in the lookup, which may be a mix of numbers and strings. Index 0 will always be displayed in the dropdown itself.

​
Data Column Structure

Each column in the dataColumns array should follow this structure: 
{
  "label": "Column Display Name",
  "key": "column_key",
  "type": "string" | "number" | "boolean"
}

​
Column Properties

​
label
string
required
The display name for the column header
​
key
string
required
The internal key used to reference this column’s data
​
type
string
required
The data type for this column: “string”, “number”, or “boolean”

​
Data Table Structure

The dataTable is a matrix where:
  • Each row represents one option in the lookup
  • Each column corresponds to the columns defined in dataColumns
  • Index 0 (first column) is always displayed in the dropdown
  • Data can be a mix of numbers, strings, and booleans

​
Example Data Table

"dataTable": [
  ["Option 1", 1.5, true],
  ["Option 2", 2.0, false],
  ["Option 3", 1.2, true]
]

​
Display Options

The standard dropdown interface where users select from a list of options.

​
Radio Button Display

Set radioListDisplay: true to display options as radio buttons instead of a dropdown. This is useful when:
  • You have a small number of options (typically 2-5)
  • You want all options visible at once
  • The selection is a key decision point in the calculation

​
Examples from Current Calculators

Reference IDCalculator Link
lookup (k_4)Steel Beam Calculator

​
Best Practices

  1. Column Design: Keep the first column (index 0) as the primary identifier that users will see in the dropdown
  2. Data Organization: Organize your data logically with the most commonly used options first
  3. Mixed Data Types: Take advantage of the ability to mix strings and numbers in the same table
  4. Radio vs Dropdown: Use radio buttons for 2-5 options, dropdowns for more options
  5. Clear Labels: Use descriptive column labels that clearly indicate what each column represents
  6. Default Selection: Set appropriate default values using row indices (starting from 0)

​
Accessing Selected Data

Once a user makes a selection, you can access:
  • The selected row index using the widget’s referenceId
  • Specific column values using lookup functions in equation widgets
  • The entire row data for complex calculations
Example of accessing data in a equation widget: 
// Get the selected row index
selectedIndex = @load_factor_lookup

// Access specific column data
loadType = dataTableValue(@load_factor_lookup, selectedIndex, 0)  // First column
factor = dataTableValue(@load_factor_lookup, selectedIndex, 1)    // Second column
⌘I