How in TableView use DelegateChooser

Mihaill

Hi!
How I can use DelegateChooser in TableView ?
In TableView this work:

        delegate: Item {
            height: 20
            width: 40
            Rectangle {
                anchors.fill: parent
                color: "red"
                border.width: 1

                MLabel {
                    id: labelTableDelegateUserName
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.leftMargin: 5
                    clip: true
                    text: model.userName
                }
                MouseArea {
                    anchors.fill: parent
                    onClicked: console.log("--------------------", column)
                }
            }
        }

But my progremm don't work, when I write this:

        delegate: DelegateChooser {
            DelegateChoice {
                column: 0
                delegate: Item {
                    height: 20
                    width: 40
                }
            }

            DelegateChoice {
                column: 1
                delegate: Item {
                    height: 20
                    width: 40
                }
            }

            DelegateChoice {
                column: 2
                delegate: Item {
                    height: 20
                    width: 40
                }
            }

            DelegateChoice {
                column: 3
                delegate: Item {
                    height: 20
                    width: 40
                }
            }

            DelegateChoice {
                column: 4
                delegate: Item {
                    height: 20
                    width: 40
                }
            }
        }

Bandler

You can use ItemDelegates:

TableView {
        id: tableView

        anchors.fill: parent

        model: TableModel {
             TableModelColumn { display: "column 0" }
             TableModelColumn { display: "column 1" }

             rows: [
                 {
                     "column 0": "value 0",
                     "column 1": "value 1"
                 },
                 {
                     "column 0": "value 0",
                     "column 1": "value 1"
                 }
             ]
         }

        delegate: DelegateChooser {

            DelegateChoice {
                column: 0;

                ItemDelegate {
                    contentItem: Label {
                        text: "delegate column 0: " + model.index
                    }
                }
            }

            DelegateChoice {
                column: 1;

                ItemDelegate {
                    contentItem: Label {
                        text: "delegate column 1: " + model.index
                    }
                }
            }
        }
    }

ankou29666

first thing that caught my attention is that as delegate you have a simple empty Item as delegate which for sure won't work. But reading again your first snippet makes me figure out that you (over)simplified it for the purpose of the post.

second : the DelegateChoice has no delegate property, you should write something like :

delegate: DelegateChooser // delegate property of the TableView element
{
    DelegateChoice
    {
        column: 0
        Rectangle // use directly, not as a delegate property
        {
             height: 20
             width: 40
             color: "red"
        }
    }
}

Mihaill

@ankou29666 No, this have property delegate : https://doc.qt.io/qt-6/qml-qtqml-models-delegatechoice.html
And you code too broke my programm

Mihaill

It's work, but it's don't nice. Maybe somebody know how possible use DelegateChooser

        Component {
            id: cellColumn0
            Rectangle {
                anchors.fill: parent
                color: "red"
                border.width: 1

                MLabel {
                    id: labelTableDelegateUserName
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.leftMargin: 5
                    clip: true
                    text: m_model.userName
                }
            }
        }

        Component {
            id: cellColumn1
            Rectangle {
                anchors.fill: parent
                color: "green"
                border.width: 1

                MLabel {
                    id: labelTableDelegateUserName
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.leftMargin: 5
                    clip: true
                    text: m_model.userName
                }
            }
        }

        delegate: Loader {
            id: delegateLoader
            sourceComponent: column === 0 ? cellColumn0 : cellColumn1
            readonly property var m_model: model
            readonly property int m_row: row
            readonly property int m_column: column
        }

Bandler

You can use ItemDelegates:

TableView {
        id: tableView

        anchors.fill: parent

        model: TableModel {
             TableModelColumn { display: "column 0" }
             TableModelColumn { display: "column 1" }

             rows: [
                 {
                     "column 0": "value 0",
                     "column 1": "value 1"
                 },
                 {
                     "column 0": "value 0",
                     "column 1": "value 1"
                 }
             ]
         }

        delegate: DelegateChooser {

            DelegateChoice {
                column: 0;

                ItemDelegate {
                    contentItem: Label {
                        text: "delegate column 0: " + model.index
                    }
                }
            }

            DelegateChoice {
                column: 1;

                ItemDelegate {
                    contentItem: Label {
                        text: "delegate column 1: " + model.index
                    }
                }
            }
        }
    }

Mihaill

@Bandler It's too broke my code

Mihaill

Sorry, it work, problen in my model