1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
|
// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
//! [file]
import QtQuick
import QtQuick.Controls.Basic
import QtQuick.Layouts
import Qt.labs.qmlmodels
TableView {
width: 540
height: 40 * rows
columnWidthProvider: function(column) {
switch (column) {
case 0: return 220
case 1: return 260
case 2: return 60
default: return -1
}
}
//! [delegate]
delegate: TableViewDelegate {
id: tableCell
checked: column === 0 ? checkBox.checked : tableView.itemAtIndex(tableView.index(row, 0)).checked
selected: checked
//! [background]
background: Item {
Rectangle {
anchors.fill: parent
anchors.margins: tableCell.current ? 3 : 1
color: tableCell.selected ? "blue" : "white"
}
Rectangle {
anchors.fill: parent
color: "transparent"
border.color: "darkblue"
border.width: tableCell.current ? 2 : 0
}
}
//! [background]
//! [contentItem]
contentItem: Item {
implicitHeight: 40
visible: !tableCell.editing
RowLayout {
anchors.fill: parent
CheckBox {
id: checkBox
implicitWidth: height
Layout.fillHeight: true
checked: false
visible: tableCell.column === 0
}
Text {
Layout.leftMargin: 4
Layout.fillWidth: true
Layout.fillHeight: true
verticalAlignment: Text.AlignVCenter
color: tableCell.selected ? "white" : "black"
text: tableCell.model.display
}
}
}
//! [contentItem]
//! [editDelegate]
TableView.editDelegate: FocusScope {
width: parent.width
height: parent.height
TableView.onCommit: {
let qaim = tableCell.tableView.model
if (!qaim)
return
const index = qaim.index(tableCell.row, tableCell.column)
// instead of the edit role, any custom role supported by the model can be checked
// e.g. if (!tableCell.checked || !tableCell.model.customRole)
if (!tableCell.checked || !tableCell.model.edit)
return
// instead of the edit role, any custom role supported by the model can be set
// e.g. tableCell.model.customRole = textField.text
tableCell.model.edit = textField.text
tableCell.model.display = textField.text
}
Component.onCompleted: textField.selectAll()
TextField {
id: textField
anchors.fill: parent
text: tableCell.model.edit ?? tableCell.model.display ?? ""
focus: true
}
}
//! [editDelegate]
}
//! [delegate]
model: TableModel {
TableModelColumn { display: "name" }
TableModelColumn { display: "address" }
TableModelColumn { display: "quantity" }
rows: [
{
name: "Kristian Quan",
address: "123 Company Place, Big City",
quantity: 4,
},
{
name: "Matthew Rand",
address: "The Orchard, Little Village",
quantity: 2,
},
{
name: "Eirik Asaki",
address: "497 Park Skyway, Future City",
quantity: 29,
},
{
name: "Jarek Hanssen",
address: "1023 RivieraDrive, Southern Precinct",
quantity: 45,
},
{
name: "Charlos Hartmann",
address: "The Manor House, Country Estate",
quantity: 1,
},
{
name: "Bea King",
address: "Floor 201, Sun Tower, Central City",
quantity: 32,
},
]
}
selectionModel: ItemSelectionModel { }
}
//! [file]
|
