QML TableView not showing

[Yihua Liu]

I refer to the documentation https://doc.qt.io/qt-6/qml-qtquick-controls-verticalheaderview.html and try to show a table view in QML:

import QtQuick
import QtQuick.Controls

Dialog {
    id: devTableDialog
    width: 800
    height: 600
    anchors.centerIn: parent
    modal: true
    standardButtons: Dialog.Ok

    contentItem: Item {
        implicitWidth: parent.width
        implicitHeight: parent.height

        VerticalHeaderView {
            id: verticalHeader
            anchors.top: devTView.top
            anchors.left: parent.left
            syncView: devTView
            clip: true
        }

        TableView {
            id: devTView
            anchors.left: verticalHeader.right
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            clip: true

            columnSpacing: 1
            rowSpacing: 1

            model: device

            delegate: Rectangle {
                implicitWidth: 100
                implicitHeight: 50
                color: palette.base  // border.color: "black"

                Text {
                    text: model.display
                    anchors.centerIn: parent
                }
            }
        }
    }
}

When I open the dialog, it shows nothing; however, if I write

import QtQuick
import QtQuick.Controls

Dialog {
    id: devTableDialog
    width: 800
    height: 600
    anchors.centerIn: parent
    modal: true
    standardButtons: Dialog.Ok

    contentItem: TableView {
            id: devTView
            anchors.left: verticalHeader.right
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            clip: true

            columnSpacing: 1
            rowSpacing: 1

            model: device

            delegate: Rectangle {
                implicitWidth: 100
                implicitHeight: 50
                color: palette.base  // border.color: "black"

                Text {
                    text: model.display
                    anchors.centerIn: parent
                }
            }
    }
}

Then, the dialog can properly show the table view. I wonder how to show the table view together with the VerticalHeaderView in the contentItem? Thanks.

[Yihua Liu]

Problem fixed by setting anchors

[Yihua Liu]

The second code snippet above has problem. The correct code snippet is

import QtQuick
import QtQuick.Controls

Dialog {
    id: devTableDialog
    width: 800
    height: 600
    anchors.centerIn: parent
    modal: true
    standardButtons: Dialog.Ok

    contentItem: TableView {
            id: devTView
            implicitWidth: parent.width
            implicitHeight: parent.height
            clip: true

            columnSpacing: 1
            rowSpacing: 1

            model: device

            delegate: Rectangle {
                implicitWidth: 100
                implicitHeight: 50
                color: palette.base

                Text {
                    text: model.display
                    anchors.centerIn: parent
                }
            }
    }
}

[Yihua Liu]

Problem fixed by setting anchors