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

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
}
}
}
}