From e2d52f55b9da1b2cacfa90bf2b9f6592233ac5a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=B1=E5=AD=90=E6=A5=9A=5Czhuzi?=
 <zhuzichu520@outlook.com>
Date: Fri, 1 Mar 2024 00:19:12 +0800
Subject: [PATCH] fix bug #439

---
 example/qml-Qt6/page/T_TableView.qml          | 160 ++++++++++-----
 example/qml/page/T_TableView.qml              | 160 ++++++++++-----
 src/FluTools.cpp                              |   2 +-
 src/FluentUI.cpp                              |   2 +
 .../FluentUI/Controls/FluTableView.qml        | 134 ++++++++-----
 src/Qt5/imports/FluentUI/plugins.qmltypes     | 188 +++++++++++++++---
 .../FluentUI/Controls/FluTableView.qml        | 134 ++++++++-----
 7 files changed, 554 insertions(+), 226 deletions(-)

diff --git a/example/qml-Qt6/page/T_TableView.qml b/example/qml-Qt6/page/T_TableView.qml
index a82dad6b..464b1ad5 100644
--- a/example/qml-Qt6/page/T_TableView.qml
+++ b/example/qml-Qt6/page/T_TableView.qml
@@ -13,19 +13,44 @@ FluContentPage{
 
     property var dataSource : []
     property int sortType: 0
+    property bool seletedAll: true
 
     Component.onCompleted: {
         loadData(1,1000)
     }
 
+    onCheckBoxChanged: {
+        for(var i =0;i< table_view.rows ;i++){
+            if(false === table_view.getRow(i).checkbox.options.checked){
+                root.seletedAll = false
+                return
+            }
+        }
+        root.seletedAll = true
+    }
+
     onSortTypeChanged: {
         table_view.closeEditor()
         if(sortType === 0){
             table_view.sort()
         }else if(sortType === 1){
-            table_view.sort((a, b) => a.age - b.age);
+            table_view.sort((l, r) =>{
+                                var lage = Number(l.age)
+                                var rage = Number(r.age)
+                                if(lage === rage){
+                                    return l._key>r._key
+                                }
+                                return lage>rage
+                            });
         }else if(sortType === 2){
-            table_view.sort((a, b) => b.age - a.age);
+            table_view.sort((l, r) => {
+                                var lage = Number(l.age)
+                                var rage = Number(r.age)
+                                if(lage === rage){
+                                    return l._key>r._key
+                                }
+                                return lage<rage
+                            });
         }
     }
 
@@ -73,9 +98,9 @@ FluContentPage{
                 checked: true === options.checked
                 enableAnimation: false
                 clickListener: function(){
-                    var obj = tableModel.getRow(row)
+                    var obj = table_view.getRow(row)
                     obj.checkbox = table_view.customItem(com_checbox,{checked:!options.checked})
-                    tableModel.setRow(row,obj)
+                    table_view.setRow(row,obj)
                     checkBoxChanged()
                 }
             }
@@ -91,17 +116,16 @@ FluContentPage{
                     text:"删除"
                     onClicked: {
                         table_view.closeEditor()
-                        tableModel.removeRow(row)
-                        checkBoxChanged()
+                        table_view.removeRow(row)
                     }
                 }
                 FluFilledButton{
                     text:"编辑"
                     onClicked: {
-                        var obj = tableModel.getRow(row)
+                        var obj = table_view.getRow(row)
                         obj.name = "12345"
-                        tableModel.setRow(row,obj)
-                        showSuccess(JSON.stringify(tableModel.getRow(row)))
+                        table_view.setRow(row,obj)
+                        showSuccess(JSON.stringify(obj))
                     }
                 }
             }
@@ -119,31 +143,20 @@ FluContentPage{
                     Layout.alignment: Qt.AlignVCenter
                 }
                 FluCheckBox{
-                    checked: true === options.checked
+                    checked: true === root.seletedAll
                     enableAnimation: false
                     Layout.alignment: Qt.AlignVCenter
                     clickListener: function(){
-                        var checked = !options.checked
+                        root.seletedAll = !root.seletedAll
+                        var checked = root.seletedAll
                         itemModel.display = table_view.customItem(com_column_checbox,{"checked":checked})
-                        for(var i =0;i< tableModel.rowCount ;i++){
-                            var rowData = tableModel.getRow(i)
+                        for(var i =0;i< table_view.rows ;i++){
+                            var rowData = table_view.getRow(i)
                             rowData.checkbox = table_view.customItem(com_checbox,{"checked":checked})
-                            tableModel.setRow(i,rowData)
+                            table_view.setRow(i,rowData)
                         }
                     }
                 }
-                Connections{
-                    target: root
-                    function onCheckBoxChanged(){
-                        for(var i =0;i< tableModel.rowCount ;i++){
-                            if(false === tableModel.getRow(i).checkbox.options.checked){
-                                itemModel.display = table_view.customItem(com_column_checbox,{"checked":false})
-                                return
-                            }
-                        }
-                        itemModel.display = table_view.customItem(com_column_checbox,{"checked":true})
-                    }
-                }
             }
         }
     }
@@ -166,7 +179,7 @@ FluContentPage{
                 selectAll()
             }
             onCommit: {
-                display = editText
+                editTextChaged(editText)
                 tableView.closeEditor()
             }
         }
@@ -282,15 +295,67 @@ FluContentPage{
         }
     }
 
+    FluArea{
+        id:layout_controls
+        anchors{
+            left: parent.left
+            right: parent.right
+            top: parent.top
+            topMargin: 20
+        }
+        height: 60
+
+        Row{
+            spacing: 5
+            anchors{
+                left: parent.left
+                leftMargin: 10
+                verticalCenter: parent.verticalCenter
+            }
+
+            FluButton{
+                text:"清空"
+                onClicked: {
+                    table_view.dataSource = []
+                }
+            }
+
+            FluButton{
+                text:"删除选中"
+                onClicked: {
+                    var data = []
+                    for(var i =0;i< table_view.rows ;i++){
+                        var item = table_view.getRow(i)
+                        if(false === item.checkbox.options.checked){
+                            data.push(item)
+                        }
+                    }
+                    table_view.dataSource = data
+                }
+            }
+
+            FluButton{
+                text:"添加一行数据"
+                onClicked: {
+                    table_view.appendRow(genTestObject())
+                }
+            }
+
+        }
+    }
+
     FluTableView{
         id:table_view
         anchors{
             left: parent.left
             right: parent.right
-            top: parent.top
+            top: layout_controls.bottom
             bottom: gagination.top
         }
-        anchors.topMargin: 20
+        anchors.topMargin: 5
+        onRowsChanged: {
+            root.checkBoxChanged()
+        }
         columnSource:[
             {
                 title: table_view.customItem(com_column_checbox,{checked:true}),
@@ -366,11 +431,11 @@ FluContentPage{
             }
     }
 
-    function loadData(page,count){
-        var numbers = [100, 300, 500, 1000];
+    function genTestObject(){
+        var ages = ["100", "300", "500", "1000"];
         function getRandomAge() {
-            var randomIndex = Math.floor(Math.random() * numbers.length);
-            return numbers[randomIndex];
+            var randomIndex = Math.floor(Math.random() * ages.length);
+            return ages[randomIndex];
         }
         var names = ["孙悟空", "猪八戒", "沙和尚", "唐僧","白骨夫人","金角大王","熊山君","黄风怪","银角大王"];
         function getRandomName(){
@@ -387,26 +452,29 @@ FluContentPage{
             var randomIndex = Math.floor(Math.random() * addresses.length);
             return addresses[randomIndex];
         }
-
         var avatars = ["qrc:/example/res/svg/avatar_1.svg", "qrc:/example/res/svg/avatar_2.svg", "qrc:/example/res/svg/avatar_3.svg", "qrc:/example/res/svg/avatar_4.svg","qrc:/example/res/svg/avatar_5.svg","qrc:/example/res/svg/avatar_6.svg","qrc:/example/res/svg/avatar_7.svg","qrc:/example/res/svg/avatar_8.svg","qrc:/example/res/svg/avatar_9.svg","qrc:/example/res/svg/avatar_10.svg","qrc:/example/res/svg/avatar_11.svg","qrc:/example/res/svg/avatar_12.svg"];
         function getAvatar(){
             var randomIndex = Math.floor(Math.random() * avatars.length);
             return avatars[randomIndex];
         }
-
+        return {
+            checkbox: table_view.customItem(com_checbox,{checked:root.seletedAll}),
+            avatar:table_view.customItem(com_avatar,{avatar:getAvatar()}),
+            name: getRandomName(),
+            age:getRandomAge(),
+            address: getRandomAddresses(),
+            nickname: getRandomNickname(),
+            longstring:"你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好",
+            action: table_view.customItem(com_action),
+            _minimumHeight:50,
+            _key:FluTools.uuid()
+        }
+    }
+    function loadData(page,count){
+        root.seletedAll = true
         const dataSource = []
         for(var i=0;i<count;i++){
-            dataSource.push({
-                                checkbox: table_view.customItem(com_checbox,{checked:true}),
-                                avatar:table_view.customItem(com_avatar,{avatar:getAvatar()}),
-                                name: getRandomName(),
-                                age:getRandomAge(),
-                                address: getRandomAddresses(),
-                                nickname: getRandomNickname(),
-                                longstring:"你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好",
-                                action: table_view.customItem(com_action),
-                                minimumHeight:50
-                            })
+            dataSource.push(genTestObject())
         }
         root.dataSource = dataSource
         table_view.dataSource = root.dataSource
diff --git a/example/qml/page/T_TableView.qml b/example/qml/page/T_TableView.qml
index ad210edb..093a1483 100644
--- a/example/qml/page/T_TableView.qml
+++ b/example/qml/page/T_TableView.qml
@@ -13,19 +13,44 @@ FluContentPage{
 
     property var dataSource : []
     property int sortType: 0
+    property bool seletedAll: true
 
     Component.onCompleted: {
         loadData(1,1000)
     }
 
+    onCheckBoxChanged: {
+        for(var i =0;i< table_view.rows ;i++){
+            if(false === table_view.getRow(i).checkbox.options.checked){
+                root.seletedAll = false
+                return
+            }
+        }
+        root.seletedAll = true
+    }
+
     onSortTypeChanged: {
         table_view.closeEditor()
         if(sortType === 0){
             table_view.sort()
         }else if(sortType === 1){
-            table_view.sort((a, b) => a.age - b.age);
+            table_view.sort((l, r) =>{
+                                var lage = Number(l.age)
+                                var rage = Number(r.age)
+                                if(lage === rage){
+                                    return l._key>r._key
+                                }
+                                return lage>rage
+                            });
         }else if(sortType === 2){
-            table_view.sort((a, b) => b.age - a.age);
+            table_view.sort((l, r) => {
+                                var lage = Number(l.age)
+                                var rage = Number(r.age)
+                                if(lage === rage){
+                                    return l._key>r._key
+                                }
+                                return lage<rage
+                            });
         }
     }
 
@@ -73,9 +98,9 @@ FluContentPage{
                 checked: true === options.checked
                 enableAnimation: false
                 clickListener: function(){
-                    var obj = tableModel.getRow(row)
+                    var obj = table_view.getRow(row)
                     obj.checkbox = table_view.customItem(com_checbox,{checked:!options.checked})
-                    tableModel.setRow(row,obj)
+                    table_view.setRow(row,obj)
                     checkBoxChanged()
                 }
             }
@@ -91,17 +116,16 @@ FluContentPage{
                     text:"删除"
                     onClicked: {
                         table_view.closeEditor()
-                        tableModel.removeRow(row)
-                        checkBoxChanged()
+                        table_view.removeRow(row)
                     }
                 }
                 FluFilledButton{
                     text:"编辑"
                     onClicked: {
-                        var obj = tableModel.getRow(row)
+                        var obj = table_view.getRow(row)
                         obj.name = "12345"
-                        tableModel.setRow(row,obj)
-                        showSuccess(JSON.stringify(tableModel.getRow(row)))
+                        table_view.setRow(row,obj)
+                        showSuccess(JSON.stringify(obj))
                     }
                 }
             }
@@ -119,31 +143,20 @@ FluContentPage{
                     Layout.alignment: Qt.AlignVCenter
                 }
                 FluCheckBox{
-                    checked: true === options.checked
+                    checked: true === root.seletedAll
                     enableAnimation: false
                     Layout.alignment: Qt.AlignVCenter
                     clickListener: function(){
-                        var checked = !options.checked
+                        root.seletedAll = !root.seletedAll
+                        var checked = root.seletedAll
                         itemModel.display = table_view.customItem(com_column_checbox,{"checked":checked})
-                        for(var i =0;i< tableModel.rowCount ;i++){
-                            var rowData = tableModel.getRow(i)
+                        for(var i =0;i< table_view.rows ;i++){
+                            var rowData = table_view.getRow(i)
                             rowData.checkbox = table_view.customItem(com_checbox,{"checked":checked})
-                            tableModel.setRow(i,rowData)
+                            table_view.setRow(i,rowData)
                         }
                     }
                 }
-                Connections{
-                    target: root
-                    function onCheckBoxChanged(){
-                        for(var i =0;i< tableModel.rowCount ;i++){
-                            if(false === tableModel.getRow(i).checkbox.options.checked){
-                                itemModel.display = table_view.customItem(com_column_checbox,{"checked":false})
-                                return
-                            }
-                        }
-                        itemModel.display = table_view.customItem(com_column_checbox,{"checked":true})
-                    }
-                }
             }
         }
     }
@@ -166,7 +179,7 @@ FluContentPage{
                 selectAll()
             }
             onCommit: {
-                display = editText
+                editTextChaged(editText)
                 tableView.closeEditor()
             }
         }
@@ -282,15 +295,67 @@ FluContentPage{
         }
     }
 
+    FluArea{
+        id:layout_controls
+        anchors{
+            left: parent.left
+            right: parent.right
+            top: parent.top
+            topMargin: 20
+        }
+        height: 60
+
+        Row{
+            spacing: 5
+            anchors{
+                left: parent.left
+                leftMargin: 10
+                verticalCenter: parent.verticalCenter
+            }
+
+            FluButton{
+                text:"清空"
+                onClicked: {
+                    table_view.dataSource = []
+                }
+            }
+
+            FluButton{
+                text:"删除选中"
+                onClicked: {
+                    var data = []
+                    for(var i =0;i< table_view.rows ;i++){
+                        var item = table_view.getRow(i)
+                        if(false === item.checkbox.options.checked){
+                            data.push(item)
+                        }
+                    }
+                    table_view.dataSource = data
+                }
+            }
+
+            FluButton{
+                text:"添加一行数据"
+                onClicked: {
+                    table_view.appendRow(genTestObject())
+                }
+            }
+
+        }
+    }
+
     FluTableView{
         id:table_view
         anchors{
             left: parent.left
             right: parent.right
-            top: parent.top
+            top: layout_controls.bottom
             bottom: gagination.top
         }
-        anchors.topMargin: 20
+        anchors.topMargin: 5
+        onRowsChanged: {
+            root.checkBoxChanged()
+        }
         columnSource:[
             {
                 title: table_view.customItem(com_column_checbox,{checked:true}),
@@ -366,11 +431,11 @@ FluContentPage{
             }
     }
 
-    function loadData(page,count){
-        var numbers = [100, 300, 500, 1000];
+    function genTestObject(){
+        var ages = ["100", "300", "500", "1000"];
         function getRandomAge() {
-            var randomIndex = Math.floor(Math.random() * numbers.length);
-            return numbers[randomIndex];
+            var randomIndex = Math.floor(Math.random() * ages.length);
+            return ages[randomIndex];
         }
         var names = ["孙悟空", "猪八戒", "沙和尚", "唐僧","白骨夫人","金角大王","熊山君","黄风怪","银角大王"];
         function getRandomName(){
@@ -387,26 +452,29 @@ FluContentPage{
             var randomIndex = Math.floor(Math.random() * addresses.length);
             return addresses[randomIndex];
         }
-
         var avatars = ["qrc:/example/res/svg/avatar_1.svg", "qrc:/example/res/svg/avatar_2.svg", "qrc:/example/res/svg/avatar_3.svg", "qrc:/example/res/svg/avatar_4.svg","qrc:/example/res/svg/avatar_5.svg","qrc:/example/res/svg/avatar_6.svg","qrc:/example/res/svg/avatar_7.svg","qrc:/example/res/svg/avatar_8.svg","qrc:/example/res/svg/avatar_9.svg","qrc:/example/res/svg/avatar_10.svg","qrc:/example/res/svg/avatar_11.svg","qrc:/example/res/svg/avatar_12.svg"];
         function getAvatar(){
             var randomIndex = Math.floor(Math.random() * avatars.length);
             return avatars[randomIndex];
         }
-
+        return {
+            checkbox: table_view.customItem(com_checbox,{checked:root.seletedAll}),
+            avatar:table_view.customItem(com_avatar,{avatar:getAvatar()}),
+            name: getRandomName(),
+            age:getRandomAge(),
+            address: getRandomAddresses(),
+            nickname: getRandomNickname(),
+            longstring:"你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好",
+            action: table_view.customItem(com_action),
+            _minimumHeight:50,
+            _key:FluTools.uuid()
+        }
+    }
+    function loadData(page,count){
+        root.seletedAll = true
         const dataSource = []
         for(var i=0;i<count;i++){
-            dataSource.push({
-                                checkbox: table_view.customItem(com_checbox,{checked:true}),
-                                avatar:table_view.customItem(com_avatar,{avatar:getAvatar()}),
-                                name: getRandomName(),
-                                age:getRandomAge(),
-                                address: getRandomAddresses(),
-                                nickname: getRandomNickname(),
-                                longstring:"你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好",
-                                action: table_view.customItem(com_action),
-                                minimumHeight:50
-                            })
+            dataSource.push(genTestObject())
         }
         root.dataSource = dataSource
         table_view.dataSource = root.dataSource
diff --git a/src/FluTools.cpp b/src/FluTools.cpp
index 8dd56b1c..e14e18f4 100644
--- a/src/FluTools.cpp
+++ b/src/FluTools.cpp
@@ -25,7 +25,7 @@ void FluTools::clipText(const QString& text){
 }
 
 QString FluTools::uuid(){
-    return QUuid::createUuid().toString();
+    return QUuid::createUuid().toString().remove('-').remove('{').remove('}');
 }
 
 QString FluTools::readFile(const QString &fileName){
diff --git a/src/FluentUI.cpp b/src/FluentUI.cpp
index e7417927..1fb8c158 100644
--- a/src/FluentUI.cpp
+++ b/src/FluentUI.cpp
@@ -17,6 +17,7 @@
 #include "FluNetwork.h"
 #include "FluFramelessHelper.h"
 #include "FluQrCodeItem.h"
+#include "FluTableSortProxyModel.h"
 
 void FluentUI::registerTypes(QQmlEngine *engine){
     initializeEngine(engine,uri);
@@ -39,6 +40,7 @@ void FluentUI::registerTypes(const char *uri){
     qmlRegisterType<FluNetworkCallable>(uri,major,minor,"FluNetworkCallable");
     qmlRegisterType<FluNetworkParams>(uri,major,minor,"FluNetworkParams");
     qmlRegisterType<FluFramelessHelper>(uri,major,minor,"FluFramelessHelper");
+    qmlRegisterType<FluTableSortProxyModel>(uri,major,minor,"FluTableSortProxyModel");
 
     qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/ColorPicker/ColorPicker.qml"),uri,major,minor,"ColorPicker");
     qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/ColorPicker/Content/Checkerboard.qml"),uri,major,minor,"Checkerboard");
diff --git a/src/Qt5/imports/FluentUI/Controls/FluTableView.qml b/src/Qt5/imports/FluentUI/Controls/FluTableView.qml
index a83b5e4e..4b939deb 100644
--- a/src/Qt5/imports/FluentUI/Controls/FluTableView.qml
+++ b/src/Qt5/imports/FluentUI/Controls/FluTableView.qml
@@ -8,8 +8,8 @@ Rectangle {
     property var columnSource
     property var dataSource
     property color borderColor: FluTheme.dark ? "#252525" : "#e4e4e4"
-    property alias tableModel: table_model
-    property alias tableView: table_view
+    property alias rows: table_view.rows
+    property alias columns: table_view.columns
     property bool horizonalHeaderVisible: true
     property bool verticalHeaderVisible: true
     id:control
@@ -31,13 +31,13 @@ Rectangle {
     }
     QtObject{
         id:d
-        property var currentIndex
+        property var current
         property int rowHoverIndex: -1
         property int defaultItemWidth: 100
         property int defaultItemHeight: 42
         property var header_rows:[]
-        function obtEditDelegate(column,row,cellItem){
-            var display = table_model.data(table_model.index(row,column),"display")
+        function obtEditDelegate(column,row,display,cellItem){
+            var tableModel = table_view.model
             var cellPosition = cellItem.mapToItem(scroll_table, 0, 0)
             item_loader.column = column
             item_loader.row = row
@@ -59,17 +59,15 @@ Rectangle {
     }
     onDataSourceChanged: {
         table_model.clear()
-        var rows = []
-        for(var i =0;i<dataSource.length;i++){
-            var row = dataSource[i]
-            row.__index= i
-            rows.push(row)
-        }
-        table_model.rows = rows
+        table_model.rows = dataSource
     }
     TableModel {
         id:table_model
     }
+    FluTableSortProxyModel{
+        id:table_sort_model
+        model: table_model
+    }
     Component{
         id:com_edit
         FluTextBox{
@@ -82,7 +80,7 @@ Rectangle {
             }
             onCommit: {
                 if(!readOnly){
-                    display = text_box.text
+                    editTextChaged(text_box.text)
                 }
                 tableView.closeEditor()
             }
@@ -115,7 +113,7 @@ Rectangle {
                     rightPadding: 24
                     onCommit: {
                         if(!readOnly){
-                            display = text
+                            editTextChaged(text_box.text)
                         }
                         tableView.closeEditor()
                     }
@@ -146,7 +144,7 @@ Rectangle {
         id:com_text
         FluText {
             id:item_text
-            text: modelData
+            text: String(display)
             elide: Text.ElideRight
             wrapMode: Text.WrapAnywhere
             anchors{
@@ -220,12 +218,13 @@ Rectangle {
                     return w
                 }
                 rowHeightProvider: function(row) {
-                    if(row>=table_model.rowCount){
+                    if(row>=table_view.rows){
                         return 0
                     }
-                    var h = table_model.getRow(row).height
+                    var rowObject = control.getRow(row)
+                    var h = rowObject.height
                     if(!h){
-                        h = table_model.getRow(row).minimumHeight
+                        h = rowObject._minimumHeight
                     }
                     if(!h){
                         h = d.defaultItemHeight
@@ -243,8 +242,12 @@ Rectangle {
                 }
                 model: table_model
                 clip: true
+                onRowsChanged: {
+                    closeEditor()
+                }
                 delegate: MouseArea{
-                    property var rowObject : table_model.getRow(row)
+                    property var rowObject : control.getRow(row)
+                    property var itemModel: model
                     hoverEnabled: true
                     implicitHeight: 40
                     implicitWidth: {
@@ -264,7 +267,14 @@ Rectangle {
                         id:item_table
                         anchors.fill: parent
                         property point position: Qt.point(column,row)
-                        property bool isRowSelected: d.currentIndex === rowObject.__index
+                        property bool isRowSelected: {
+                            if(rowObject === null)
+                                return false
+                            if(d.current){
+                                return rowObject._key === d.current._key
+                            }
+                            return false
+                        }
                         color:{
                             if(d.rowHoverIndex === row || item_table.isRowSelected){
                                 return FluTheme.dark ? Qt.rgba(1,1,1,0.06) : Qt.rgba(0,0,0,0.06)
@@ -297,23 +307,20 @@ Rectangle {
                                 if(typeof(display) == "object"){
                                     return
                                 }
-                                item_loader.sourceComponent = d.obtEditDelegate(column,row,item_table)
+                                item_loader.sourceComponent = d.obtEditDelegate(column,row,display,item_table)
                             }
                             onClicked:
                                 (event)=>{
-                                    d.currentIndex = rowObject.__index
+                                    d.current = rowObject
                                     item_loader.sourceComponent = undefined
                                     event.accepted = true
                                 }
                         }
                         FluLoader{
-                            property var itemModel: model
-                            property var modelData: display
-                            property var tableView: table_view
-                            property var tableModel: table_model
-                            property var position: item_table.position
-                            property int row: position.y
-                            property int column: position.x
+                            property var model: itemModel
+                            property var display: itemModel.display
+                            property int row: item_table.position.y
+                            property int column: item_table.position.x
                             property var options: {
                                 if(typeof(modelData) == "object"){
                                     return modelData.options
@@ -352,13 +359,15 @@ Rectangle {
                     property int column
                     property int row
                     property var tableView: control
+                    signal editTextChaged(string text)
                     sourceComponent: undefined
                     anchors.fill: parent
-                    onDisplayChanged: {
-                        var obj = table_model.getRow(row)
-                        obj[columnSource[column].dataIndex] = display
-                        table_model.setRow(row,obj)
-                    }
+                    onEditTextChaged:
+                        (text)=>{
+                            var obj = control.getRow(row)
+                            obj[columnSource[column].dataIndex] = text
+                            control.setRow(row,obj)
+                        }
                 }
             }
         }
@@ -431,7 +440,7 @@ Rectangle {
                 height: parent.height
                 anchors.right: parent.right
                 color:"#00000000"
-                visible: column === tableModel.columnCount - 1
+                visible: column === table_view.columns - 1
             }
             MouseArea{
                 id:column_item_control_mouse
@@ -538,7 +547,7 @@ Rectangle {
         Connections{
             target: table_model
             function onRowCountChanged(){
-               model_rows.rows = Array.from({length: table_model.rows.length}, (_, i) => ({rowIndex:i+1}));
+                model_rows.rows = Array.from({length: table_model.rows.length}, (_, i) => ({rowIndex:i+1}));
             }
         }
         onContentYChanged:{
@@ -555,7 +564,7 @@ Rectangle {
             id:item_control
             readonly property real cellPadding: 8
             property bool canceled: false
-            property var rowObject: table_model.getRow(row)
+            property var rowObject: control.getRow(row)
             implicitWidth: Math.max(30, row_text.implicitWidth + (cellPadding * 2))
             implicitHeight: row_text.implicitHeight + (cellPadding * 2)
             width: implicitWidth
@@ -573,7 +582,7 @@ Rectangle {
                 width: parent.width
                 height: 1
                 anchors.bottom: parent.bottom
-                visible: row === tableModel.rowCount - 1
+                visible: row === table_view.rows - 1
                 color:"#00000000"
             }
             Rectangle{
@@ -620,7 +629,11 @@ Rectangle {
                 anchors.bottom: parent.bottom
                 acceptedButtons: Qt.LeftButton
                 cursorShape: Qt.SplitVCursor
-                visible: !(rowObject.height === rowObject.minimumHeight && rowObject.height === rowObject.maximumHeight && rowObject.height)
+                visible: {
+                    if(rowObject === null)
+                        return false
+                    return !(rowObject.height === rowObject._minimumHeight && rowObject.height === rowObject._maximumHeight && rowObject.height)
+                }
                 onPressed :
                     (mouse)=>{
                         header_vertical.interactive = false
@@ -640,9 +653,10 @@ Rectangle {
                         if(!pressed){
                             return
                         }
+                        var rowObject = control.getRow(row)
                         var delta = Qt.point(mouse.x - clickPos.x, mouse.y - clickPos.y)
-                        var minimumHeight = rowObject.minimumHeight
-                        var maximumHeight = rowObject.maximumHeight
+                        var minimumHeight = rowObject._minimumHeight
+                        var maximumHeight = rowObject._maximumHeight
                         var h = rowObject.height
                         if(!h){
                             h = d.defaultItemHeight
@@ -654,7 +668,7 @@ Rectangle {
                             maximumHeight = 65535
                         }
                         rowObject.height = Math.min(Math.max(minimumHeight, h + delta.y),maximumHeight)
-                        table_model.setRow(row,rowObject)
+                        control.setRow(row,rowObject)
                         table_view.forceLayout()
                     }
             }
@@ -673,21 +687,33 @@ Rectangle {
         o.options = options
         return o
     }
-    function updateRow(row,obj){
-        table_model.setRow(row,obj)
-    }
     function sort(order){
-        let sortedArray = []
-        for(var i =0;i<table_model.rowCount;i++){
-            let row = table_model.getRow(i)
-            sortedArray.push(row)
-        }
         if(order === undefined){
-            sortedArray.sort((a, b) => a.__index -  b.__index)
+            table_view.model = table_model
         }else{
-            sortedArray.sort(order)
+            table_view.model = table_sort_model
+            table_sort_model.setSortComparator(function(left,right){
+                return order(table_model.getRow(left),table_model.getRow(right))
+            })
         }
-        table_model.clear()
-        table_model.rows = sortedArray
+    }
+    function setRow(rowIndex,obj){
+        if(rowIndex>=0 && rowIndex<table_view.rows){
+            table_view.model.setRow(rowIndex,obj)
+        }
+    }
+    function getRow(rowIndex){
+        if(rowIndex>=0 && rowIndex<table_view.rows){
+            return table_view.model.getRow(rowIndex)
+        }
+        return null
+    }
+    function removeRow(rowIndex,rows=1){
+        if(rowIndex>=0 && rowIndex<table_view.rows){
+            table_view.model.removeRow(rowIndex,rows)
+        }
+    }
+    function appendRow(obj){
+        table_model.appendRow(obj)
     }
 }
diff --git a/src/Qt5/imports/FluentUI/plugins.qmltypes b/src/Qt5/imports/FluentUI/plugins.qmltypes
index dd0bdc5e..59489151 100644
--- a/src/Qt5/imports/FluentUI/plugins.qmltypes
+++ b/src/Qt5/imports/FluentUI/plugins.qmltypes
@@ -81,7 +81,10 @@ Module {
         exports: ["FluentUI/FluFramelessHelper 1.0"]
         exportMetaObjectRevisions: [0]
         Signal { name: "loadCompleted" }
-        Method { name: "showSystemMenu" }
+        Method {
+            name: "showSystemMenu"
+            Parameter { name: "point"; type: "QPoint" }
+        }
     }
     Component {
         name: "FluNavigationViewType"
@@ -299,6 +302,32 @@ Module {
             }
         }
     }
+    Component {
+        name: "FluTableSortProxyModel"
+        prototype: "QSortFilterProxyModel"
+        exports: ["FluentUI/FluTableSortProxyModel 1.0"]
+        exportMetaObjectRevisions: [0]
+        Property { name: "model"; type: "QAbstractTableModel"; isPointer: true }
+        Method {
+            name: "setSortComparator"
+            Parameter { name: "comparator"; type: "QJSValue" }
+        }
+        Method {
+            name: "getRow"
+            type: "QVariant"
+            Parameter { name: "rowIndex"; type: "int" }
+        }
+        Method {
+            name: "setRow"
+            Parameter { name: "rowIndex"; type: "int" }
+            Parameter { name: "val"; type: "QVariant" }
+        }
+        Method {
+            name: "removeRow"
+            Parameter { name: "rowIndex"; type: "int" }
+            Parameter { name: "rows"; type: "int" }
+        }
+    }
     Component {
         name: "FluThemeType"
         exports: ["FluentUI/FluThemeType 1.0"]
@@ -346,7 +375,7 @@ Module {
         exports: ["FluentUI/FluTreeModel 1.0"]
         exportMetaObjectRevisions: [0]
         Property { name: "dataSourceSize"; type: "int" }
-        Property { name: "selectionModel"; type: "QList<Node*>" }
+        Property { name: "selectionModel"; type: "QList<FluNode*>" }
         Method {
             name: "removeRows"
             Parameter { name: "row"; type: "int" }
@@ -355,7 +384,7 @@ Module {
         Method {
             name: "insertRows"
             Parameter { name: "row"; type: "int" }
-            Parameter { name: "data"; type: "QList<Node*>" }
+            Parameter { name: "data"; type: "QList<FluNode*>" }
         }
         Method {
             name: "getRow"
@@ -364,7 +393,7 @@ Module {
         }
         Method {
             name: "setData"
-            Parameter { name: "data"; type: "QList<Node*>" }
+            Parameter { name: "data"; type: "QList<FluNode*>" }
         }
         Method {
             name: "setDataSource"
@@ -386,7 +415,7 @@ Module {
         }
         Method {
             name: "getNode"
-            type: "Node*"
+            type: "FluNode*"
             Parameter { name: "row"; type: "int" }
         }
         Method {
@@ -2177,6 +2206,99 @@ Module {
             Parameter { name: "value"; type: "QVariant" }
         }
     }
+    Component {
+        name: "QAbstractProxyModel"
+        prototype: "QAbstractItemModel"
+        Property { name: "sourceModel"; type: "QAbstractItemModel"; isPointer: true }
+        Method {
+            name: "mapToSource"
+            type: "QModelIndex"
+            Parameter { name: "proxyIndex"; type: "QModelIndex" }
+        }
+        Method {
+            name: "mapFromSource"
+            type: "QModelIndex"
+            Parameter { name: "sourceIndex"; type: "QModelIndex" }
+        }
+        Method {
+            name: "mapSelectionToSource"
+            type: "QItemSelection"
+            Parameter { name: "selection"; type: "QItemSelection" }
+        }
+        Method {
+            name: "mapSelectionFromSource"
+            type: "QItemSelection"
+            Parameter { name: "selection"; type: "QItemSelection" }
+        }
+    }
+    Component {
+        name: "QSortFilterProxyModel"
+        prototype: "QAbstractProxyModel"
+        Property { name: "filterRegExp"; type: "QRegExp" }
+        Property { name: "filterRegularExpression"; type: "QRegularExpression" }
+        Property { name: "filterKeyColumn"; type: "int" }
+        Property { name: "dynamicSortFilter"; type: "bool" }
+        Property { name: "filterCaseSensitivity"; type: "Qt::CaseSensitivity" }
+        Property { name: "sortCaseSensitivity"; type: "Qt::CaseSensitivity" }
+        Property { name: "isSortLocaleAware"; type: "bool" }
+        Property { name: "sortRole"; type: "int" }
+        Property { name: "filterRole"; type: "int" }
+        Property { name: "recursiveFilteringEnabled"; type: "bool" }
+        Signal {
+            name: "dynamicSortFilterChanged"
+            Parameter { name: "dynamicSortFilter"; type: "bool" }
+        }
+        Signal {
+            name: "filterCaseSensitivityChanged"
+            Parameter { name: "filterCaseSensitivity"; type: "Qt::CaseSensitivity" }
+        }
+        Signal {
+            name: "sortCaseSensitivityChanged"
+            Parameter { name: "sortCaseSensitivity"; type: "Qt::CaseSensitivity" }
+        }
+        Signal {
+            name: "sortLocaleAwareChanged"
+            Parameter { name: "sortLocaleAware"; type: "bool" }
+        }
+        Signal {
+            name: "sortRoleChanged"
+            Parameter { name: "sortRole"; type: "int" }
+        }
+        Signal {
+            name: "filterRoleChanged"
+            Parameter { name: "filterRole"; type: "int" }
+        }
+        Signal {
+            name: "recursiveFilteringEnabledChanged"
+            Parameter { name: "recursiveFilteringEnabled"; type: "bool" }
+        }
+        Method {
+            name: "setFilterRegExp"
+            Parameter { name: "pattern"; type: "string" }
+        }
+        Method {
+            name: "setFilterRegExp"
+            Parameter { name: "regExp"; type: "QRegExp" }
+        }
+        Method {
+            name: "setFilterRegularExpression"
+            Parameter { name: "pattern"; type: "string" }
+        }
+        Method {
+            name: "setFilterRegularExpression"
+            Parameter { name: "regularExpression"; type: "QRegularExpression" }
+        }
+        Method {
+            name: "setFilterWildcard"
+            Parameter { name: "pattern"; type: "string" }
+        }
+        Method {
+            name: "setFilterFixedString"
+            Parameter { name: "pattern"; type: "string" }
+        }
+        Method { name: "clear" }
+        Method { name: "invalidate" }
+    }
     Component {
         prototype: "QQuickGrid"
         name: "FluentUI/Checkerboard 1.0"
@@ -2302,31 +2424,31 @@ Module {
         Property { name: "systemMenuListener"; type: "QVariant" }
         Property {
             name: "buttonStayTop"
-            type: "FluIconButton_QMLTYPE_26"
+            type: "FluIconButton_QMLTYPE_28"
             isReadonly: true
             isPointer: true
         }
         Property {
             name: "buttonMinimize"
-            type: "FluIconButton_QMLTYPE_26"
+            type: "FluIconButton_QMLTYPE_28"
             isReadonly: true
             isPointer: true
         }
         Property {
             name: "buttonMaximize"
-            type: "FluIconButton_QMLTYPE_26"
+            type: "FluIconButton_QMLTYPE_28"
             isReadonly: true
             isPointer: true
         }
         Property {
             name: "buttonClose"
-            type: "FluIconButton_QMLTYPE_26"
+            type: "FluIconButton_QMLTYPE_28"
             isReadonly: true
             isPointer: true
         }
         Property {
             name: "buttonDark"
-            type: "FluToggleSwitch_QMLTYPE_31"
+            type: "FluToggleSwitch_QMLTYPE_22"
             isReadonly: true
             isPointer: true
         }
@@ -3004,15 +3126,15 @@ Module {
         defaultProperty: "data"
         Property { name: "logo"; type: "QUrl" }
         Property { name: "title"; type: "string" }
-        Property { name: "items"; type: "FluObject_QMLTYPE_163"; isPointer: true }
-        Property { name: "footerItems"; type: "FluObject_QMLTYPE_163"; isPointer: true }
+        Property { name: "items"; type: "FluObject_QMLTYPE_162"; isPointer: true }
+        Property { name: "footerItems"; type: "FluObject_QMLTYPE_162"; isPointer: true }
         Property { name: "displayMode"; type: "int" }
         Property { name: "autoSuggestBox"; type: "QQmlComponent"; isPointer: true }
         Property { name: "actionItem"; type: "QQmlComponent"; isPointer: true }
         Property { name: "topPadding"; type: "int" }
         Property { name: "pageMode"; type: "int" }
-        Property { name: "navItemRightMenu"; type: "FluMenu_QMLTYPE_51"; isPointer: true }
-        Property { name: "navItemExpanderRightMenu"; type: "FluMenu_QMLTYPE_51"; isPointer: true }
+        Property { name: "navItemRightMenu"; type: "FluMenu_QMLTYPE_41"; isPointer: true }
+        Property { name: "navItemExpanderRightMenu"; type: "FluMenu_QMLTYPE_41"; isPointer: true }
         Property { name: "navCompactWidth"; type: "int" }
         Property { name: "navTopMargin"; type: "int" }
         Property { name: "cellHeight"; type: "int" }
@@ -3020,13 +3142,13 @@ Module {
         Property { name: "hideNavAppBar"; type: "bool" }
         Property {
             name: "buttonMenu"
-            type: "FluIconButton_QMLTYPE_26"
+            type: "FluIconButton_QMLTYPE_28"
             isReadonly: true
             isPointer: true
         }
         Property {
             name: "buttonBack"
-            type: "FluIconButton_QMLTYPE_26"
+            type: "FluIconButton_QMLTYPE_28"
             isReadonly: true
             isPointer: true
         }
@@ -3569,8 +3691,8 @@ Module {
         Property { name: "borderColor"; type: "QColor" }
         Property { name: "horizonalHeaderVisible"; type: "bool" }
         Property { name: "verticalHeaderVisible"; type: "bool" }
-        Property { name: "tableModel"; type: "QQmlTableModel"; isReadonly: true; isPointer: true }
-        Property { name: "tableView"; type: "QQuickTableView"; isReadonly: true; isPointer: true }
+        Property { name: "rows"; type: "int"; isReadonly: true }
+        Property { name: "columns"; type: "int"; isReadonly: true }
         Method { name: "closeEditor"; type: "QVariant" }
         Method { name: "resetPosition"; type: "QVariant" }
         Method {
@@ -3579,17 +3701,33 @@ Module {
             Parameter { name: "comId"; type: "QVariant" }
             Parameter { name: "options"; type: "QVariant" }
         }
-        Method {
-            name: "updateRow"
-            type: "QVariant"
-            Parameter { name: "row"; type: "QVariant" }
-            Parameter { name: "obj"; type: "QVariant" }
-        }
         Method {
             name: "sort"
             type: "QVariant"
             Parameter { name: "order"; type: "QVariant" }
         }
+        Method {
+            name: "setRow"
+            type: "QVariant"
+            Parameter { name: "rowIndex"; type: "QVariant" }
+            Parameter { name: "obj"; type: "QVariant" }
+        }
+        Method {
+            name: "getRow"
+            type: "QVariant"
+            Parameter { name: "rowIndex"; type: "QVariant" }
+        }
+        Method {
+            name: "removeRow"
+            type: "QVariant"
+            Parameter { name: "rowIndex"; type: "QVariant" }
+            Parameter { name: "rows"; type: "QVariant" }
+        }
+        Method {
+            name: "appendRow"
+            type: "QVariant"
+            Parameter { name: "obj"; type: "QVariant" }
+        }
     }
     Component {
         prototype: "QQuickText"
@@ -3814,13 +3952,13 @@ Module {
         Property { name: "showStayTop"; type: "bool" }
         Property { name: "autoMaximize"; type: "bool" }
         Property { name: "autoVisible"; type: "bool" }
+        Property { name: "autoCenter"; type: "bool" }
         Property { name: "useSystemAppBar"; type: "bool" }
         Property { name: "resizeBorderColor"; type: "QColor" }
         Property { name: "resizeBorderWidth"; type: "int" }
         Property { name: "closeListener"; type: "QVariant" }
         Property { name: "_offsetXY"; type: "QPointF" }
         Property { name: "_originalPos"; type: "QVariant" }
-        Property { name: "_accentColor"; type: "QColor" }
         Property { name: "_realHeight"; type: "int" }
         Property { name: "_realWidth"; type: "int" }
         Property { name: "_appBarHeight"; type: "int" }
diff --git a/src/Qt6/imports/FluentUI/Controls/FluTableView.qml b/src/Qt6/imports/FluentUI/Controls/FluTableView.qml
index 0f70c9e7..0af24ab4 100644
--- a/src/Qt6/imports/FluentUI/Controls/FluTableView.qml
+++ b/src/Qt6/imports/FluentUI/Controls/FluTableView.qml
@@ -9,8 +9,8 @@ Rectangle {
     property var columnSource
     property var dataSource
     property color borderColor: FluTheme.dark ? "#252525" : "#e4e4e4"
-    property alias tableModel: table_model
-    property alias tableView: table_view
+    property alias rows: table_view.rows
+    property alias columns: table_view.columns
     property bool horizonalHeaderVisible: true
     property bool verticalHeaderVisible: true
     id:control
@@ -32,13 +32,13 @@ Rectangle {
     }
     QtObject{
         id:d
-        property var currentIndex
+        property var current
         property int rowHoverIndex: -1
         property int defaultItemWidth: 100
         property int defaultItemHeight: 42
         property var header_rows:[]
-        function obtEditDelegate(column,row,cellItem){
-            var display = table_model.data(table_model.index(row,column),"display")
+        function obtEditDelegate(column,row,display,cellItem){
+            var tableModel = table_view.model
             var cellPosition = cellItem.mapToItem(scroll_table, 0, 0)
             item_loader.column = column
             item_loader.row = row
@@ -60,17 +60,15 @@ Rectangle {
     }
     onDataSourceChanged: {
         table_model.clear()
-        var rows = []
-        for(var i =0;i<dataSource.length;i++){
-            var row = dataSource[i]
-            row.__index= i
-            rows.push(row)
-        }
-        table_model.rows = rows
+        table_model.rows = dataSource
     }
     TableModel {
         id:table_model
     }
+    FluTableSortProxyModel{
+        id:table_sort_model
+        model: table_model
+    }
     Component{
         id:com_edit
         FluTextBox{
@@ -83,7 +81,7 @@ Rectangle {
             }
             onCommit: {
                 if(!readOnly){
-                    display = text_box.text
+                    editTextChaged(text_box.text)
                 }
                 tableView.closeEditor()
             }
@@ -116,7 +114,7 @@ Rectangle {
                     rightPadding: 24
                     onCommit: {
                         if(!readOnly){
-                            display = text
+                            editTextChaged(text_box.text)
                         }
                         tableView.closeEditor()
                     }
@@ -147,7 +145,7 @@ Rectangle {
         id:com_text
         FluText {
             id:item_text
-            text: modelData
+            text: String(display)
             elide: Text.ElideRight
             wrapMode: Text.WrapAnywhere
             anchors{
@@ -221,12 +219,13 @@ Rectangle {
                     return w
                 }
                 rowHeightProvider: function(row) {
-                    if(row>=table_model.rowCount){
+                    if(row>=table_view.rows){
                         return 0
                     }
-                    var h = table_model.getRow(row).height
+                    var rowObject = control.getRow(row)
+                    var h = rowObject.height
                     if(!h){
-                        h = table_model.getRow(row).minimumHeight
+                        h = rowObject._minimumHeight
                     }
                     if(!h){
                         h = d.defaultItemHeight
@@ -244,8 +243,12 @@ Rectangle {
                 }
                 model: table_model
                 clip: true
+                onRowsChanged: {
+                    closeEditor()
+                }
                 delegate: MouseArea{
-                    property var rowObject : table_model.getRow(row)
+                    property var rowObject : control.getRow(row)
+                    property var itemModel: model
                     hoverEnabled: true
                     implicitHeight: 40
                     implicitWidth: {
@@ -265,7 +268,14 @@ Rectangle {
                         id:item_table
                         anchors.fill: parent
                         property point position: Qt.point(column,row)
-                        property bool isRowSelected: d.currentIndex === rowObject.__index
+                        property bool isRowSelected: {
+                            if(rowObject === null)
+                                return false
+                            if(d.current){
+                                return rowObject._key === d.current._key
+                            }
+                            return false
+                        }
                         color:{
                             if(d.rowHoverIndex === row || item_table.isRowSelected){
                                 return FluTheme.dark ? Qt.rgba(1,1,1,0.06) : Qt.rgba(0,0,0,0.06)
@@ -298,23 +308,20 @@ Rectangle {
                                 if(typeof(display) == "object"){
                                     return
                                 }
-                                item_loader.sourceComponent = d.obtEditDelegate(column,row,item_table)
+                                item_loader.sourceComponent = d.obtEditDelegate(column,row,display,item_table)
                             }
                             onClicked:
                                 (event)=>{
-                                    d.currentIndex = rowObject.__index
+                                    d.current = rowObject
                                     item_loader.sourceComponent = undefined
                                     event.accepted = true
                                 }
                         }
                         FluLoader{
-                            property var itemModel: model
-                            property var modelData: display
-                            property var tableView: table_view
-                            property var tableModel: table_model
-                            property var position: item_table.position
-                            property int row: position.y
-                            property int column: position.x
+                            property var model: itemModel
+                            property var display: itemModel.display
+                            property int row: item_table.position.y
+                            property int column: item_table.position.x
                             property var options: {
                                 if(typeof(modelData) == "object"){
                                     return modelData.options
@@ -353,13 +360,15 @@ Rectangle {
                     property int column
                     property int row
                     property var tableView: control
+                    signal editTextChaged(string text)
                     sourceComponent: undefined
                     anchors.fill: parent
-                    onDisplayChanged: {
-                        var obj = table_model.getRow(row)
-                        obj[columnSource[column].dataIndex] = display
-                        table_model.setRow(row,obj)
-                    }
+                    onEditTextChaged:
+                        (text)=>{
+                            var obj = control.getRow(row)
+                            obj[columnSource[column].dataIndex] = text
+                            control.setRow(row,obj)
+                        }
                 }
             }
         }
@@ -432,7 +441,7 @@ Rectangle {
                 height: parent.height
                 anchors.right: parent.right
                 color:"#00000000"
-                visible: column === tableModel.columnCount - 1
+                visible: column === table_view.columns - 1
             }
             MouseArea{
                 id:column_item_control_mouse
@@ -539,7 +548,7 @@ Rectangle {
         Connections{
             target: table_model
             function onRowCountChanged(){
-               model_rows.rows = Array.from({length: table_model.rows.length}, (_, i) => ({rowIndex:i+1}));
+                model_rows.rows = Array.from({length: table_model.rows.length}, (_, i) => ({rowIndex:i+1}));
             }
         }
         onContentYChanged:{
@@ -556,7 +565,7 @@ Rectangle {
             id:item_control
             readonly property real cellPadding: 8
             property bool canceled: false
-            property var rowObject: table_model.getRow(row)
+            property var rowObject: control.getRow(row)
             implicitWidth: Math.max(30, row_text.implicitWidth + (cellPadding * 2))
             implicitHeight: row_text.implicitHeight + (cellPadding * 2)
             width: implicitWidth
@@ -574,7 +583,7 @@ Rectangle {
                 width: parent.width
                 height: 1
                 anchors.bottom: parent.bottom
-                visible: row === tableModel.rowCount - 1
+                visible: row === table_view.rows - 1
                 color:"#00000000"
             }
             Rectangle{
@@ -621,7 +630,11 @@ Rectangle {
                 anchors.bottom: parent.bottom
                 acceptedButtons: Qt.LeftButton
                 cursorShape: Qt.SplitVCursor
-                visible: !(rowObject.height === rowObject.minimumHeight && rowObject.height === rowObject.maximumHeight && rowObject.height)
+                visible: {
+                    if(rowObject === null)
+                        return false
+                    return !(rowObject.height === rowObject._minimumHeight && rowObject.height === rowObject._maximumHeight && rowObject.height)
+                }
                 onPressed :
                     (mouse)=>{
                         header_vertical.interactive = false
@@ -641,9 +654,10 @@ Rectangle {
                         if(!pressed){
                             return
                         }
+                        var rowObject = control.getRow(row)
                         var delta = Qt.point(mouse.x - clickPos.x, mouse.y - clickPos.y)
-                        var minimumHeight = rowObject.minimumHeight
-                        var maximumHeight = rowObject.maximumHeight
+                        var minimumHeight = rowObject._minimumHeight
+                        var maximumHeight = rowObject._maximumHeight
                         var h = rowObject.height
                         if(!h){
                             h = d.defaultItemHeight
@@ -655,7 +669,7 @@ Rectangle {
                             maximumHeight = 65535
                         }
                         rowObject.height = Math.min(Math.max(minimumHeight, h + delta.y),maximumHeight)
-                        table_model.setRow(row,rowObject)
+                        control.setRow(row,rowObject)
                         table_view.forceLayout()
                     }
             }
@@ -674,21 +688,33 @@ Rectangle {
         o.options = options
         return o
     }
-    function updateRow(row,obj){
-        table_model.setRow(row,obj)
-    }
     function sort(order){
-        let sortedArray = []
-        for(var i =0;i<table_model.rowCount;i++){
-            let row = table_model.getRow(i)
-            sortedArray.push(row)
-        }
         if(order === undefined){
-            sortedArray.sort((a, b) => a.__index -  b.__index)
+            table_view.model = table_model
         }else{
-            sortedArray.sort(order)
+            table_view.model = table_sort_model
+            table_sort_model.setSortComparator(function(left,right){
+                return order(table_model.getRow(left),table_model.getRow(right))
+            })
         }
-        table_model.clear()
-        table_model.rows = sortedArray
+    }
+    function setRow(rowIndex,obj){
+        if(rowIndex>=0 && rowIndex<table_view.rows){
+            table_view.model.setRow(rowIndex,obj)
+        }
+    }
+    function getRow(rowIndex){
+        if(rowIndex>=0 && rowIndex<table_view.rows){
+            return table_view.model.getRow(rowIndex)
+        }
+        return null
+    }
+    function removeRow(rowIndex,rows=1){
+        if(rowIndex>=0 && rowIndex<table_view.rows){
+            table_view.model.removeRow(rowIndex,rows)
+        }
+    }
+    function appendRow(obj){
+        table_model.appendRow(obj)
     }
 }