=load(
  local!items: {
    {id: null, summary: "Item 1"},
    {id: null, summary: "Item 2"},
    {id: null, summary: "Item 3"}
  },
  /* Needed when adding or removing items via a!applyComponents */
  local!itemsToken,
  a!formLayout(
    label: "SAIL Example: Inline Editable Grid",
    firstColumnContents: {
      a!gridLayout(
        headerCells: {
          a!gridLayoutHeaderCell(label: "Summary"),
          /* For the "Remove" column */
          a!gridLayoutHeaderCell(label: "")
        },
        /* Only needed when some columns need to be narrow */
        columnConfigs: {
          a!gridLayoutColumnConfig(width: "DISTRIBUTE"),
          a!gridLayoutColumnConfig(width: "NARROW")
        },
        rows: a!applyComponents(
          function: rule!ucItemRowEach(
            items: local!items,
            index: _,
            itemsToken: local!itemsToken
          ),
          array: if(or(isnull(local!items), count(local!items) < 1), {}, 1+enumerate(count(local!items))),
          arrayVariable: local!itemsToken
        )
      ),
      a!linkField(
        label: "Add Link",
        labelPosition: "COLLAPSED",
        links: a!dynamicLink(
          label: "+Add Item",
          /*
           * For your use case, set the value to a blank instance of your CDT using
           * the type constructor, e.g. type!PurchaseRequestItem(). Only specify the field
           * if you want to give it a default value e.g. due: today()+1.
           */
          value: {due: today() + 1},
          saveInto: {
            a!save(local!items, append(local!items, save!value)),
            /* When modifying the size of the array used in a!applyComponents, /
            / make the same change in the "token" array variable               */
            a!save(local!itemsToken, append(local!itemsToken, save!value))
          }
        )
      )
    },
    buttons: a!buttonLayout(
      primaryButtons: a!buttonWidgetSubmit(
        label: "Submit"
      )
    )
  )
)