TableViewColumn: resizing header width doesn't adjust column contents with "..."

  • Hey all,

    I'm using the following TableView Example:

    ListModel {
            id: libraryModel
            ListElement {
                title: "A Masterpiece"
                author: "Gabriel"
            ListElement {
                title: "Brilliance"
                author: "Jens"
            ListElement {
                title: "Outstanding"
                author: "Frederik"
        C.TableView {
            id: asdf
            width: parent.width
            anchors.topMargin: 5;
            alternatingRowColors: false
            horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff
            verticalScrollBarPolicy: Qt.ScrollBarAlwaysOff
            frameVisible: false;
            rowDelegate: rowDelegate
            C.TableViewColumn {
                role: "title"
                title: "Title"
                width: 100
                delegate: columnDelegate
            C.TableViewColumn {
                role: "author"
                title: "Author"
                width: 200
            model: libraryModel

    So when resizing the author column so that the contents wouldn't fit, the contents automatically append a "...". However, when I apply a delegate such as to the Title column, it loses that functionality. Any way of modifying the delegate to have it behave it so that when resizing the column, it would append a "..." if content doesn't fit?

    Here is my delegate code:

    Component {
            id: columnDelegate
            TextEdit {
                color: styleData.selected ? "white" : "black"
                font.bold: false
                font.weight: Font.ExtraLight
                font.pointSize: 10
                leftPadding: 10
                readOnly: true
                selectByMouse: false
                text: styleData.value
                verticalAlignment: TextEdit.AlignBottom
                persistentSelection: false
                onActiveFocusChanged: {
                    if (activeFocus === false) {
                    } else {
                MouseArea {
                    anchors.fill: parent
                    onClicked: {

    Here's a screenshot of how it looks with the two columns.

Log in to reply