Negotiable Paleobotanist Missions

    nativescript-sectioned-list-view
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.2 • Public • Published

    Nativescript Sectioned List View

    This is a drop in component to support sections in ios. It works with your existing code with a simple array of items. However, use a Sectioned Array to add sections and bind data.

    Installation

    $ tns plugin add nativescript-sectioned-list-view
    

    Section Templating

    There is also support to template the headers, height of the header etc.

    Usage

    In xml

    <Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" 
        xmlns:tools="nativescript-sectioned-list-view">
      <tools:SectionedListView items="{{items}}" rowHeight="44">
       <tools:SectionedListView.itemTemplate>
       <Label text="{{name}}" />
       </tools:SectionedListView.itemTemplate>
      </tools:SectionedListView>
    </Page>

    Make the section header blue.

    <tools:SectionedListView items="{{items}}" rowHeight="44" headerHeight="44">
        <tools:SectionedListView.itemTemplate>
            <Label text="{{name}}" />
        </tools:SectionedListView.itemTemplate>
        <tools:SectionedListView.headerTemplate>
            <Label text="{{$value}}" style="color: blue"/>
        </tools:SectionedListView.headerTemplate>
    </tools:SectionedListView>

    Use a static array in your javascript

        var students = [
         {"name" : "Alice", gender:"female"},
         {"name": "Adam", gender: "male"},
         {"name": "Bob", gender: "male"},
         {"name": "Brittany", gender: "female"},
         {"name": "Evan", gender: "male"}
        ];
        page.bindingContext = { items : students }

    Use a GroupedArray

        page.bindingContext = { items:{
            getTitle: function(section) { return "Section "+section;},
            getNoOfSections: function() { return 2;}, 
            getNoOfItemsInSection: function(section) {return 3;}, 
            getItem: function(row, section) { return "Item {"+row+""+section+"}";}
        }};

    Or, use a observable sectioned array

     
    var sectionedListViewModule = require("nativescript-sectioned-list-view");
    var observableSectionArrayModule = require("observable-sectioned-array");
     
    function pageLoaded(args) {
        var page = args.object;
     
        var students = [
         {"name" : "Alice", gender:"female"},
         {"name": "Adam", gender: "male"},
         {"name": "Bob", gender: "male"},
         {"name": "Brittany", gender: "female"},
         {"name": "Evan", gender: "male"}
        ];
     
        var boys = students.filter(function(student) { return student.gender ==="male";});
     
        var girls = students.filter(function(student) { return student.gender ==="female";});
     
        var sectionedArray = new observableSectionArrayModule.ObservableSectionArray();
        sectionedArray.addSection("Boys", boys);
        sectionedArray.addSection("Girls", girls);
        
        //Now add a new student "Eve" to girls after some delay. 
        setTimeout(function() {
         //Notice how pushing new item to section array reloads the view and adds Eve as a new row.
         sectionedArray.push([{"name": "Eve", gender:"female"}], 1);
        }, 3000);
     
        page.bindingContext = {items: sectionedArray};
    }
     

    Screen shot

    Screen shot

    Install

    npm i nativescript-sectioned-list-view

    DownloadsWeekly Downloads

    1

    Version

    0.3.2

    License

    ISC

    Last publish

    Collaborators

    • rajivnarayana