From 8a6ba829c0adb807e75747a826a45846cd03550d Mon Sep 17 00:00:00 2001
From: jopejoe1 <johannes@joens.email>
Date: Thu, 11 Jul 2024 22:02:36 +0200
Subject: [PATCH] native: add table header

---
 native/MainPage.qml | 84 ++++++++++++++++++++++-----------------------
 1 file changed, 41 insertions(+), 43 deletions(-)

diff --git a/native/MainPage.qml b/native/MainPage.qml
index 5c23359..13edf46 100644
--- a/native/MainPage.qml
+++ b/native/MainPage.qml
@@ -74,63 +74,61 @@ Rectangle {
         }
         color: getColors().window
 
-        ListModel {
-            id: apiDataModel
-        }
-
-        ListView {
-            id: listView
+        ColumnLayout {
             anchors.fill: parent
-            clip: true
-            boundsBehavior: Flickable.StopAtBounds
-            model: apiDataModel
+            spacing: 0
 
-            delegate: Rectangle {
-                width: listView.width
-                height: 50
-                color: getColors().button
+            Rectangle {
+                id: header
+                color: getColors().midlight
+                height: 40
+                Layout.fillWidth: true
 
                 RowLayout {
                     anchors.fill: parent
                     spacing: 10
+                    anchors.margins: 5
 
-                    Text {
-                        text: model.name
-                        color: getColors().text
-                        Layout.alignment: Qt.AlignVCenter
-                    }
+                    Text { text: qsTr("Name"); color: getColors().text; Layout.fillWidth: true }
+                    Text { text: qsTr("Key"); color: getColors().text; Layout.fillWidth: true }
+                    Text { text: qsTr("Amount"); color: getColors().text; Layout.fillWidth: true }
+                    Text { text: qsTr("Start"); color: getColors().text; Layout.fillWidth: true }
+                    Text { text: qsTr("End"); color: getColors().text; Layout.fillWidth: true }
+                    Text { text: qsTr("Group"); color: getColors().text; Layout.fillWidth: true }
+                }
+            }
 
-                    Text {
-                        text: model.key
-                        color: getColors().text
-                        Layout.alignment: Qt.AlignVCenter
-                    }
+            ListView {
+                id: listView
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                clip: true
+                boundsBehavior: Flickable.StopAtBounds
+                model: apiDataModel
 
-                    Text {
-                        text: model.amount
-                        color: getColors().text
-                        Layout.alignment: Qt.AlignVCenter
-                    }
+                delegate: Rectangle {
+                    width: listView.width
+                    height: 50
+                    color: getColors().button
 
-                    Text {
-                        text: model.start
-                        color: getColors().text
-                        Layout.alignment: Qt.AlignVCenter
-                    }
+                    RowLayout {
+                        anchors.fill: parent
+                        spacing: 10
+                        anchors.margins: 5
 
-                    Text {
-                        text: model.end
-                        color: getColors().text
-                        Layout.alignment: Qt.AlignVCenter
-                    }
-
-                    Text {
-                        text: model.group
-                        color: getColors().text
-                        Layout.alignment: Qt.AlignVCenter
+                        Text { text: model.name; color: getColors().text; Layout.fillWidth: true }
+                        Text { text: model.key; color: getColors().text; Layout.fillWidth: true }
+                        Text { text: model.amount; color: getColors().text; Layout.fillWidth: true }
+                        Text { text: model.start; color: getColors().text; Layout.fillWidth: true }
+                        Text { text: model.end; color: getColors().text; Layout.fillWidth: true }
+                        Text { text: model.group; color: getColors().text; Layout.fillWidth: true }
                     }
                 }
             }
+
+            ListModel {
+                id: apiDataModel
+            }
         }
     }