update

src/imports/FluentUI/Controls/FluTableView2.qml

@@ -5,35 +5,16 @@ import QtQuick.Layouts
 import Qt.labs.qmlmodels
 import FluentUI
 
-TableView {
+
+Rectangle {
+
+    id:control
+
+
+
     property var columnSource
     property var dataSource
-    id:control
+    color: Qt.styleHints.appearance === Qt.Light ? palette.mid : palette.midlight
-    ListModel{
-        id:model_columns
-    }
-    columnWidthProvider: function (column) {
-        return columnSource[column].width
-    }
-    rowHeightProvider: function (column) {
-        return 60
-    }
-    topMargin: columnsHeader.implicitHeight
-    model: table_model
-    ScrollBar.horizontal: FluScrollBar{}
-    ScrollBar.vertical: FluScrollBar{}
-    clip: true
-    boundsBehavior:Flickable.StopAtBounds
-    delegate: Rectangle {
-        color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
-        FluText {
-            text: display
-            anchors.fill: parent
-            anchors.margins: 10
-            verticalAlignment: Text.AlignVCenter
-        }
-    }
-
     onColumnSourceChanged: {
         if(columnSource.length!==0){
             var com_column = Qt.createComponent("FluTableModelColumn.qml")
@@ -48,6 +29,10 @@ TableView {
         }
     }
 
+    TableModel {
+        id:table_model
+    }
+
     onDataSourceChanged: {
         table_model.clear()
         dataSource.forEach(function(item){
@@ -55,30 +40,63 @@ TableView {
         })
     }
 
-    TableModel {
+    TableView {
-        id:table_model
+        id:table_view
-    }
+        anchors.left: header_vertical.right
+        anchors.top: header_horizontal.bottom
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        ListModel{
+            id:model_columns
+        }
+        columnWidthProvider: function(column) {
+            let w = explicitColumnWidth(column)
+            if (w >= 100)
+                return Math.max(100, w);;
+            return implicitColumnWidth(column)
+        }
+        rowHeightProvider: function(row) {
+            let h = explicitRowHeight(row)
+            if (h >= 0)
+                return Math.max(60, h);
+            return implicitRowHeight(row)
+        }
 
-    Row {
+        model: table_model
-        id: columnsHeader
+        ScrollBar.horizontal: FluScrollBar{}
-        y: control.contentY
+        ScrollBar.vertical: FluScrollBar{}
-        z: 2
+        clip: true
-        Repeater {
+        delegate: Rectangle {
-            model: columnSource
+            implicitHeight: 60
-            Rectangle{
+            implicitWidth: columnSource[column].width
-                height: 35
+            color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
-                width: control.columnWidthProvider(index)
+            FluText {
-                color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
+                text: display
-                FluText {
+                anchors.fill: parent
-                    text: modelData.title
+                anchors.margins: 10
-                    font: FluTextStyle.BodyStrong
+                verticalAlignment: Text.AlignVCenter
-                    anchors{
-                        verticalCenter: parent.verticalCenter
-                        left: parent.left
-                        leftMargin: 10
-                    }
-                }
             }
         }
     }
+
+
+    HorizontalHeaderView {
+        id: header_horizontal
+        anchors.left: table_view.left
+        anchors.top: parent.top
+        syncView: table_view
+        clip: true
+    }
+
+    VerticalHeaderView {
+        id: header_vertical
+        anchors.top: table_view.top
+        anchors.left: parent.left
+        syncView: table_view
+        clip: true
+    }
+
+
+
 }
+