Tampilan UI berbentuk daftar akan sangat mudah dikelola jika menggunakan CollectionView.

TabrisJS mempunyai komponen UI yang sangat mumpuni dalam mengelola list atau daftar. CollectionView pada TabriJS merupakan komponen bawaan Android namun oleh TabrisJS telah dibungkus dengan JavasSript sehingga dapat dengan mudah digunakan tanpa harus melakukan koding manual di Java. Ini sangat bermanfaat apabila aplikasi yang kita bangun bukan hanya diperuntukkan bagi platform Android tapi juga untuk platform iOS.

Struktur CollectionView

Pada TabrisJS, CollectionView terdiri dari sebuah view utama yang di dalamnya terdapat sel-sel yang umumnya disebut sebagai list item. Setiap sel merupakan sebuah view juga yang dapat menampung komponen/view lainnya beserta data yang sifatnya eksklusif bagi sel tersebut.

Kita akan melihat contoh sederhana aplikasi yang dibangun dengan TabrisJS untuk menampilkan data pada CollectionView.
Data yang ditampilkan harus berbentuk array yang elemennya dapat berupa sekumpulan string, angka, atau bahkan data kompleks yang terdiri dari Objek JavaScript (JSON). Karena data dapat berisi JSON maka kita dapat dengan mudah melakukan loading data dari server (REST API, WebSocket, Push Notification, dsb.) untuk dipopulasikan ke dalam CollectionView.

Contoh data yang dapat digunakan:

let data = [{
  nama: 'TabrisJS',
  sifat: 'Hybrid - Native',
  popularitas: 9
}, {
  nama: 'NativeScript',
  sifat: 'Hybrid - Native',
  popularitas: 8.5
} /*, {....
} */];