read only grid

i have tried with card layout and grid, but am getting scroll bar which will not know for which header which data is. given width as well but no use.

i have to display 12 columns 

Please share the complete code and also your data sample

this is the requirement and data will be all integer value except first column 

for the first header i have used like

card layout

  side by side layout

      side by side item

  read only grid

I would prefer what Mike has mentioned below. But If this works for you, you can use the below code

a!localVariables(
  local!data: rule!KS_getRecordToDetlete(),
  {
    a!forEach(
      items: local!data,
      expression: {
        a!columnsLayout(
          spacing: "NONE",
          marginBelow: "NONE",
          marginAbove: "NONE",
          columns: {
            a!columnLayout(
              width: "NARROW_PLUS",
              contents: a!cardLayout(
                marginAbove: "NONE",
                marginBelow: "NONE",
                padding: "NONE",
                contents: {
                  a!richTextDisplayField(
                    value: a!richTextItem(
                      text: "",
                      style: "STRONG",
                      showWhen: fv!isFirst
                    ),
                    align: "CENTER"
                  ),
                  a!gridField(
                    data: fv!item,
                    columns: a!gridColumn(
                      label: if(fv!isFirst, "Name of Borrower", ""),
                      value: fv!item['recordType!{fb324deb-007c-495f-98dd-65e2ea1e6cdd}KS Record to Delete.fields.{6436f9d3-5bce-4f75-b74a-ffa968c3ce41}name'],
                      align: "CENTER",
                      width: "NARROW"
                    )
                  )
                }
              )
            ),
            a!columnLayout(
              width: "NARROW_PLUS",
              contents: a!cardLayout(
                marginAbove: "NONE",
                marginBelow: "NONE",
                padding: "NONE",
                contents: {
                  a!richTextDisplayField(
                    value: a!richTextItem(
                      text: "",
                      style: "STRONG",
                      showWhen: fv!isFirst
                    ),
                    align: "CENTER"
                  ),
                  a!gridField(
                    data: fv!item,
                    columns: a!gridColumn(
                      label: if(fv!isFirst, "CIF", ""),
                      value: fv!item['recordType!{fb324deb-007c-495f-98dd-65e2ea1e6cdd}KS Record to Delete.fields.{2c5fe606-38cb-47bf-8e46-a8df08483640}CIF'],
                      align: "CENTER",
                      width: "NARROW"
                    )
                  )
                }
              )
            ),
            a!columnLayout(
              contents: a!cardLayout(
                padding: "NONE",
                marginAbove: "NONE",
                marginBelow: "NONE",
                contents: {
                  a!richTextDisplayField(
                    marginAbove: "NONE",
                    value: a!richTextItem(
                      text: "Trade Paper Limit",
                      style: "STRONG",
                      showWhen: fv!isFirst
                    ),
                    align: "CENTER"
                  ),
                  a!gridField(
                    data: fv!item,
                    columns: {
                      a!gridColumn(
                        label: if(fv!isFirst, "Max", ""),
                        value: fv!item['recordType!{fb324deb-007c-495f-98dd-65e2ea1e6cdd}KS Record to Delete.fields.{e9cfe8d7-31c2-49a6-8daa-6b82905d4b67}tplMax'],
                        align: "CENTER",
                        width: "NARROW"
                      ),
                      a!gridColumn(
                        label: if(fv!isFirst, "Avg", ""),
                        value: fv!item['recordType!{fb324deb-007c-495f-98dd-65e2ea1e6cdd}KS Record to Delete.fields.{d6f465f9-6a96-493f-b254-f63c3529fce3}tplAvg'],
                        align: "CENTER",
                        width: "NARROW"
                      ),
                      a!gridColumn(
                        label: if(fv!isFirst, "As Of Date", ""),
                        value: fv!item['recordType!{fb324deb-007c-495f-98dd-65e2ea1e6cdd}KS Record to Delete.fields.{392f0d4c-1dbe-4ea0-b538-954940158be2}tplAsOfDate'],
                        align: "CENTER",
                        width: "NARROW"
                      )
                    }
                  )
                }
              )
            ),
            a!columnLayout(
              contents: a!cardLayout(
                padding: "NONE",
                marginAbove: "NONE",
                marginBelow: "NONE",
                contents: {
                  a!richTextDisplayField(
                    marginAbove: "NONE",
                    value: a!richTextItem(
                      text: "Money Market",
                      style: "STRONG",
                      showWhen: fv!isFirst
                    ),
                    align: "CENTER"
                  ),
                  a!gridField(
                    data: fv!item,
                    columns: {
                      a!gridColumn(
                        label: if(fv!isFirst, "Max", ""),
                        value: fv!item['recordType!{fb324deb-007c-495f-98dd-65e2ea1e6cdd}KS Record to Delete.fields.{2b4a6db7-9591-42bf-bc5b-9f5075d49060}MMMax'],
                        align: "CENTER",
                        width: "NARROW"
                      ),
                      a!gridColumn(
                        label: if(fv!isFirst, "Avg", ""),
                        value: fv!item['recordType!{fb324deb-007c-495f-98dd-65e2ea1e6cdd}KS Record to Delete.fields.{d98039c2-6865-4298-b23b-1aa4e5fd53fd}MMAvg'],
                        align: "CENTER",
                        width: "NARROW"
                      ),
                      a!gridColumn(
                        label: if(fv!isFirst, "As Of Date", ""),
                        value: fv!item['recordType!{fb324deb-007c-495f-98dd-65e2ea1e6cdd}KS Record to Delete.fields.{9ff4d628-7700-4dd0-96a9-08153cb1f0af}MMAsOfDate'],
                        align: "CENTER",
                        width: "NARROW"
                      )
                    }
                  )
                }
              )
            ),
            a!columnLayout(
              contents: a!cardLayout(
                padding: "NONE",
                marginAbove: "NONE",
                marginBelow: "NONE",
                contents: {
                  a!richTextDisplayField(
                    marginAbove: "NONE",
                    value: a!richTextItem(
                      text: "Investment(Bonds)",
                      style: "STRONG",
                      showWhen: fv!isFirst
                    ),
                    align: "CENTER"
                  ),
                  a!gridField(
                    data: fv!item,
                    columns: {
                      a!gridColumn(
                        label: if(fv!isFirst, "Max", ""),
                        value: fv!item['recordType!{fb324deb-007c-495f-98dd-65e2ea1e6cdd}KS Record to Delete.fields.{00c5c4d7-939c-4b65-92cb-1b28e05e56d3}IBMax'],
                        align: "CENTER",
                        width: "NARROW"
                      ),
                      a!gridColumn(
                        label: if(fv!isFirst, "Avg", ""),
                        value: fv!item['recordType!{fb324deb-007c-495f-98dd-65e2ea1e6cdd}KS Record to Delete.fields.{0de1c7be-2690-412e-a7f8-160f8150e509}IbAvg'],
                        align: "CENTER",
                        width: "NARROW"
                      ),
                      a!gridColumn(
                        label: if(fv!isFirst, "As Of Date", ""),
                        value: fv!item['recordType!{fb324deb-007c-495f-98dd-65e2ea1e6cdd}KS Record to Delete.fields.{b7d943b2-3c9d-4586-8468-c671b0afd2c2}IBAsOfDate'],
                        align: "CENTER",
                        width: "NARROW"
                      )
                    }
                  )
                }
              )
            )
          }
        )
      }
    )
  }
)

Replace the local!data with your data and the fields with your respective fields.

This will not work as it works like two independent components. You need to replace the whole read only grid with a nested columns/card construct, including your two header rows.

But, this looks like business forces you to rebuilt Excel. In my world, I try hard to push back such requirements, and try to deliver a more compelling and modern UI.

This will not work as it works like two independent components. You need to replace the whole read only grid with a nested columns/card construct, including your two header rows.

But, this looks like business forces you to rebuilt Excel. In my world, I try hard to push back such requirements, and try to deliver a more compelling and modern UI.