Fixed column/section in nativescript layout


I need to implement a layout as per the attached drawing.

Basically I need to freeze first column whereas the horizontal scrolling should work for all the items/rows. (as well as vertical) The model I have, is per row (including fixed cell value), so I assume this cell needs to be within scoll view control- but than the first cell becomes scrollable as well.

Any ideas how to construct this - much appreciated!



I’m not sure if it’s doable, but this seems to call for a grid layout.

Every cell would be inside a grid layout and the contents of the 2nd column would be wrapped inside a scrollview. Something list this:

    <ListItemTemplate> // please check for correct syntax I'm just doing this blindly
        <GridLayout rows="1" columns="2" ...>
            <Label row="0" column="0" text="Blah" />
            <SrollView row="0" column="1">
                ...contents inside scrollview...

It’s possible that you may need to use a StackLayout in place of the ScrollView, and put the ScrollView inside the StackLayout itself.


Do you have fixed and equal number of data items under each header?


The problem with this approach is to synchronise the scrolls between items in the list, isn’t it?


No, in each section there can be different amount of items.


Give this one a try


The same issue as commented to pentool - I need to sync the horizontal scroll between all the items, so they are not independent 'sections’
Any idea for that?



A possible hack could be updating the position of other scrollviews while one is being scrolled by user.