Angular2/Nativescript: Issues replicating a HTML table using Nativescript's ListView

Question

I am busy with an Angular2/Nativescript project where I am trying to replicate a HTML table... The way I am going about it is by adding two templates to a Listview, one for the headers and another for the content which is fetched from a REST API and will always be different. My only issue with this approach is left-aligning the headers and content, right now the columns doesn't start exactly under their headers but a bit to the right so it gets a bit confusing figuring out which column belongs to which header. Is it possible to do this at all in Nativescript? I also can't figure out how to add borders to separate the different rows and cells of my table/Listview... Any idea how I can go about doing this?

my code:

    <ListView [items]="stockTransactions" [itemTemplateSelector]="templateSelector" class="list-group" backgroundColor="green">
        <template nsTemplateKey="header" let-header="item">
            <GridLayout rows="auto" columns="auto, *, *,, *" class="list-group">
                <Label row="0" col="0" class="list-group-item" [text]="header.item1"></Label>
                <Label row="0" col="1" class="list-group-item bg-primary" [text]="header.item2"></Label>
                <Label row="0" col="2" class="list-group-item bg-primary" [text]="header.item3"></Label>
                <Label row="0" col="3" class="list-group-item bg-primary" [text]="header.item4"></Label>
            </GridLayout>
        </template>
        <template nsTemplateKey="cell" let-stockTransaction="item">
            <GridLayout rows="auto" columns="*, *, *, *">
                <Label row="0" col="0" textWrap="true" [text]="stockTransaction.Date | date" class="bg-primary list-group-item"></Label>
                <Label row="0" col="1" textWrap="true" [text]="stockTransaction.TransactionType_Name" class="list-group-item"></Label>
                <Label row="0" col="2" textWrap="true" [text]="stockTransaction.SupplierMaster_Name" class="list-group-item"></Label>
                <Label row="0" col="3" textWrap="true" [text]="stockTransaction.Qty" class="list-group-item"></Label>
            </GridLayout>
        </template> 
    </ListView>

Are you wanting the table header to always be visible? I would put a grid outside the listview so the header is visible while the list scrolls. This also reduces the layouts inside the listview item template. Which is a good thing. — Brad Martin
– Brad Martin, Commented Mar 8, 2017 at 14:58
@Brad Martin No, I am trying to get the headers above their respective content to form a perfectly aligned column column. e.g. the second header gets rendered to the left of it's actual content where it should be above it's content in the second template to look like a column... — user2094257
– user2094257, Commented Mar 9, 2017 at 20:09
then you likely need to have the same settings for your gridlayout rows and columns your snippet above has different column values - so they won't align very well depending on the content. — Brad Martin
– Brad Martin, Commented Mar 9, 2017 at 20:44
@Brad Martin Thanks a lot that worked. Please add your comment as the answer — user2094257
– user2094257, Commented Mar 13, 2017 at 9:36

Brad Martin · Accepted Answer · 2017-03-13 11:14:51Z

1

you likely need to have the same settings for your gridlayout rows and columns your snippet above has different column values - so they won't align very well depending on the content

answered Mar 13, 2017 at 11:14

Brad Martin

6,2776 gold badges30 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular2/Nativescript: Issues replicating a HTML table using Nativescript's ListView

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related