update

src/Qt5/imports/FluentUI/Controls/FluTableView.qml

@@ -20,16 +20,19 @@ Rectangle {
     onColumnSourceChanged: {
         if(columnSource.length!==0){
             var columns= []
-            var header_rows = {}
+            var columnsData = []
+            var headerRow = {}
             columnSource.forEach(function(item){
                 var column = Qt.createQmlObject('import Qt.labs.qmlmodels 1.0;TableModelColumn{}',table_model);
                 column.display = item.dataIndex
+                columnsData.push(item)
                 columns.push(column)
-                header_rows[item.dataIndex] = item.title
+                headerRow[item.dataIndex] = item.title
             })
+            d.columns_data = columnsData
             table_model.columns = columns
-            header_model.columns = columns
+            header_column_model.columns = columns
-            d.header_rows = [header_rows]
+            header_column_model.rows = [headerRow]
         }
     }
     QtObject{
@@ -38,15 +41,15 @@ Rectangle {
         property int rowHoverIndex: -1
         property int defaultItemWidth: 100
         property int defaultItemHeight: 42
-        property var header_rows:[]
+        property var columns_data: []
         property var editDelegate
         property var editPosition
         function getEditDelegate(column){
-            var obj =columnSource[column].editDelegate
+            var obj =d.columns_data[column].editDelegate
             if(obj){
                 return obj
             }
-            if(columnSource[column].editMultiline === true){
+            if(d.columns_data[column].editMultiline === true){
                 return com_edit_multiline
             }
             return com_edit
@@ -60,6 +63,14 @@ Rectangle {
         id:table_model
         TableModelColumn {}
     }
+    TableModel{
+        id:header_column_model
+        TableModelColumn {}
+    }
+    TableModel{
+        id:header_row_model
+        TableModelColumn { display: "rowIndex" }
+    }
     FluTableSortProxyModel{
         id:table_sort_model
         model: table_model
@@ -69,7 +80,7 @@ Rectangle {
         FluTextBox{
             id:text_box
             text: String(display)
-            readOnly: true === columnSource[column].readOnly
+            readOnly: true === d.columns_data[column].readOnly
             Component.onCompleted: {
                 forceActiveFocus()
                 selectAll()
@@ -100,7 +111,7 @@ Rectangle {
                 FluMultilineTextBox {
                     id:text_box
                     text: display
-                    readOnly: true === columnSource[column].readOnly
+                    readOnly: true === d.columns_data[column].readOnly
                     verticalAlignment: TextInput.AlignVCenter
                     Component.onCompleted: {
                         forceActiveFocus()
@@ -164,48 +175,9 @@ Rectangle {
             }
         }
     }
-
+    Component{
+        id:com_table_delegate
         MouseArea{
-        id:layout_mouse_table
-        hoverEnabled: true
-        anchors.left: header_vertical.right
-        anchors.top: header_horizontal.bottom
-        anchors.right: parent.right
-        anchors.bottom: parent.bottom
-        onExited: {
-            d.rowHoverIndex = -1
-        }
-        onCanceled: {
-            d.rowHoverIndex = -1
-        }
-        TableView {
-            id:table_view
-            ListModel{
-                id:model_columns
-            }
-            boundsBehavior: Flickable.StopAtBounds
-            syncView: header_horizontal
-            syncDirection: Qt.Horizontal
-            anchors.fill: parent
-            ScrollBar.vertical:scroll_bar_v
-            rowHeightProvider: function(row) {
-                var rowObject = control.getRow(row)
-                var height = rowObject.height
-                if(height){
-                    return height
-                }
-                var minimumHeight = rowObject._minimumHeight
-                if(minimumHeight){
-                    return minimumHeight
-                }
-                return d.defaultItemHeight
-            }
-            model: table_sort_model
-            clip: true
-            onRowsChanged: {
-                closeEditor()
-            }
-            delegate: MouseArea{
             id:item_table_mouse
             property var rowObject : control.getRow(row)
             property var itemModel: model
@@ -351,7 +323,50 @@ Rectangle {
                 }
             }
         }
-
+    }
+    MouseArea{
+        id:layout_mouse_table
+        hoverEnabled: true
+        anchors{
+            left: header_vertical.right
+            top: header_horizontal.bottom
+            right: parent.right
+            bottom: parent.bottom
+        }
+        onExited: {
+            d.rowHoverIndex = -1
+        }
+        onCanceled: {
+            d.rowHoverIndex = -1
+        }
+        TableView {
+            id:table_view
+            ListModel{
+                id:model_columns
+            }
+            boundsBehavior: Flickable.StopAtBounds
+            syncView: header_horizontal
+            syncDirection: Qt.Horizontal
+            anchors.fill: parent
+            ScrollBar.vertical:scroll_bar_v
+            rowHeightProvider: function(row) {
+                var rowObject = control.getRow(row)
+                var height = rowObject.height
+                if(height){
+                    return height
+                }
+                var minimumHeight = rowObject._minimumHeight
+                if(minimumHeight){
+                    return minimumHeight
+                }
+                return d.defaultItemHeight
+            }
+            model: table_sort_model
+            clip: true
+            onRowsChanged: {
+                closeEditor()
+            }
+            delegate: com_table_delegate
             FluLoader{
                 id:loader_edit
                 property var tableView: control
@@ -373,7 +388,7 @@ Rectangle {
                 onEditTextChaged:
                     (text)=>{
                         var obj = control.getRow(row)
-                        obj[columnSource[column].dataIndex] = text
+                        obj[d.columns_data[column].dataIndex] = text
                         control.setRow(row,obj)
                     }
                 width: {
@@ -402,86 +417,16 @@ Rectangle {
                 }
                 z:999
             }
-
         }
     }
     Component{
-        id:com_handle
+        id:com_column_header_delegate
-        Item {}
+        Rectangle{
-    }
-    Component{
-        id:com_column_text
-        FluText {
-            id: column_text
-            text: modelData
-            anchors.fill: parent
-            horizontalAlignment: Text.AlignHCenter
-            verticalAlignment: Text.AlignVCenter
-        }
-    }
-    FluScrollBar {
-        id:scroll_bar_h
-        anchors{
-            left: layout_mouse_table.left
-            right: layout_mouse_table.right
-            bottom: layout_mouse_table.bottom
-        }
-    }
-    FluScrollBar {
-        id:scroll_bar_v
-        anchors{
-            top: layout_mouse_table.top
-            bottom: layout_mouse_table.bottom
-            right: layout_mouse_table.right
-        }
-    }
-    TableModel{
-        id:header_model
-        rows: d.header_rows
-        TableModelColumn {}
-    }
-    TableView {
-        id: header_horizontal
-        model: header_model
-        syncDirection: Qt.Horizontal
-        anchors{
-            left: header_vertical.right
-            right: parent.right
-            top: parent.top
-        }
-        visible: control.horizonalHeaderVisible
-        height: visible ? Math.max(1, contentHeight) : 0
-        boundsBehavior: Flickable.StopAtBounds
-        clip: true
-        ScrollBar.horizontal:scroll_bar_h
-        columnWidthProvider: function(column) {
-            var columnObject = columnSource[column]
-            var width = columnObject.width
-            if(width){
-                return width
-            }
-            var minimumWidth = columnObject.minimumWidth
-            if(minimumWidth){
-                return minimumWidth
-            }
-            return d.defaultItemWidth
-        }
-        onContentXChanged:{
-            timer_horizontal_force_layout.restart()
-        }
-        Timer{
-            id:timer_horizontal_force_layout
-            interval: 50
-            onTriggered: {
-                header_horizontal.forceLayout()
-            }
-        }
-        delegate: Rectangle {
             id:column_item_control
             readonly property real cellPadding: 8
             property bool canceled: false
             property int columnIndex: column
-            readonly property var columnObject : columnSource[column]
+            readonly property var columnObject : d.columns_data[column]
             implicitWidth: {
                 return (item_column_loader.item && item_column_loader.item.implicitWidth) + (cellPadding * 2)
             }
@@ -506,6 +451,7 @@ Rectangle {
                 width: 1
                 height: parent.height
                 anchors.left: parent.left
+                visible: column !== 0
                 color:"#00000000"
             }
             Rectangle{
@@ -601,39 +547,9 @@ Rectangle {
             }
         }
     }
-    TableModel{
+    Component{
-        id:model_rows
+        id:com_row_header_delegate
-        TableModelColumn { display: "rowIndex" }
+        Rectangle{
-    }
-    TableView {
-        id: header_vertical
-        boundsBehavior: Flickable.StopAtBounds
-        anchors.top: layout_mouse_table.top
-        anchors.left: parent.left
-        visible: control.verticalHeaderVisible
-        implicitWidth: visible ? Math.max(1, contentWidth) : 0
-        implicitHeight: syncView ? syncView.height : 0
-        syncDirection: Qt.Vertical
-        syncView: table_view
-        clip: true
-        model: model_rows
-        Connections{
-            target: table_model
-            function onRowCountChanged(){
-                model_rows.rows = Array.from({length: table_model.rows.length}, (_, i) => ({rowIndex:i+1}));
-            }
-        }
-        onContentYChanged:{
-            timer_vertical_force_layout.restart()
-        }
-        Timer{
-            id:timer_vertical_force_layout
-            interval: 50
-            onTriggered: {
-                header_vertical.forceLayout()
-            }
-        }
-        delegate: Rectangle{
             id:item_control
             readonly property real cellPadding: 8
             property bool canceled: false
@@ -646,6 +562,7 @@ Rectangle {
                 width: parent.width
                 height: 1
                 anchors.top: parent.top
+                visible: row !== 0
                 color:"#00000000"
             }
             Rectangle{
@@ -743,6 +660,140 @@ Rectangle {
             }
         }
     }
+    Component{
+        id:com_column_text
+        FluText {
+            id: column_text
+            text: modelData
+            anchors.fill: parent
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+        }
+    }
+    Item{
+        id: header_vertical_column
+        anchors{
+            top: header_horizontal.top
+            bottom: header_horizontal.bottom
+            left: parent.left
+            right: header_vertical.right
+        }
+        Rectangle{
+            border.color: control.borderColor
+            width: parent.width
+            height: 1
+            anchors.top: parent.top
+            color:"#00000000"
+        }
+        Rectangle{
+            border.color: control.borderColor
+            width: parent.width
+            height: 1
+            anchors.bottom: parent.bottom
+            color:"#00000000"
+        }
+        Rectangle{
+            border.color: control.borderColor
+            width: 1
+            height: parent.height
+            anchors.left: parent.left
+            color:"#00000000"
+        }
+        Rectangle{
+            border.color: control.borderColor
+            width: 1
+            height: parent.height
+            anchors.right: parent.right
+            color:"#00000000"
+        }
+    }
+    TableView {
+        id: header_horizontal
+        model: header_column_model
+        anchors{
+            left: header_vertical.right
+            right: layout_mouse_table.right
+            top: parent.top
+        }
+        visible: control.horizonalHeaderVisible
+        height: visible ? Math.max(1, contentHeight) : 0
+        boundsBehavior: Flickable.StopAtBounds
+        clip: true
+        ScrollBar.horizontal:scroll_bar_h
+        columnWidthProvider: function(column) {
+            var columnObject = d.columns_data[column]
+            var width = columnObject.width
+            if(width){
+                return width
+            }
+            var minimumWidth = columnObject.minimumWidth
+            if(minimumWidth){
+                return minimumWidth
+            }
+            return d.defaultItemWidth
+        }
+        onContentXChanged:{
+            timer_horizontal_force_layout.restart()
+        }
+        Timer{
+            id:timer_horizontal_force_layout
+            interval: 50
+            onTriggered: {
+                header_horizontal.forceLayout()
+            }
+        }
+        delegate: com_column_header_delegate
+    }
+    TableView {
+        id: header_vertical
+        boundsBehavior: Flickable.StopAtBounds
+        anchors{
+            top: layout_mouse_table.top
+            left: parent.left
+        }
+        visible: control.verticalHeaderVisible
+        implicitWidth: visible ? Math.max(1, contentWidth) : 0
+        implicitHeight: syncView ? syncView.height : 0
+        syncDirection: Qt.Vertical
+        syncView: table_view
+        clip: true
+        model: header_row_model
+        Connections{
+            target: table_model
+            function onRowCountChanged(){
+                header_row_model.rows = Array.from({length: table_model.rows.length}, (_, i) => ({rowIndex:i+1}))
+            }
+        }
+        onContentYChanged:{
+            timer_vertical_force_layout.restart()
+        }
+        Timer{
+            id:timer_vertical_force_layout
+            interval: 50
+            onTriggered: {
+                header_vertical.forceLayout()
+            }
+        }
+        delegate: com_row_header_delegate
+    }
+    FluScrollBar {
+        id:scroll_bar_h
+        anchors{
+            left: layout_mouse_table.left
+            right: parent.right
+            bottom: layout_mouse_table.bottom
+        }
+        z:999
+    }
+    FluScrollBar {
+        id:scroll_bar_v
+        anchors{
+            top: layout_mouse_table.top
+            bottom: layout_mouse_table.bottom
+            right: parent.right
+        }
+        z:999
+    }
     function closeEditor(){
         d.editPosition = undefined
         d.editDelegate = undefined

src/Qt6/imports/FluentUI/Controls/FluTableView.qml

@@ -5,7 +5,6 @@ import QtQuick.Layouts
 import Qt.labs.qmlmodels
 import FluentUI
 
-
 Rectangle {
     property var columnSource
     property var dataSource
@@ -22,16 +21,19 @@ Rectangle {
     onColumnSourceChanged: {
         if(columnSource.length!==0){
             var columns= []
-            var header_rows = {}
+            var columnsData = []
+            var headerRow = {}
             columnSource.forEach(function(item){
                 var column = Qt.createQmlObject('import Qt.labs.qmlmodels 1.0;TableModelColumn{}',table_model);
                 column.display = item.dataIndex
+                columnsData.push(item)
                 columns.push(column)
-                header_rows[item.dataIndex] = item.title
+                headerRow[item.dataIndex] = item.title
             })
+            d.columns_data = columnsData
             table_model.columns = columns
-            header_model.columns = columns
+            header_column_model.columns = columns
-            d.header_rows = [header_rows]
+            header_column_model.rows = [headerRow]
         }
     }
     QtObject{
@@ -40,15 +42,15 @@ Rectangle {
         property int rowHoverIndex: -1
         property int defaultItemWidth: 100
         property int defaultItemHeight: 42
-        property var header_rows:[]
+        property var columns_data: []
         property var editDelegate
         property var editPosition
         function getEditDelegate(column){
-            var obj =columnSource[column].editDelegate
+            var obj =d.columns_data[column].editDelegate
             if(obj){
                 return obj
             }
-            if(columnSource[column].editMultiline === true){
+            if(d.columns_data[column].editMultiline === true){
                 return com_edit_multiline
             }
             return com_edit
@@ -62,6 +64,14 @@ Rectangle {
         id:table_model
         TableModelColumn {}
     }
+    TableModel{
+        id:header_column_model
+        TableModelColumn {}
+    }
+    TableModel{
+        id:header_row_model
+        TableModelColumn { display: "rowIndex" }
+    }
     FluTableSortProxyModel{
         id:table_sort_model
         model: table_model
@@ -71,7 +81,7 @@ Rectangle {
         FluTextBox{
             id:text_box
             text: String(display)
-            readOnly: true === columnSource[column].readOnly
+            readOnly: true === d.columns_data[column].readOnly
             Component.onCompleted: {
                 forceActiveFocus()
                 selectAll()
@@ -102,7 +112,7 @@ Rectangle {
                 FluMultilineTextBox {
                     id:text_box
                     text: display
-                    readOnly: true === columnSource[column].readOnly
+                    readOnly: true === d.columns_data[column].readOnly
                     verticalAlignment: TextInput.AlignVCenter
                     Component.onCompleted: {
                         forceActiveFocus()
@@ -142,7 +152,7 @@ Rectangle {
         id:com_text
         FluText {
             id:item_text
-            text: display
+            text: String(display)
             elide: Text.ElideRight
             wrapMode: Text.WrapAnywhere
             anchors{
@@ -166,48 +176,9 @@ Rectangle {
             }
         }
     }
-
+    Component{
+        id:com_table_delegate
         MouseArea{
-        id:layout_mouse_table
-        hoverEnabled: true
-        anchors.left: header_vertical.right
-        anchors.top: header_horizontal.bottom
-        anchors.right: parent.right
-        anchors.bottom: parent.bottom
-        onExited: {
-            d.rowHoverIndex = -1
-        }
-        onCanceled: {
-            d.rowHoverIndex = -1
-        }
-        TableView {
-            id:table_view
-            ListModel{
-                id:model_columns
-            }
-            boundsBehavior: Flickable.StopAtBounds
-            syncView: header_horizontal
-            syncDirection: Qt.Horizontal
-            anchors.fill: parent
-            ScrollBar.vertical:scroll_bar_v
-            rowHeightProvider: function(row) {
-                var rowObject = control.getRow(row)
-                var height = rowObject.height
-                if(height){
-                    return height
-                }
-                var minimumHeight = rowObject._minimumHeight
-                if(minimumHeight){
-                    return minimumHeight
-                }
-                return d.defaultItemHeight
-            }
-            model: table_sort_model
-            clip: true
-            onRowsChanged: {
-                closeEditor()
-            }
-            delegate: MouseArea{
             id:item_table_mouse
             property var rowObject : control.getRow(row)
             property var itemModel: model
@@ -353,7 +324,50 @@ Rectangle {
                 }
             }
         }
-
+    }
+    MouseArea{
+        id:layout_mouse_table
+        hoverEnabled: true
+        anchors{
+            left: header_vertical.right
+            top: header_horizontal.bottom
+            right: parent.right
+            bottom: parent.bottom
+        }
+        onExited: {
+            d.rowHoverIndex = -1
+        }
+        onCanceled: {
+            d.rowHoverIndex = -1
+        }
+        TableView {
+            id:table_view
+            ListModel{
+                id:model_columns
+            }
+            boundsBehavior: Flickable.StopAtBounds
+            syncView: header_horizontal
+            syncDirection: Qt.Horizontal
+            anchors.fill: parent
+            ScrollBar.vertical:scroll_bar_v
+            rowHeightProvider: function(row) {
+                var rowObject = control.getRow(row)
+                var height = rowObject.height
+                if(height){
+                    return height
+                }
+                var minimumHeight = rowObject._minimumHeight
+                if(minimumHeight){
+                    return minimumHeight
+                }
+                return d.defaultItemHeight
+            }
+            model: table_sort_model
+            clip: true
+            onRowsChanged: {
+                closeEditor()
+            }
+            delegate: com_table_delegate
             FluLoader{
                 id:loader_edit
                 property var tableView: control
@@ -375,7 +389,7 @@ Rectangle {
                 onEditTextChaged:
                     (text)=>{
                         var obj = control.getRow(row)
-                        obj[columnSource[column].dataIndex] = text
+                        obj[d.columns_data[column].dataIndex] = text
                         control.setRow(row,obj)
                     }
                 width: {
@@ -404,86 +418,16 @@ Rectangle {
                 }
                 z:999
             }
-
         }
     }
     Component{
-        id:com_handle
+        id:com_column_header_delegate
-        Item {}
+        Rectangle{
-    }
-    Component{
-        id:com_column_text
-        FluText {
-            id: column_text
-            text: modelData
-            anchors.fill: parent
-            horizontalAlignment: Text.AlignHCenter
-            verticalAlignment: Text.AlignVCenter
-        }
-    }
-    FluScrollBar {
-        id:scroll_bar_h
-        anchors{
-            left: layout_mouse_table.left
-            right: layout_mouse_table.right
-            bottom: layout_mouse_table.bottom
-        }
-    }
-    FluScrollBar {
-        id:scroll_bar_v
-        anchors{
-            top: layout_mouse_table.top
-            bottom: layout_mouse_table.bottom
-            right: layout_mouse_table.right
-        }
-    }
-    TableModel{
-        id:header_model
-        rows: d.header_rows
-        TableModelColumn {}
-    }
-    TableView {
-        id: header_horizontal
-        model: header_model
-        syncDirection: Qt.Horizontal
-        anchors{
-            left: header_vertical.right
-            right: parent.right
-            top: parent.top
-        }
-        visible: control.horizonalHeaderVisible
-        height: visible ? Math.max(1, contentHeight) : 0
-        boundsBehavior: Flickable.StopAtBounds
-        clip: true
-        ScrollBar.horizontal:scroll_bar_h
-        columnWidthProvider: function(column) {
-            var columnObject = columnSource[column]
-            var width = columnObject.width
-            if(width){
-                return width
-            }
-            var minimumWidth = columnObject.minimumWidth
-            if(minimumWidth){
-                return minimumWidth
-            }
-            return d.defaultItemWidth
-        }
-        onContentXChanged:{
-            timer_horizontal_force_layout.restart()
-        }
-        Timer{
-            id:timer_horizontal_force_layout
-            interval: 50
-            onTriggered: {
-                header_horizontal.forceLayout()
-            }
-        }
-        delegate: Rectangle {
             id:column_item_control
             readonly property real cellPadding: 8
             property bool canceled: false
             property int columnIndex: column
-            readonly property var columnObject : columnSource[column]
+            readonly property var columnObject : d.columns_data[column]
             implicitWidth: {
                 return (item_column_loader.item && item_column_loader.item.implicitWidth) + (cellPadding * 2)
             }
@@ -508,6 +452,7 @@ Rectangle {
                 width: 1
                 height: parent.height
                 anchors.left: parent.left
+                visible: column !== 0
                 color:"#00000000"
             }
             Rectangle{
@@ -603,39 +548,9 @@ Rectangle {
             }
         }
     }
-    TableModel{
+    Component{
-        id:model_rows
+        id:com_row_header_delegate
-        TableModelColumn { display: "rowIndex" }
+        Rectangle{
-    }
-    TableView {
-        id: header_vertical
-        boundsBehavior: Flickable.StopAtBounds
-        anchors.top: layout_mouse_table.top
-        anchors.left: parent.left
-        visible: control.verticalHeaderVisible
-        implicitWidth: visible ? Math.max(1, contentWidth) : 0
-        implicitHeight: syncView ? syncView.height : 0
-        syncDirection: Qt.Vertical
-        syncView: table_view
-        clip: true
-        model: model_rows
-        Connections{
-            target: table_model
-            function onRowCountChanged(){
-                model_rows.rows = Array.from({length: table_model.rows.length}, (_, i) => ({rowIndex:i+1}));
-            }
-        }
-        onContentYChanged:{
-            timer_vertical_force_layout.restart()
-        }
-        Timer{
-            id:timer_vertical_force_layout
-            interval: 50
-            onTriggered: {
-                header_vertical.forceLayout()
-            }
-        }
-        delegate: Rectangle{
             id:item_control
             readonly property real cellPadding: 8
             property bool canceled: false
@@ -648,6 +563,7 @@ Rectangle {
                 width: parent.width
                 height: 1
                 anchors.top: parent.top
+                visible: row !== 0
                 color:"#00000000"
             }
             Rectangle{
@@ -745,6 +661,140 @@ Rectangle {
             }
         }
     }
+    Component{
+        id:com_column_text
+        FluText {
+            id: column_text
+            text: modelData
+            anchors.fill: parent
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+        }
+    }
+    Item{
+        id: header_vertical_column
+        anchors{
+            top: header_horizontal.top
+            bottom: header_horizontal.bottom
+            left: parent.left
+            right: header_vertical.right
+        }
+        Rectangle{
+            border.color: control.borderColor
+            width: parent.width
+            height: 1
+            anchors.top: parent.top
+            color:"#00000000"
+        }
+        Rectangle{
+            border.color: control.borderColor
+            width: parent.width
+            height: 1
+            anchors.bottom: parent.bottom
+            color:"#00000000"
+        }
+        Rectangle{
+            border.color: control.borderColor
+            width: 1
+            height: parent.height
+            anchors.left: parent.left
+            color:"#00000000"
+        }
+        Rectangle{
+            border.color: control.borderColor
+            width: 1
+            height: parent.height
+            anchors.right: parent.right
+            color:"#00000000"
+        }
+    }
+    TableView {
+        id: header_horizontal
+        model: header_column_model
+        anchors{
+            left: header_vertical.right
+            right: layout_mouse_table.right
+            top: parent.top
+        }
+        visible: control.horizonalHeaderVisible
+        height: visible ? Math.max(1, contentHeight) : 0
+        boundsBehavior: Flickable.StopAtBounds
+        clip: true
+        ScrollBar.horizontal:scroll_bar_h
+        columnWidthProvider: function(column) {
+            var columnObject = d.columns_data[column]
+            var width = columnObject.width
+            if(width){
+                return width
+            }
+            var minimumWidth = columnObject.minimumWidth
+            if(minimumWidth){
+                return minimumWidth
+            }
+            return d.defaultItemWidth
+        }
+        onContentXChanged:{
+            timer_horizontal_force_layout.restart()
+        }
+        Timer{
+            id:timer_horizontal_force_layout
+            interval: 50
+            onTriggered: {
+                header_horizontal.forceLayout()
+            }
+        }
+        delegate: com_column_header_delegate
+    }
+    TableView {
+        id: header_vertical
+        boundsBehavior: Flickable.StopAtBounds
+        anchors{
+            top: layout_mouse_table.top
+            left: parent.left
+        }
+        visible: control.verticalHeaderVisible
+        implicitWidth: visible ? Math.max(1, contentWidth) : 0
+        implicitHeight: syncView ? syncView.height : 0
+        syncDirection: Qt.Vertical
+        syncView: table_view
+        clip: true
+        model: header_row_model
+        Connections{
+            target: table_model
+            function onRowCountChanged(){
+                header_row_model.rows = Array.from({length: table_model.rows.length}, (_, i) => ({rowIndex:i+1}))
+            }
+        }
+        onContentYChanged:{
+            timer_vertical_force_layout.restart()
+        }
+        Timer{
+            id:timer_vertical_force_layout
+            interval: 50
+            onTriggered: {
+                header_vertical.forceLayout()
+            }
+        }
+        delegate: com_row_header_delegate
+    }
+    FluScrollBar {
+        id:scroll_bar_h
+        anchors{
+            left: layout_mouse_table.left
+            right: parent.right
+            bottom: layout_mouse_table.bottom
+        }
+        z:999
+    }
+    FluScrollBar {
+        id:scroll_bar_v
+        anchors{
+            top: layout_mouse_table.top
+            bottom: layout_mouse_table.bottom
+            right: parent.right
+        }
+        z:999
+    }
     function closeEditor(){
         d.editPosition = undefined
         d.editDelegate = undefined