Can we freeze the data columns when the user scrolls in data grid

Updated version that uses your total columns, and i've also fixed some of my pointer math to make it more intuitive to deal with on the form:

a!localVariables(
  
  local!data: {
    {id: 1, name: "one", data1: "data1", data2: "data2", data3: "data3", data4: "data4", data5: "data5", data6: "data6", data7: "data7", data8: "data8", data9: "data9",data10: "data10", data11: "data11", data12: "data12", data13: "data13", data14: "data14", data15: "data15", data16: "data16", data17: "data17", data18: "data18", data19: "data19",data20: "data20", data21: "data21", data22: "data22", data23: "data23", data24: "data24", data25: "data25", data26: "data26", data27: "data27", data28: "data28", data29: "data29",data30: "data30"},
    {id: 2, name: "two", data1: "data1", data2: "data2", data3: "data3", data4: "data4", data5: "data5", data6: "data6", data7: "data7", data8: "data8", data9: "data9",data10: "data10", data11: "data11", data12: "data12", data13: "data13", data14: "data14", data15: "data15", data16: "data16", data17: "data17", data18: "data18", data19: "data19",data20: "data20", data21: "data21", data22: "data22", data23: "data23", data24: "data24", data25: "data25", data26: "data26", data27: "data27", data28: "data28", data29: "data29",data30: "data30"},
    {id: 3, name: "three", data1: "data1", data2: "data2", data3: "data3", data4: "data4", data5: "data5", data6: "data6", data7: "data7", data8: "data8", data9: "data9",data10: "data10", data11: "data11", data12: "data12", data13: "data13", data14: "data14", data15: "data15", data16: "data16", data17: "data17", data18: "data18", data19: "data19",data20: "data20", data21: "data21", data22: "data22", data23: "data23", data24: "data24", data25: "data25", data26: "data26", data27: "data27", data28: "data28", data29: "data29",data30: "data30"}
  },
  
  local!defaultColumnPointerValue: 1,
  local!optionalColumnPointer: local!defaultColumnPointerValue,
  local!optionalColumnsLength: 6,
  local!allOptionalColumns: {"data3", "data4", "data5", "data6", "data7", "data8", "data9","data10","data11","data12","data13","data14","data15","data16","data17","data18","data19","data20", "data21","data22","data23","data24","data25","data26","data27","data28","data29","data30"},
  local!maxOptionalColumnPointerValue: (length(local!allOptionalColumns)+1) - local!optionalColumnsLength,
  local!selectedOptionalColumns: index(
    local!allOptionalColumns,
    enumerate(local!optionalColumnsLength) + local!optionalColumnPointer,
    null()
  ),
  
  a!sectionLayout(
    contents: {
      a!columnsLayout(
        columns: {
          a!columnLayout(
            contents: {
              a!gridField(
                data: local!data,
                columns: {
                  a!gridColumn(
                    label: "Id",
                    value: fv!row.id,
                    width: "ICON"
                  ),
                  a!gridColumn(
                    label: "data1",
                    value: fv!row.data1
                  ),
                  a!gridColumn(
                    label: "data2",
                    value: fv!row.data2
                  ),
                  a!gridColumn(
                    helpTooltip: "More columns to the left",
                    value: a!richTextDisplayField(
                      value: a!richTextIcon(icon: "caret-left", caption: "Scroll Left to see more columns")
                    ),
                    showWhen: local!optionalColumnPointer > 1,
                    align: "CENTER",
                    width: "ICON"
                  ),
                  
                  a!forEach(
                    local!selectedOptionalColumns,
                    a!gridColumn(
                      label: fv!item,
                      value: property(fv!row, fv!item, "--")
                    )
                  ),
                  

                  a!gridColumn(
                    helpTooltip: "More columns to the right",
                    value: a!richTextDisplayField(
                      value: a!richTextIcon(icon: "caret-right", caption: "Scroll Right to see more columns")
                    ),
                    showWhen: local!optionalColumnPointer < local!maxOptionalColumnPointerValue,
                    align: "CENTER",
                    width: "ICON"
                  )
                }
              ),
              a!richTextDisplayField(
                value: {
                  a!richTextItem(
                    text: {
                      a!richTextIcon(
                        icon: "long-arrow-left",
                        caption: "Scroll Left" & if(local!optionalColumnPointer <= local!defaultColumnPointerValue, " (disabled)", ""),
                        color: if(
                          local!optionalColumnPointer <= local!defaultColumnPointerValue,
                          "#D3D3D3",
                          ""
                        )
                      )
                    },
                    link: a!dynamicLink(
                      saveInto: {
                        a!save(
                          local!optionalColumnPointer,
                          local!optionalColumnPointer - 1
                        )
                      },
                      showWhen: local!optionalColumnPointer > local!defaultColumnPointerValue
                    ),
                    linkStyle: "STANDALONE",
                    size: "LARGE"
                  ),
                  "   ",
                  a!richTextIcon(
                    icon: "map-o",
                    caption: "Reset",
                    link: a!dynamicLink(
                      saveInto: {
                        a!save(
                          local!optionalColumnPointer,
                          local!defaultColumnPointerValue
                        )
                      },
                      showWhen: local!optionalColumnPointer <> local!defaultColumnPointerValue
                    ),
                    linkStyle: "STANDALONE",
                    color: if(
                      local!optionalColumnPointer = local!defaultColumnPointerValue,
                      "#D3D3D3",
                      null()
                    ),
                    size: "MEDIUM_PLUS"
                  ),
                  "   ",
                  a!richTextItem(
                    text: {
                      a!richTextIcon(
                        icon: "long-arrow-right",
                        caption: "Scroll Right" & if(local!optionalColumnPointer >= local!maxOptionalColumnPointerValue, " (disabled)", ""),
                        color: if(
                          local!optionalColumnPointer >= local!maxOptionalColumnPointerValue,
                          "#D3D3D3",
                          ""
                        )
                      )
                    },
                    link: a!dynamicLink(
                      saveInto: {
                        a!save(
                          local!optionalColumnPointer,
                          local!optionalColumnPointer + 1
                          
                          /* you can use this value here (or in a separate control) to jump to the end */
                          /*local!maxOptionalColumnPointerValue*/
                        )
                      },
                      showWhen: local!optionalColumnPointer < local!maxOptionalColumnPointerValue
                    ),
                    linkStyle: "STANDALONE",
                    size: "LARGE"
                  )
                },
                align: "RIGHT"
              )
            }
          )
        }
      )
    }
  )
)