User Interface

Can Anyone suggest, how this can be done using grid or however?

A combination of columns layouts and grid layouts should do it. What did you try so far?

As Stefan mentioned you can achieve this using grid layouts and column layout.

okay thanks Stefan Helzle and Naresh

a!localVariables(
  local!data: {
    {
      key1: "Current ROC",
      key2: "AVG_NET_ROC",
      Key3: "AVG_GROSS_ROC"
    },
    {
      key1: " ",
      key2: "AVG_NET_ROC",
      key3: "NET_ROC"
    },
    {
      key1: "NET ROC",
      key2: "AVG_NET_ROC",
      key3: "TARGET_NET_ROC"
    }
  },
  {
    a!columnsLayout(
      columns: {
        a!columnLayout(
          contents: {
            a!richTextDisplayField(value: a!richTextItem(text: " ")),
            a!gridField(
              data: local!data,
              columns: {
                a!gridColumn(label: " -", value: fv!row.key1)
              }
            )
          },
          width: "NARROW"
        ),
        a!columnLayout(
          contents: {
            a!richTextDisplayField(
              value: a!richTextItem(text: "Individual")
            ),
            a!gridField(
              data: local!data,
              columns: {
                a!gridColumn(label: "Net ", value: fv!row.key2),
                a!gridColumn(label: " Gross", value: fv!row.key3)
              }
            )
          }
        ),
        a!columnLayout(
          contents: {
            a!richTextDisplayField(
              value: a!richTextItem(text: "Group")
            ),
            a!gridField(
              data: local!data,
              columns: {
                a!gridColumn(label: "Net ", value: fv!row.key2),
                a!gridColumn(label: " Gross", value: fv!row.key3)
              }
            )
          }
        )
      },
      showDividers: true()
    )
  }
)