I want to populate listview ( a specific page in my app ) from a database .

Currently the page is static and look like this

image: https://s32.postimg.org/vrsdrl2p1/man.png

code :
Qt Code: 
  1. import QtQuick 2.6
  2. import QtQuick.Layouts 1.1
  3. import QtQuick.Controls 2.0
  4.  
  5.  
  6. Pane {
  7.     padding: 0
  8.  
  9.     property var delegateComponentMap: {
  10.         "page": itemDelegateComponent
  11.  
  12.     }
  13.  
  14.     Component {
  15.         id: itemDelegateComponent
  16.  
  17.         ItemDelegate {
  18.             text: labelText
  19.             width: parent.width
  20.         }
  21.     }
  22.  
  23.  
  24.  
  25.  
  26.  
  27.  
  28.     ColumnLayout {
  29.         id: column
  30.         spacing: 40
  31.         anchors.fill: parent
  32.         anchors.topMargin: 20
  33.  
  34.         Label {
  35.             id: label1
  36.             Layout.fillWidth: true
  37.             wrapMode: Label.Wrap
  38.             horizontalAlignment: Qt.AlignHCenter
  39.             text: "Offline Pages "
  40.         }
  41.  
  42.         ListView {
  43.             id: listView
  44.  
  45.             Layout.fillWidth: true
  46.             Layout.fillHeight: true
  47.             clip: true
  48.             model: ListModel {
  49.                 ListElement { type: "ItemDelegate"; labelText: "page1" }
  50.                 ListElement { type: "ItemDelegate"; labelText: "page2" }
  51.                 ListElement { type: "ItemDelegate"; labelText: "page3" }
  52.  
  53.  
  54.             }
  55.             spacing: 5
  56.  
  57.             section.property: "type"
  58.  
  59.             delegate: Component{
  60.  
  61.                 Item{
  62.                     id: aItem
  63.                     width: listView.width //rowLayout.width. We got width from children elements before, now get width from listView
  64.                     height: 30
  65.  
  66.                     RowLayout{
  67.  
  68.                         id: rowLayout
  69.                         anchors.fill: parent
  70.                         spacing: 10
  71.  
  72.                         Label{
  73.                             id:page_name
  74.                             padding: 10
  75.                             text: labelText
  76.                             Layout.fillWidth: true // !!! to fill most part of row width
  77.  
  78.                         }
  79.  
  80.  
  81.                             Button{
  82.  
  83.                                 text: qsTr("Delete")
  84.  
  85.                                 id: delete_button
  86.  
  87.                             }
  88.                             Button{
  89.  
  90.                                 text: qsTr("Update")
  91.                                 id: update_button
  92.                             }
  93.  
  94.  
  95.  
  96.                     }
  97.                 }
  98.             }
  99.         }
  100.  
  101.  
  102.  
  103.  
  104.  
  105.  
  106.  
  107.  
  108.  
  109.         RowLayout{
  110.             Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
  111.  
  112.             Button{
  113.                 text:"Update All"
  114.  
  115.  
  116.             }
  117.             Button{
  118.                 text:"Delete All"
  119.             }
  120.         }
  121.     }
  122. }
To copy to clipboard, switch view to plain text mode 

my databse only has 2 entries ( looks like this ) . the databse is stored in genericelocation

db : https://s32.postimg.org/jb4nhmoxh/image.png

how should i approach this task ?