From 67ce6b44303473ad4863dc1f63f206eb985fe3d3 Mon Sep 17 00:00:00 2001
From: jopejoe1 <johannes@joens.email>
Date: Wed, 10 Jul 2024 12:40:38 +0200
Subject: [PATCH] native: improve table

---
 native/Data.qml | 48 +++++++++++++++++++-----------------------------
 native/Main.qml | 39 +++++++++++++++++++--------------------
 2 files changed, 38 insertions(+), 49 deletions(-)

diff --git a/native/Data.qml b/native/Data.qml
index af97842..a8a62de 100644
--- a/native/Data.qml
+++ b/native/Data.qml
@@ -1,32 +1,22 @@
 import QtQuick
+import Qt.labs.qmlmodels
 
-ListModel {
-    ListElement {
-        name: "Bill Smith"
-        number: "555 3264"
-    }
-    ListElement {
-        name: "John Brown"
-        number: "555 8426"
-    }
-    ListElement {
-        name: "Sam Wise"
-        number: "555 0473"
-    }
-    ListElement {
-        name: "Sam Wise"
-        number: "555 0473"
-    }
-    ListElement {
-        name: "Sam Wise"
-        number: "555 0473"
-    }
-    ListElement {
-        name: "Sam Wise"
-        number: "555 0473"
-    }
-    ListElement {
-        name: "Sam Wise"
-        number: "555 0473"
-    }
+TableModel {
+    TableModelColumn { display: "name" }
+    TableModelColumn { display: "color" }
+
+    rows: [
+        {
+            "name": "cat",
+            "color": "black"
+        },
+        {
+            "name": "dog",
+            "color": "brown"
+        },
+        {
+            "name": "bird",
+            "color": "white"
+        }
+    ]
 }
diff --git a/native/Main.qml b/native/Main.qml
index f973044..ec3ccff 100644
--- a/native/Main.qml
+++ b/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
-                    }
-                }
+    TableView {
+        anchors.fill: parent
+
+        columnSpacing: 1
+        rowSpacing: 1
+        clip: true
+
+        model: Data {}
+        delegate: Rectangle {
+            color: getColors().base
+            implicitWidth: 100
+            implicitHeight: 50
+            border.width: 1
+
+            Text {
+                text: display
+                color: getColors().text
+                anchors.centerIn: parent
             }
         }
-
-        ListView {
-            anchors.fill: parent
-            model: Data {}
-            delegate: contactDelegate
-        }
     }
 }