How to set QML TableViewStyle to show Middle Ellipses (ElideMiddle)

Question

I'm creating a QML TableView and I want the text (in both the rows AND headers) to middle-ellipse whenever the text is too long to fit into its column. For example: This_is_really_long_text might display as This...text

I've got it successfully working without using a TableViewStyle, however I would like to use TableViewStyle to easily stylize multiple columns at once.

I've read the documentation for:

• TableView QML (Item Delegate)
• TableViewStyle QML Type
• Item Delegate QML Type
• Customizing QT Quick Controls (With Delegate)

I also tried making minor tweaks to some code on someone's previously asked question, simply swapping out the elide: Text.ElideRight for Text.ElideMiddle which also didn't work. It seems like changing the header color and height works, but not the elide.

The below code generates a table that does not show ellipses at all, though I expect middle-ellipses. If I remove the overrides, it will right-elide.

Image showing 2nd column cutting off 1st, but no ellipses

import QtQuick 2.9
import QtQuick.Controls 1.4 as QC1
import QtQuick.Controls.Styles 1.4
import QtQuick.Controls 2.2


ApplicationWindow {
    visible: true
    width: 400
    height: 400

    ListModel {
        id: myListModel
        ListElement {
            cell1Text: "This_is_some_really_long_text"
            cell2Text: "Shorter_text"
        }
    }

    QC1.TableView {
        id: tableView
        anchors.fill: parent
        model: myListModel

        QC1.TableViewColumn {
            role: "cell1Text"
            title: "Cell1Text"
        }

        QC1.TableViewColumn {
            role: "cell2Text"
            title: "Cell2Text"
        }

        style: TableViewStyle {

            Text {
                elide: Text.ElideMiddle
            }

            headerDelegate: Rectangle {
                height: 20
                color: "lightsteelblue"
                Text {
                    text: styleData.value
                    elide: Text.ElideMiddle
                }
            }

            rowDelegate: Rectangle {
                Text {
                    elide: Text.ElideMiddle
                }
            }

            itemDelegate: Rectangle {
                Text {
                    text: styleData.value
                    elide: Text.ElideMiddle
                }
            }
        }
    }
}

Answer 1

The elide is applied taking as reference the width of the item, but in this case the size of the item is given by the content and not by the header, the solution in this case is to establish the width of the text as the father, also is not necessary to modify the rowDelegate

style: TableViewStyle {
    headerDelegate: Rectangle {
        height: 20
        color: "lightsteelblue"
        Text {
            width: parent.width // <---
            text: styleData.value
            elide: Text.ElideMiddle
        }
    }

    itemDelegate: Rectangle {
        Text {
            width: parent.width // <---
            text: styleData.value
            elide: Text.ElideMiddle
        }
    }
}

Another solution to set the elide in the TableViewColumn so as not to override the itemDelegate:

QC1.TableView {
    id: tableView
    anchors.fill: parent
    model: myListModel


    QC1.TableViewColumn {
        role: "cell1Text"
        title: "Cell1Text"
        elideMode: Text.ElideMiddle
    }

    QC1.TableViewColumn {
        role: "cell2Text"
        title: "Cell2Text"
        elideMode: Text.ElideMiddle
    }

    style: TableViewStyle {
        headerDelegate: Rectangle {
            height: 20
            color: "lightsteelblue"
            Text {
                width: parent.width
                text: styleData.value
                elide: Text.ElideMiddle
            }
        }
    }
}