Details
-
Bug
-
Resolution: Unresolved
-
P2: Important
-
None
-
6.6.2
-
None
Description
I'm trying to use TableView with HorizontalHeaderView.
What is expected: both views should sync columns' width according to their data. I.e. column width = max(header_column_width, max_delegate_column_width).
For now one can only choose between these two values.
Example #1 (syncView: tableView):
ColumnLayout
{
anchors.fill: parent HorizontalHeaderView {
id: horizontalHeader
model: ["checked 00000", "amount 00000", "fruit type 00000", "fruit name 00000", "fruit price 00000"]
syncView: tableView
clip: true
Layout.fillWidth: true
} TableView {
id: tableView columnSpacing: 1
rowSpacing: 1
boundsBehavior: Flickable.StopAtBounds
clip: true syncDirection: Qt.Horizontal
//syncView: horizontalHeader Layout.fillHeight: true
Layout.fillWidth: true model: TableModel {
TableModelColumn { display: "checked" }
TableModelColumn { display: "amount" }
TableModelColumn { display: "fruitType" }
TableModelColumn { display: "fruitName" }
TableModelColumn { display: "fruitPrice" } rows: [
{
checked: false,
amount: 1,
fruitType: "Apple",
fruitName: "Granny Smith",
fruitPrice: 1.50
},
{
checked: true,
amount: 4,
fruitType: "Orange",
fruitName: "Navel",
fruitPrice: 2.50
},
{
checked: false,
amount: 1,
fruitType: "Banana",
fruitName: "Cavendish",
fruitPrice: 3.50
}
]
}
delegate: Label {
text: model.display
padding: 12
}
}
}
Result:
Example #2 (syncView: horizontalHeader):
ColumnLayout
{
anchors.fill: parent HorizontalHeaderView {
id: horizontalHeader
model: ["checked 00000", "amount 00000", "fruit type 00000", "fruit name 00000", "fruit price 00000"]
//syncView: tableView
clip: true
Layout.fillWidth: true
} TableView {
id: tableView columnSpacing: 1
rowSpacing: 1
boundsBehavior: Flickable.StopAtBounds
clip: true syncDirection: Qt.Horizontal
syncView: horizontalHeader Layout.fillHeight: true
Layout.fillWidth: true model: TableModel {
TableModelColumn { display: "checked" }
TableModelColumn { display: "amount" }
TableModelColumn { display: "fruitType" }
TableModelColumn { display: "fruitName" }
TableModelColumn { display: "fruitPrice" } rows: [
{
checked: false,
amount: 1,
fruitType: "Apple",
fruitName: "Granny Smith",
fruitPrice: 1.50
},
{
checked: true,
amount: 4,
fruitType: "Orange",
fruitName: "Navel",
fruitPrice: 2.50
},
{
checked: false,
amount: 1,
fruitType: "Banana",
fruitName: "Cavendish",
fruitPrice: 3.50
}
]
}
delegate: Label {
text: model.display
padding: 12
}
}
}
Example #3 (syncView: horizontalHeader + a model with bigger texts):
ColumnLayout
{
anchors.fill: parent HorizontalHeaderView {
id: horizontalHeader
model: ["checked", "amount", "fruit type", "fruit name", "fruit price"]
//syncView: tableView
clip: true
Layout.fillWidth: true
} TableView {
id: tableView columnSpacing: 1
rowSpacing: 1
boundsBehavior: Flickable.StopAtBounds
clip: true syncDirection: Qt.Horizontal
syncView: horizontalHeader Layout.fillHeight: true
Layout.fillWidth: true model: TableModel {
TableModelColumn { display: "checked" }
TableModelColumn { display: "amount" }
TableModelColumn { display: "fruitType" }
TableModelColumn { display: "fruitName" }
TableModelColumn { display: "fruitPrice" } rows: [
{
checked: false,
amount: 1,
fruitType: "Apple",
fruitName: "Granny Smith 00000",
fruitPrice: 1.50
},
{
checked: true,
amount: 4,
fruitType: "Orange",
fruitName: "Navel",
fruitPrice: 2.50
},
{
checked: false,
amount: 1,
fruitType: "Banana",
fruitName: "Cavendish",
fruitPrice: 3.50
}
]
}
delegate: Label {
text: model.display
padding: 12
}
}
}
So, there is no universal way to resize columns properly on different models data.
