Skip to main content

Working with Data Grids

Data grids allow users to enter multiple rows of structured data.

Basic Data Grid Setup​

To create a data grid:

  1. Add a Data Grid component to your form
  2. Configure columns by adding components to the grid
  3. Set minimum and maximum rows if needed
  4. Configure add/remove row button labels

Calculated Columns​

Add calculated fields to data grids:

  1. Add a Number component to a data grid column
  2. Go to the API tab (Technical Properties)
  3. In the Calculated Value field, reference other columns in the same row using row.columnKey

Example: Calculate row total:

value = row.quantity * row.price;

Summarizing Grid Data​

Calculate totals or summaries from grid data:

  1. Add a calculated field outside the grid
  2. Reference grid data using data.gridName
  3. Use array methods to process the data

Example: Calculate sum of all row totals:

value = data.lineItems.reduce(function(sum, row) {
  return sum + (parseFloat(row.total) || 0);
}, 0);

Example: Count rows that meet a condition:

value = data.employees.filter(function(row) {
  return row.department === 'IT';
}).length;