Creating a table in qml, its customization and connection with database - qt

Question

So I want to create a table similar to the one in the picture.
So after searching I decided to use tableview my code is below.
import QtQuick 2.15
import QtQuick.Controls 2.15
import Qt.labs.qmlmodels 1.0
Item {
width: 1126
height: 800
Rectangle {
id: rectangle
color: "#ffffff"
anchors.fill: parent
anchors.rightMargin: 0
anchors.bottomMargin: 0
anchors.leftMargin: 0
anchors.topMargin: 0
TableView {
anchors.fill: parent
columnSpacing: 1
rowSpacing: 1
clip: true
model: TableModel {
TableModelColumn { display: "customer" }
TableModelColumn { display: "address" }
TableModelColumn { display: "mobile" }
TableModelColumn { display: "email" }
TableModelColumn { display: "city" }
TableModelColumn { display: "state" }
TableModelColumn { display: "country" }
rows: [
{
"customer": "h",
"address": "down",
"mobile": "34556",
"email": "ty#gmail.com",
"city": "new york",
"state": "new york",
"country": "USA"
},
{
"customer": "h",
"address": "down",
"mobile": "34556",
"email": "ty#gmail.com",
"city": "new york",
"state": "new york",
"country": "USA"
},
{
"customer": "h",
"address": "down",
"mobile": "34556",
"email": "ty#gmail.com",
"city": "new york",
"state": "new york",
"country": "USA"
}
]
}
delegate: Rectangle {
implicitHeight: 50
implicitWidth: 100
border.width: 1
Text {
text: display
anchors.centerIn: parent
}
}
}
}
}
How I can't see the column names?

Answer 1

The TableModel type it is intended to support very simple models without requiring the creation of a custom QAbstractTableModel subclass in C++.
If you need more control for your table without using C++, it's better to use another kind of model, like ListModel. Here you have an example:
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Controls 1.4
import Qt.labs.qmlmodels 1.0
Item {
width: 1126
height: 800
Rectangle {
id: rectangle
color: "#ffffff"
anchors.fill: parent
anchors.rightMargin: 0
anchors.bottomMargin: 0
anchors.leftMargin: 0
anchors.topMargin: 0
TableView {
anchors.fill: parent
clip: true
TableViewColumn {
role: "customer"
title: "Customer"
}
TableViewColumn {
role: "address"
title: "Address"
}
TableViewColumn {
role: "mobile"
title: "Mobile"
}
model: ListModel {
ListElement {
customer: "h1"
address: "down1"
mobile: "345561"
}
ListElement {
customer: "h2"
address: "down2"
mobile: "345562"
}
ListElement {
customer: "h3"
address: "down3"
mobile: "345563"
}
}
}
}
}