DataGrid rows counts change based on another input field value in formIO

Question

Consider I have an input field to enter a number of children. When the user enters 2, the data grid component containing child details should display 2 rows without clicking the "Add another" button. If the user enters 3, then 3 rows should be displayed.

Initially, when rendering, the form looks like this,

rendered form

when the user enters the count as 3 to the text field, then the data grid should display with 3 rows,

expected output

Answer 1

There are a number of ways to do this, here's one based on the component's addRow() and removeRow(index) functions:

Run a function that reconciles the number of rows based on the value of another component. In the component's Calculated Value field, you could add something like

let current = instance.rows.length;
let expected = data.numberOfRows || 1;
if (current > expected) {
  for (let i = 0; i <= current - expected; i++) {
    instance.removeRow(current - i);
  }
} else if (current < expected) {
  for (let i = 0; i < expected - current; i++) {
    instance.addRow();
  }
}

or tie the above to an event triggered by a button. Here's a JSFiddle of a simple working example.