如何在QML中将表格设置为rtl？

Question

I want my table right to left.
This is my table:

After the run, I want it to be like this:

The code is QML in the golang. I didn't find any answer. I asked at several sites, but There was no answer.

My code:

import QtQuick 2.0
import QtQuick.Controls 1.0
Rectangle {
    id:kol
    width: 360
    height: 360

Rectangle {
    id:mos
    width: 360
    height: 360
    anchors.centerIn: parent     

    ListModel {
        id: dataModel
        ListElement {
            color: "آبی"
            text: "اول"
        }
        ListElement {
            color: "قرمز"
            text: "دوم"
        }
        ListElement {
            color: "سبز"
            text: "سوم"
        }
        ListElement {
            color: "زرد"
            text: "چهارم"
        }
    }

    TableView {
        id: view
        model: dataModel
        anchors.fill: parent

        TableViewColumn {
            width: 100
            title: "رنگ"
            role: "color"

        }
        TableViewColumn {
            width: 100
            title: "متن"
            role: "text"
        }

        itemDelegate: Item {
            Text {
                anchors.right: parent.right
               // renderType: Text.NativeRendering
                text: styleData.value
            }

        }
    }
}
}

Answer 1

Qt Documentation says do this :

Item{
    //this is working for me
    LayoutMirroring.enabled: true
    LayoutMirroring.childrenInherit: true
    TableView{
       //if columns are not in right places set width for'em
       TableViewColumn {
          role: "operator"
          title: "نوع"
       }

       TableViewColumn {
           role: "title"
           title: "کالا"
       }
    }
}

Update: you could use QmlGrid instead of TableView.

Update 2019-04-23 : here i create simple right to lefted table view :

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls.Universal 2.12
Item {
    id:root
    implicitWidth: 500
    clip: true
    implicitHeight: 300
    property alias model :listView.model
    property alias currentIndex: listView.currentIndex

    property var headerModel : []
    ListView {
        id: listView
        anchors.fill: parent
        onCurrentIndexChanged: {
            root.currentIndexChanged()
        }

        //contentWidth: headerItem.width
        flickableDirection: Flickable.HorizontalAndVerticalFlick
        header: Row{
            spacing: 0
            anchors.right: parent.right
            anchors.rightMargin: 0
            layoutDirection: Qt.RightToLeft
            function itemAt(index) {
                return repeater.itemAt(index)
            }
            Repeater{
                id:repeater
                model: headerModel
                Row{
                    layoutDirection: Qt.RightToLeft
                    width: modelData.width * listView.width
                    Label {
                        height: 40
                        clip: true
                        id:textArea
                        verticalAlignment: Text.AlignVCenter
                        text: modelData.name
                        width: parent.width -1
                        font.family: "B Nazanin"
                        font.bold: true
                        font.pointSize: 12
                        padding: 10
                        background: Rectangle { color: "white" }
                        UIcon{
                            text: "\uf0dc"
                            color: Universal.color(Universal.Cobalt)
                            anchors.left: parent.left
                            anchors.leftMargin: 0
                            anchors.verticalCenter: parent.verticalCenter
                        }

                        MouseArea{
                            clip: true
                            anchors.fill: parent
                            onClicked: {
                                //console.log(modelData.name)
                                //TODO:sort and show sorting arrow
                            }
                        }
                    }
                    Rectangle{
                        height: parent.height
                        width: 1
                        color: "silver"
                    }

                }


            }

        }


        delegate: Column {
            width: parent.width
            id: delegate
            anchors.right: parent.right
            anchors.rightMargin: 0
            Rectangle{
                width: parent.width
                implicitHeight: 35
                id:baserect
                z:1
                color: "white"
                clip: true

                Row {
                    anchors.fill: parent
                    spacing: 0
                    layoutDirection: Qt.RightToLeft
                    clip: true
                    Repeater {
                        anchors.fill: parent
                        model: modelData
                        clip: true
                        Row{
                            id:_row
                            layoutDirection: Qt.RightToLeft
                            width: childrenRect.width

                            Text{
                                clip: true
                                id:iDelegate
                                text:modelData
                                font.family: "B Nazanin"
                                font.pointSize: 11
                                verticalAlignment: Text.AlignVCenter
                                padding: 5
                                Binding{
                                    target: iDelegate
                                    property: 'width'
                                    value: listView.headerItem.children[index].width -1
                                }
                            }
                            Rectangle{
                                height: baserect.height
                                width: 1
                                color: "silver"
                            }
                        }

                    }
                }

                Rectangle {
                    id:line
                    clip: true
                    color: "#808080"
                    width: parent.width
                    height: 1
                }

                MouseArea{
                    anchors.fill: parent
                    hoverEnabled: true
                    onEntered: {
                        //baserect.color = "gray"
                    }
                    onExited: {
                        //baserect.color = 'white'
                    }
                    onClicked: {
                        listView.currentIndex = index
                    }
                }
            }


        }
        focus: true
        highlight: Rectangle {
            z:1
            color: "#77B5D3E7";
            radius: 0 }
        ScrollIndicator.horizontal: ScrollIndicator { }
        ScrollIndicator.vertical: ScrollIndicator { }
    }
}

and and example of using :

UTable{
                width:500
                height:300
                onCurrentIndexChanged: {
                    console.log(currentIndex)
                }

                model: [["تست","تست2","تست3","تست4"],["خط 1","خط2","خط3","خط4"],["خط 1","خط2","خط3","خط4"]]
                headerModel : [
                        {
                            "name":"ستون 0.3",
                            "width":0.3
                        },{
                            "name":"ستون 0.2",
                            "width":0.2
                        },{
                            "name":"ستون 0.25",
                            "width":0.25
                        },{
                            "name":"ستون اخر",
                            "width":0.25
                        }
                    ]
            }

and here is our UIcon :

import QtQuick 2.0
Item{
    implicitWidth: 35
    implicitHeight: 35
    property alias size : icotext.font.pointSize
    property alias text : icotext.text
    property alias font : icotext.font.family
    property alias color : icotext.color
    Text {
        id:icotext
        anchors.centerIn: parent
        font.family: "fontawesome"
        text: "\uf110"
        font.pointSize: 12
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
    }
}

Update 2019-05-08 :

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls.Universal 2.12
Item {
    id:root
    implicitWidth: 500
    clip: true
    implicitHeight: 300
    property alias model :listView.model
    property alias currentIndex: listView.currentIndex
    property bool byColName:false
    property var headerModel : []
    ListView {
        id: listView
        anchors.fill: parent
        onCurrentIndexChanged: {
            root.currentIndexChanged()
        }
        onModelChanged: {
            console.log(model)
        }

        //contentWidth: headerItem.width
        flickableDirection: Flickable.HorizontalAndVerticalFlick
        header: Row{
            spacing: 0
            anchors.right: parent.right
            anchors.rightMargin: 0
            layoutDirection: Qt.RightToLeft
            function itemAt(index) {
                return repeater.itemAt(index)
            }
            Repeater{
                id:repeater
                model: headerModel
                Row{
                    layoutDirection: Qt.RightToLeft
                    width: modelData.width * listView.width
                    Label {
                        height: 40
                        clip: true
                        id:textArea
                        verticalAlignment: Text.AlignVCenter
                        text: root.byColName?modelData.title:modelData.name
                        width: parent.width -1
                        horizontalAlignment: Text.AlignRight
                        font.family: "B Nazanin"
                        font.bold: true
                        font.pointSize: 12
                        padding: 10
                        background: Rectangle { color: "white" }
                        UIcon{
                            text: "\uf0dc"
                            color: Universal.color(Universal.Cobalt)
                            anchors.left: parent.left
                            anchors.leftMargin: 0
                            anchors.verticalCenter: parent.verticalCenter
                        }

                        MouseArea{
                            clip: true
                            anchors.fill: parent
                            onClicked: {
                                //console.log(modelData.name)
                                //TODO:sort and show sorting arrow
                            }
                        }
                    }
                    Rectangle{
                        height: parent.height
                        width: 1
                        color: "silver"
                    }

                }


            }

        }


        delegate: Column {
            width: parent.width
            id: delegate
            anchors.right: parent.right
            anchors.rightMargin: 0
            Rectangle{
                width: parent.width
                implicitHeight: 35
                id:baserect
                z:1
                color: "white"
                clip: true

                Row {
                    anchors.fill: parent
                    spacing: 0
                    layoutDirection: Qt.RightToLeft
                    clip: true
                    Repeater {
                        id:_repeater
                        anchors.fill: parent
                        property var actualModel : modelData
                        model: getJsonCount(modelData)
                        onModelChanged: {
                            console.log(model)

                        }
                        function getJsonCount(obj){
                            var count = 0
                            for(var key in obj){
                                ++count;
                            }
                            return count;
                        }
                        clip: true
                        Row{
                            id:_row
                            layoutDirection: Qt.RightToLeft
                            width: childrenRect.width

                            Text{
                                clip: true
                                id:iDelegate
                                text:{
                                    if(root.byColName){
                                        var columnName = headerModel[index].name
                                        var data = _repeater.actualModel[columnName]
                                        return data;
                                    }
                                    else{
                                        return _repeater.actualModel[index];
                                    }
                                }


                                horizontalAlignment: Text.AlignRight
                                font.family: "B Nazanin"
                                font.pointSize: 11
                                verticalAlignment: Text.AlignVCenter
                                padding: 5
                                Binding{
                                    target: iDelegate
                                    property: 'width'
                                    value: listView.headerItem.children[index].width -1
                                }
                            }
                            Rectangle{
                                height: baserect.height
                                width: 1
                                color: "silver"
                            }
                        }

                    }
                }

                Rectangle {
                    id:line
                    clip: true
                    color: "#808080"
                    width: parent.width
                    height: 1
                }

                MouseArea{
                    anchors.fill: parent
                    hoverEnabled: true
                    onEntered: {
                        //baserect.color = "gray"
                    }
                    onExited: {
                        //baserect.color = 'white'
                    }
                    onClicked: {
                        listView.currentIndex = index
                    }
                }
            }


        }
        focus: true
        highlight: Rectangle {
            z:1
            color: "#77B5D3E7";
            radius: 0 }
        ScrollIndicator.horizontal: ScrollIndicator { }
        ScrollIndicator.vertical: ScrollIndicator { }
    }
}

and example :

 UTable{
                id:_table
                onCurrentIndexChanged: {
                    console.log(currentIndex)
                }
                byColName: true
                model: [{"name":"test","family":"test2","number":5,"status":"online"},{"name":"ali","family":"alavi","number":2,"status":"offline"}]
                headerModel : [
                        {
                            "title":"نام",
                            "name":"name",
                            "width":0.3
                        },{
                            "title":"خانوادگی",
                            "name":"family",
                            "width":0.2
                        },{
                            "title":"وضعیت",
                            "name":"status",
                            "width":0.25
                        },{
                            "title":"شماره",
                            "name":"number",
                            "width":0.25
                        }
                    ]
            }