native: improve table

native/Data.qml

@@ -1,32 +1,22 @@
 import QtQuick
+import Qt.labs.qmlmodels
 
-ListModel {
+TableModel {
-    ListElement {
+    TableModelColumn { display: "name" }
-        name: "Bill Smith"
+    TableModelColumn { display: "color" }
-        number: "555 3264"
+
-    }
+    rows: [
-    ListElement {
+        {
-        name: "John Brown"
+            "name": "cat",
-        number: "555 8426"
+            "color": "black"
-    }
+        },
-    ListElement {
+        {
-        name: "Sam Wise"
+            "name": "dog",
-        number: "555 0473"
+            "color": "brown"
-    }
+        },
-    ListElement {
+        {
-        name: "Sam Wise"
+            "name": "bird",
-        number: "555 0473"
+            "color": "white"
-    }
-    ListElement {
-        name: "Sam Wise"
-        number: "555 0473"
-    }
-    ListElement {
-        name: "Sam Wise"
-        number: "555 0473"
-    }
-    ListElement {
-        name: "Sam Wise"
-        number: "555 0473"
         }
+    ]
 }

native/Main.qml

@@ -30,28 +30,27 @@ Window {
         border.width: 5
         border.color: getColors().accent
         color: getColors().midlight
-
-        Component {
-            id: contactDelegate
-            Item {
-                width: 180; height: 40
-                Column {
-                    Text {
-                        text: '<b>Name:</b> ' + name
-                        color: getColors().text
-                    }
-                    Text {
-                        text: '<b>Number:</b> ' + number
-                        color: getColors().text
-                    }
-                }
-            }
     }
 
-        ListView {
+    TableView {
         anchors.fill: parent
+
+        columnSpacing: 1
+        rowSpacing: 1
+        clip: true
+
         model: Data {}
-            delegate: contactDelegate
+        delegate: Rectangle {
+            color: getColors().base
+            implicitWidth: 100
+            implicitHeight: 50
+            border.width: 1
+
+            Text {
+                text: display
+                color: getColors().text
+                anchors.centerIn: parent
+            }
         }
     }
 }