Row grid

Try creating the transposed data set by using the looping function and a!map() and then pass it to read only grid.

col1:"Id1"
col2:"Text1"
-------------
col1:"Id2"
col2:"Text2"
-------------
col1:"Id3"
col2:"Text3"

This should be converted to 

{
a!map(
col1:"Id1",
col2:"Id2",
col3:"Id3"
),
a!map(
col1:"Text1",
col2:"Text2",
col3:"Text3"
)
}

this worked but how to handle if the number of columns get increased since their is no limit on child column

this worked but how to handle if the number of columns get increased since their is no limit on child column

You would need to restrict the number of columns visible at a time to say 3/4 and then users would need to click on next or previous button to fetch more data and to show next set of data. 

we can have max 40 child columns

i have tried this but getting error

why are you using applyComponenet ?

if possible share the code with data in local variables and reference to any rule inputs or records so that we can help you debug this code