update

example/CMakeLists.txt

@@ -20,7 +20,7 @@ endif()
 file(TO_CMAKE_PATH "/" PATH_SEPARATOR)
 
 #设置版本号
-add_definitions(-DVERSION=1,3,5,1)
+add_definitions(-DVERSION=1,3,6)
 
 find_package(Qt6 REQUIRED COMPONENTS Quick)
 qt_standard_project_setup()

example/qml/component/CodeExpander.qml

@@ -131,7 +131,8 @@ FluExpander{
                     "FluCopyableText",
                     "FluAcrylic",
                     "FluRemoteLoader",
-                    "FluMenuBar"
+                    "FluMenuBar",
+                    "FluPagination"
                 ];
         code = code.replace(/\n/g, "<br>");
         code = code.replace(/ /g, "&nbsp;");

example/qml/global/ItemsOriginal.qml

@@ -259,9 +259,9 @@ FluObject{
             }
         }
         FluPaneItem{
-            title:"TableView2"
+            title:"Pagination"
             onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TableView2.qml")
+                navigationView.push("qrc:/example/qml/page/T_Pagination.qml")
             }
         }
         FluPaneItem{

example/qml/page/T_Pagination.qml

@@ -0,0 +1,49 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import "qrc:///example/qml/component"
+import FluentUI
+
+FluScrollablePage{
+
+    title:"Pagination"
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 200
+        paddings: 10
+        Layout.topMargin: 20
+        ColumnLayout{
+            spacing: 20
+            anchors.verticalCenter: parent.verticalCenter
+            FluPagination{
+                pageCurrent: 1
+                pageButtonCount: 5
+                itemCount: 5000
+            }
+            FluPagination{
+                pageCurrent: 2
+                itemCount: 5000
+                pageButtonCount: 7
+            }
+            FluPagination{
+                pageCurrent: 3
+                itemCount: 5000
+                pageButtonCount: 9
+            }
+        }
+
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluPagination{
+    pageCurrent: 1
+    itemCount: 1000
+    pageButtonCount: 9
+}'
+    }
+
+
+}

example/qml/page/T_TableView.qml

@@ -5,162 +5,12 @@ import QtQuick.Window
 import FluentUI
 import "qrc:///example/qml/component"
 
-FluScrollablePage{
+FluContentPage{
 
     title:"TableView"
 
     Component.onCompleted: {
-        const columns = [
+        loadData(1,2000)
-                          {
-                              title: '姓名',
-                              dataIndex: 'name',
-                              width:100,
-
-                          },
-                          {
-                              title: '年龄',
-                              dataIndex: 'item_age',
-                              width:100,
-                              minimumWidth:100
-                          },
-                          {
-                              title: '住址',
-                              dataIndex: 'address',
-                              width:200
-                          },
-                          {
-                              title: '别名',
-                              dataIndex: 'nickname',
-                              width:100
-                          },
-                          {
-                              title: '操作',
-                              dataIndex: 'action',
-                              width:120
-                          },
-                      ];
-        table_view.columns = columns
-        loadData(1,10)
-    }
-
-    Component{
-        id:com_age
-        Item{
-            id:item_age
-            property var ageArr: [100,300,500,1000]
-            height: 60
-            FluComboBox{
-                width: 80
-                anchors{
-                    verticalCenter: parent.verticalCenter
-                    left: parent.left
-                    leftMargin: 10
-                }
-                model: ListModel {
-                    ListElement { text: 100 }
-                    ListElement { text: 300 }
-                    ListElement { text: 500 }
-                    ListElement { text: 1000 }
-                }
-                Component.onCompleted: {
-                    currentIndex=ageArr.findIndex((element) => element === dataModel.age)
-                }
-            }
-        }
-    }
-
-    Component{
-        id:com_action
-        Item{
-            height: 60
-            Row{
-                anchors.centerIn: parent
-                spacing: 10
-                FluFilledButton{
-                    text:"编辑"
-                    horizontalPadding: 6
-                    onClicked:{
-                        showError(JSON.stringify(dataObject))
-                    }
-                }
-                FluFilledButton{
-                    text:"删除"
-                    horizontalPadding: 6
-                    onClicked:{
-                        tableView.remove(dataModel.index)
-                    }
-                }
-            }
-        }
-    }
-
-    FluText{
-        Layout.topMargin: 20
-        text:"此TableView适用于小数据量，带分页的表格，大数据量请使用TableView2。"
-    }
-
-    FluTableView{
-        id:table_view
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        pageCurrent:1
-        pageCount:10
-        itemCount: 1000
-        onRequestPage:
-            (page,count)=> {
-                loadData(page,count)
-            }
-    }
-
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: 10
-        code:'FluTableView{
-    id:table_view
-    Layout.fillWidth: true
-    Layout.topMargin: 20
-    pageCurrent:1
-    pageCount:10
-    itemCount: 1000
-    onRequestPage:
-            (page,count)=> {
-                loadData(page,count)
-            }
-    Component.onCompleted: {
-        const columns = [
-                          {
-                              title: "姓名",
-                              dataIndex: "name",
-                              width:100
-                          },
-                          {
-                              title: "年龄",
-                              dataIndex: "age",
-                              width:100
-                          },
-                          {
-                              title: "住址",
-                              dataIndex: "address",
-                              width:200
-                          },
-                          {
-                              title: "别名",
-                              dataIndex: "nickname",
-                              width:100
-                          }
-                      ];
-        table_view.columns = columns
-        const dataSource = [
-                {
-                    name: "孙悟空”,
-                    age: 500,
-                    address:"钟灵毓秀的花果山,如神仙仙境的水帘洞",
-                    nickname:"齐天大圣"
-                }
-        ];
-        table_view.dataSource = columns
-    }
-}'
     }
 
     function loadData(page,count){
@@ -188,13 +38,68 @@ FluScrollablePage{
         for(var i=0;i<count;i++){
             dataSource.push({
                                 name: getRandomName(),
-                                item_age: com_age,
                                 age:getRandomAge(),
                                 address: getRandomAddresses(),
-                                nickname: getRandomNickname(),
+                                nickname: getRandomNickname()
-                                action:com_action
                             })
         }
         table_view.dataSource = dataSource
     }
+
+    Component{
+        id:com_combobox
+
+        FluComboBox {
+            anchors.fill: parent
+            currentIndex: display
+            editable: true
+            model: ListModel {
+                ListElement { text: 100 }
+                ListElement { text: 300 }
+                ListElement { text: 500 }
+                ListElement { text: 1000 }
+            }
+            Component.onCompleted: {
+                currentIndex=[100,300,500,1000].findIndex((element) => element === Number(display))
+                selectAll()
+            }
+            TableView.onCommit: {
+                display = editText
+            }
+        }
+    }
+
+    FluTableView{
+        id:table_view
+        anchors.fill: parent
+        anchors.topMargin: 20
+        columnSource:[
+            {
+                title: '姓名',
+                dataIndex: 'name',
+                width:100,
+                minimumWidth:50
+
+            },
+            {
+                title: '年龄',
+                dataIndex: 'age',
+                editDelegate:com_combobox,
+                width:100,
+                minimumWidth:100,
+                maximumWidth: 100
+            },
+            {
+                title: '住址',
+                dataIndex: 'address',
+                width:200
+            },
+            {
+                title: '别名',
+                dataIndex: 'nickname',
+                width:100,
+
+            }
+        ]
+    }
 }

src/CMakeLists.txt

@@ -13,7 +13,7 @@ endif()
 set(QML_PLUGIN_DIRECTORY ${CMAKE_PREFIX_PATH}/qml/FluentUI)
 
 #设置版本号
-add_definitions(-DVERSION=1,3,5,1)
+add_definitions(-DVERSION=1,3,6)
 
 find_package(Qt6 REQUIRED COMPONENTS Core Quick Qml)
 qt_standard_project_setup()

src/imports/FluentUI/Controls/FluPagination.qml

@@ -9,9 +9,9 @@ Item {
     property string nextText: "下一页>"
     property int pageCurrent: 0
     property int itemCount: 0
+    property int pageButtonCount: 5
     property int pageCount: itemCount>0?Math.ceil(itemCount/__itemPerPage):0
     property int __itemPerPage: 10
-    property int pageButtonCount: 5
     property int __pageButtonHalf: Math.floor(pageButtonCount/2)+1
     id: control
     implicitHeight: 40
@@ -34,7 +34,6 @@ Item {
             FluToggleButton{
                 property int pageNumber:1
                 visible: control.pageCount>0
-                enabled: control.pageCurrent>1
                 checked: pageNumber === control.pageCurrent
                 text:String(pageNumber)
                 clickListener:function() {

src/imports/FluentUI/Controls/FluTableView.qml

@@ -2,293 +2,163 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Controls.Basic
 import QtQuick.Layouts
+import Qt.labs.qmlmodels
 import FluentUI
 
-Item {
+Rectangle {
-    property var columns : []
+    property var columnSource
-    property var dataSource : []
+    property var dataSource
-    property int pageCurrent: 1
-    property int itemCount: 1000
-    property int pageCount: 10
-    property int itemHeight: 56
-    property bool pageVisible: true
-    signal requestPage(int page,int count)
     id:control
-    implicitHeight: layout_table.height
+    color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
-    QtObject{
+    onColumnSourceChanged: {
-        id:d
+        if(columnSource.length!==0){
-        property int columnsWidth: layout_table.headerItem.columnsWidth()
+            var com_column = Qt.createComponent("FluTableModelColumn.qml")
+            if (com_column.status === Component.Ready) {
+                var columns= []
+                columnSource.forEach(function(item){
+                    var column = com_column.createObject(table_model,{display:item.dataIndex});
+                    columns.push(column)
+                })
+                table_model.columns = columns
             }
-    MouseArea{
+        }
+    }
+    onDataSourceChanged: {
+        table_model.clear()
+        dataSource.forEach(function(item){
+            table_model.appendRow(item)
+        })
+    }
+    TableModel {
+        id:table_model
+    }
+    Component{
+        id:com_edit
+        FluTextBox {
             anchors.fill: parent
-        preventStealing: true
+            text: display
+            verticalAlignment: TextInput.AlignVCenter
+            Component.onCompleted: selectAll()
+            TableView.onCommit: {
+                display = text
             }
+        }
+    }
+    ScrollView{
+        id:scroll_table
+        anchors.left: header_vertical.right
+        anchors.top: header_horizontal.bottom
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+        ScrollBar.vertical.policy: ScrollBar.AlwaysOff
+        TableView {
+            id:table_view
             ListModel{
                 id:model_columns
             }
-    ListModel{
+            boundsBehavior: Flickable.StopAtBounds
-        id:model_data_source
+            ScrollBar.horizontal: FluScrollBar{}
+            ScrollBar.vertical: FluScrollBar{}
+            selectionModel: ItemSelectionModel {}
+            columnWidthProvider: function(column) {
+                let w = explicitColumnWidth(column)
+                if (w >= 0){
+                    var minimumWidth = columnSource[column].minimumWidth
+                    var maximumWidth = columnSource[column].maximumWidth
+                    if(!minimumWidth){
+                        minimumWidth = 100
                     }
-    onColumnsChanged: {
+                    if(!maximumWidth){
-        model_columns.clear()
+                        maximumWidth = 65535
-        model_columns.append(columns)
                     }
-    onDataSourceChanged: {
+
-        model_data_source.clear()
+                    return Math.min(Math.max(minimumWidth, w),maximumWidth)
-        model_data_source.append(dataSource)
                 }
-    Component{
+                return implicitColumnWidth(column)
-        id:header_columns
-        FluRectangle{
-            id:layout_columns
-            height: control.itemHeight
-            width: parent.width
-            color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
-            radius: [5,5,0,0]
-            function columnsWidth(){
-                var w = 0
-                for(var i=0;i<repeater_columns.count;i++){
-                    var item = repeater_columns.itemAt(i)
-                    w=w+item.width
             }
-                return w
+            rowHeightProvider: function(row) {
+                let h = explicitRowHeight(row)
+                if (h >= 0){
+                    return Math.max(40, h)
                 }
-            function widthByColumnIndex(index){
+                return implicitRowHeight(row)
-                return repeater_columns.itemAt(index).width
             }
-            Row{
+            model: table_model
-                id:list_columns
+            clip: true
-                spacing: 0
+            delegate: Rectangle {
-                anchors.fill: parent
+                required property bool selected
-                Repeater{
+                required property bool current
-                    id:repeater_columns
+                color: selected ? FluTheme.primaryColor.lightest: (row%2!==0) ? control.color : (FluTheme.dark ? Qt.rgba(1,1,1,0.06) : Qt.rgba(0,0,0,0.06))
-                    model: model_columns
+                implicitHeight: 40
-                    delegate: Item{
+                implicitWidth: columnSource[column].width
-                        id:item_column
-                        property point clickPos: "0,0"
-                        height: list_columns.height
-                        width: model.width
                 FluText {
-                            id:item_column_text
+                    text: display
-                            text:model.title
-                            wrapMode: Text.WordWrap
-                            anchors{
-                                verticalCenter: parent.verticalCenter
-                                left: parent.left
-                                leftMargin: 14
-                            }
-                            font: FluTextStyle.BodyStrong
-                        }
-                        FluDivider{
-                            id:item_divider
-                            width: 1
-                            height: 40
-                            anchors.right: parent.right
-                            anchors.verticalCenter: parent.verticalCenter
-                            visible: index !== model_columns.count-1
-                        }
-                        MouseArea{
-                            height: 40
-                            width: 6
-                            anchors.centerIn: item_divider
-                            visible: item_divider.visible
-                            cursorShape: Qt.SplitHCursor
-                            onPressed:
-                                (mouse)=>{
-                                    clickPos = Qt.point(mouse.x, mouse.y)
-                                }
-                            preventStealing: true
-                            onPositionChanged:
-                                (mouse)=>{
-                                    var delta = Qt.point(mouse.x - clickPos.x, mouse.y - clickPos.y)
-                                    var minimumWidth = item_column_text.implicitWidth+28
-                                    if(model.minimumWidth){
-                                        minimumWidth = model.minimumWidth
-                                    }
-                                    item_column.width = Math.max(item_column.width+delta.x,minimumWidth)
-                                }
-                        }
-                    }
-                }
-            }
-        }
-    }
-    Flickable{
-        id:layout_flickable
-        height: layout_table.height
-        anchors{
-            top: parent.top
-            left: parent.left
-            right: parent.right
-        }
-        contentWidth: layout_table.width
-        clip:true
-        ScrollBar.horizontal: FluScrollBar {
-        }
-        Rectangle{
-            anchors.fill: layout_table
-            radius: 5
-            color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
-        }
-        ListView{
-            id:layout_table
-            height: contentHeight
-            width: Math.max(layout_flickable.width,d.columnsWidth)
-            clip:true
-            interactive: false
-            removeDisplaced: Transition {
-                NumberAnimation { properties: "x,y"; duration: 167 }
-            }
-            header: header_columns
-            footer: Item{
-                height: pageVisible ? 54 : 0
-                clip: true
-                width: layout_table.width
-                FluPagination{
-                    id:pagination
-                    height: 40
-                    pageCurrent: control.pageCurrent
-                    onPageCurrentChanged: control.pageCurrent = pageCurrent
-                    itemCount: control.itemCount
-                    pageCount: control.pageCount
-                    onRequestPage:
-                        (page,count)=> {
-                            control.requestPage(page,count)
-                        }
-                    anchors{
-                        top: parent.top
-                        right: parent.right
-                    }
-                    Connections{
-                        target: control
-                        function onPageCurrentChanged(){
-                            if (control.pageCurrent!==pagination.pageCurrent)
-                            {
-                                pagination.calcNewPage(control.pageCurrent)
-                            }
-                        }
-                    }
-                }
-            }
-            model:model_data_source
-            delegate: Control{
-                id:item_control
-                height: maxHeight()
-                width: layout_table.width
-                property var model_values : getObjectValues(index)
-                property var itemObject: getObject(index)
-                property var listModel: model
-                Rectangle{
                     anchors.fill: parent
-                    color: {
+                    anchors.margins: 10
-                        if(item_control.hovered){
+                    elide: Text.ElideRight
-                            return FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
+                    verticalAlignment: Text.AlignVCenter
                 }
-                        return FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(1,1,1,1)
+                TableView.editDelegate: {
+                    var obj =columnSource[column].editDelegate
+                    if(obj){
+                        return obj
                     }
-                }
+                    return com_edit
-                FluDivider{
-                    id:item_divider
-                    width: parent.width
-                    height: 1
-                    anchors.right: parent.right
-                    anchors.bottom: parent.bottom
-                }
-                Row{
-                    id: table_row
-                    spacing: 0
-                    anchors.fill: parent
-                    Repeater{
-                        id:repeater_rows
-                        model: model_values
-                        delegate:FluControl{
-                            id:item_row_control
-                            width: layout_table.headerItem.widthByColumnIndex(index)
-                            height: item_control.height
-                            focusPolicy:Qt.TabFocus
-                            background: Item{
-                                FluFocusRectangle{
-                                    visible: item_row_control.activeFocus
-                                    radius:8
-                                }
-                            }
-                            Loader{
-                                id:item_column_loader
-                                property var model : modelData
-                                property var dataModel : listModel
-                                property var dataObject : itemObject
-                                property var tableView : control
-                                anchors.verticalCenter: parent.verticalCenter
-                                width: parent.width
-                                sourceComponent: {
-                                    if(model.itemData instanceof Component){
-                                        return model.itemData
-                                    }
-                                    return com_text
-                                }
-                            }
-                            function columnHeight(){
-                                return item_column_loader.item.height
-                            }
-                        }
-                    }
-                }
-                function maxHeight(){
-                    var h = 0
-                    for(var i=0;i<repeater_rows.count;i++){
-                        var item = repeater_rows.itemAt(i)
-                        h=Math.max(h,item.columnHeight())
-                    }
-                    return h
                 }
             }
         }
     }
     Component{
-        id:com_text
+        id:com_handle
-        Item{
+        FluControl {
-            height: table_value.implicitHeight + 20
+            width: 24
-            FluCopyableText{
+            height: 24
-                id:table_value
+            background: Rectangle{
-                text:String(model.itemData)
+                radius: 12
-                width: Math.min(parent.width - 14,implicitWidth)
+                color: FluTheme.dark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1)
-                wrapMode: Text.WordWrap
-                anchors{
-                    verticalCenter: parent.verticalCenter
-                    left: parent.left
-                    leftMargin: 14
             }
-                rightPadding: 14
+            visible: SelectionRectangle.control.active
-                MouseArea{
+            FluShadow{
-                    id:item_mouse
+                radius: 12
-                    hoverEnabled: true
-                    anchors.fill: parent
-                    cursorShape: Qt.IBeamCursor
-                    acceptedButtons: Qt.NoButton
             }
-                FluTooltip{
+            Rectangle{
-                    visible: item_mouse.containsMouse
+                width: 24
-                    text:parent.text
+                height: 24
-                    delay: 1000
+                radius: 12
+                scale: pressed?4/10:hovered?6/10:5/10
+                color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
+                anchors.centerIn: parent
+                Behavior on scale {
+                    NumberAnimation{
+                        duration: 167
                     }
                 }
             }
         }
-    function getObject(index){
-        return model_data_source.get(index)
     }
-    function getObjectValues(index) {
+    SelectionRectangle {
-        var obj = model_data_source.get(index)
+        target: table_view
-        if(!obj)
+        bottomRightHandle:com_handle
-            return
+        topLeftHandle: com_handle
-        var data = []
-        for(var i=0;i<model_columns.count;i++){
-            var item = model_columns.get(i)
-            data.push({itemData:obj[item.dataIndex],width:item.width})
     }
-        return data;
+    FluHorizontalHeaderView {
+        id: header_horizontal
+        textRole: "title"
+        model: columnSource
+        anchors.left: scroll_table.left
+        anchors.top: parent.top
+        syncView: table_view
+        boundsBehavior: Flickable.StopAtBounds
+        clip: true
     }
-    function remove(index){
+    FluVerticalHeaderView {
-        model_data_source.remove(index)
+        id: header_vertical
+        boundsBehavior: Flickable.StopAtBounds
+        anchors.top: scroll_table.top
+        anchors.left: parent.left
+        syncView: table_view
+        clip: true
     }
 }
+

src/imports/FluentUI/Controls/FluTableView2.qml

@@ -1,164 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Controls.Basic
-import QtQuick.Layouts
-import Qt.labs.qmlmodels
-import FluentUI
-
-Rectangle {
-    property var columnSource
-    property var dataSource
-    id:control
-    color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
-    onColumnSourceChanged: {
-        if(columnSource.length!==0){
-            var com_column = Qt.createComponent("FluTableModelColumn.qml")
-            if (com_column.status === Component.Ready) {
-                var columns= []
-                columnSource.forEach(function(item){
-                    var column = com_column.createObject(table_model,{display:item.dataIndex});
-                    columns.push(column)
-                })
-                table_model.columns = columns
-            }
-        }
-    }
-    onDataSourceChanged: {
-        table_model.clear()
-        dataSource.forEach(function(item){
-            table_model.appendRow(item)
-        })
-    }
-    TableModel {
-        id:table_model
-    }
-    Component{
-        id:com_edit
-        FluTextBox {
-            anchors.fill: parent
-            text: display
-            verticalAlignment: TextInput.AlignVCenter
-            Component.onCompleted: selectAll()
-            TableView.onCommit: {
-                display = text
-            }
-        }
-    }
-    ScrollView{
-        id:scroll_table
-        anchors.left: header_vertical.right
-        anchors.top: header_horizontal.bottom
-        anchors.right: parent.right
-        anchors.bottom: parent.bottom
-        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
-        ScrollBar.vertical.policy: ScrollBar.AlwaysOff
-        TableView {
-            id:table_view
-            ListModel{
-                id:model_columns
-            }
-            boundsBehavior: Flickable.StopAtBounds
-            ScrollBar.horizontal: FluScrollBar{}
-            ScrollBar.vertical: FluScrollBar{}
-            selectionModel: ItemSelectionModel {}
-            columnWidthProvider: function(column) {
-                let w = explicitColumnWidth(column)
-                if (w >= 0){
-                    var minimumWidth = columnSource[column].minimumWidth
-                    var maximumWidth = columnSource[column].maximumWidth
-                    if(!minimumWidth){
-                        minimumWidth = 100
-                    }
-                    if(!maximumWidth){
-                        maximumWidth = 65535
-                    }
-
-                    return Math.min(Math.max(minimumWidth, w),maximumWidth)
-                }
-                return implicitColumnWidth(column)
-            }
-            rowHeightProvider: function(row) {
-                let h = explicitRowHeight(row)
-                if (h >= 0){
-                    return Math.max(40, h)
-                }
-                return implicitRowHeight(row)
-            }
-            model: table_model
-            clip: true
-            delegate: Rectangle {
-                required property bool selected
-                required property bool current
-                color: selected ? FluTheme.primaryColor.lightest: (row%2!==0) ? control.color : (FluTheme.dark ? Qt.rgba(1,1,1,0.06) : Qt.rgba(0,0,0,0.06))
-                implicitHeight: 40
-                implicitWidth: columnSource[column].width
-                FluText {
-                    text: display
-                    anchors.fill: parent
-                    anchors.margins: 10
-                    elide: Text.ElideRight
-                    verticalAlignment: Text.AlignVCenter
-                }
-                TableView.editDelegate: {
-                    var obj =columnSource[column].editDelegate
-                    if(obj){
-                        return obj
-                    }
-                    return com_edit
-                }
-            }
-        }
-    }
-    Component{
-        id:com_handle
-        FluControl {
-            width: 24
-            height: 24
-            background: Rectangle{
-                radius: 12
-                color: FluTheme.dark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1)
-            }
-            visible: SelectionRectangle.control.active
-            FluShadow{
-                radius: 12
-            }
-            Rectangle{
-                width: 24
-                height: 24
-                radius: 12
-                scale: pressed?4/10:hovered?6/10:5/10
-                color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
-                anchors.centerIn: parent
-                Behavior on scale {
-                    NumberAnimation{
-                        duration: 167
-                    }
-                }
-            }
-        }
-    }
-    SelectionRectangle {
-        target: table_view
-        bottomRightHandle:com_handle
-        topLeftHandle: com_handle
-    }
-    FluHorizontalHeaderView {
-        id: header_horizontal
-        textRole: "title"
-        model: columnSource
-        anchors.left: scroll_table.left
-        anchors.top: parent.top
-        syncView: table_view
-        boundsBehavior: Flickable.StopAtBounds
-        clip: true
-    }
-    FluVerticalHeaderView {
-        id: header_vertical
-        boundsBehavior: Flickable.StopAtBounds
-        anchors.top: scroll_table.top
-        anchors.left: parent.left
-        syncView: table_view
-        clip: true
-    }
-}
-