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

So whilst there's no OOTB nice way to do this,m with some imagination you can achieve this. In an a!gridField() an individual a!gridColumn() can have its 'showWhen' attribute set. So, splitting the problem into two:

• scrolling the columns - have control components that you can click to scroll left/right, and have these save into a local variable that acts as the 'position' of the first column. So, for example, if you click the scroll right, then you add one to the position of the first column, If a given column is less than the position of the first column, the set the 'showWhen' to false.
• freezing the first 3 columns: simply set their 'showWhen' to true, irrespective of the above rule

Obviously you'll need to handle not being able to scroll further left than column 1, or further right than the last column (column 50 in your case).

I've gone ahead and built an example...

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"},
    {id: 2, name: "two", data1: "data1", data2: "data2", data3: "data3", data4: "data4", data5: "data5", data6: "data6", data7: "data7", data8: "data8", data9: "data9"},
    {id: 3, name: "three", data1: "data1", data2: "data2", data3: "data3", data4: "data4", data5: "data5", data6: "data6", data7: "data7", data8: "data8", data9: "data9"}
  },
  
  local!defaultColumnPointerValue: 1,
  local!optionalColumnPointer: local!defaultColumnPointerValue,
  local!optionalColumnsLength: 3,
  local!allOptionalColumns: {"data3", "data4", "data5", "data6", "data7", "data8", "data9"},
  local!maxOptionalColumnPointerValue: length(local!allOptionalColumns) - 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",
                    width: "ICON",
                    value: fv!row.id
                  ),
                  a!gridColumn(
                    label: "data1",
                    value: fv!row.data1
                  ),
                  a!gridColumn(
                    label: "data2",
                    value: fv!row.data2
                  ),
                  a!gridColumn(
                    /*label: "<<",*/
                    helpTooltip: "More columns to the left",
                    showWhen: local!optionalColumnPointer > 1,
                    align: "CENTER",
                    width: "ICON",
                    value: a!richTextDisplayField(
                      value: a!richTextIcon(icon: "caret-left", caption: "Scroll Left to see more columns")
                    )
                  ),
                  
                  a!forEach(
                    local!selectedOptionalColumns,
                    a!gridColumn(
                      label: fv!item,
                      value: property(fv!row, fv!item, "--")
                    )
                  ),
                  

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

Nice! 

Nice!