@Laito Unfortunately I almost forgot about the old quick controls. Here is an idea of how you could do it with the new controls.
Note, I added a wrapper for spacing around the table, to show there is no overflowing:
import QtQuick.Window 2.15
import QtQuick 2.15
import QtQuick.Controls 2.15
import Qt.labs.qmlmodels 1.0
ApplicationWindow {
title: qsTr("TableView example")
id: root
width: 500
height: 400
visible: true
Item {
id: wrapper
anchors.fill: parent
anchors.margins: 20
HorizontalHeaderView {
id: header
z: 1
interactive: false
syncView: tableView
anchors.top: parent.top
implicitHeight: 50
model: ["Number", "Elevation Max", "Elevation Min", "Length", "Depth"]
delegate: Rectangle {
implicitWidth: 100
implicitHeight: 50
color: "#0A1B2D"
Text {
anchors.fill: parent
anchors.margins: 5
wrapMode: Text.Wrap
text: modelData
color: "#ffffff"
font.pixelSize: 15
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
}
}
TableView {
id: tableView
anchors.fill: parent
topMargin: header.implicitHeight
columnSpacing: 1
rowSpacing: 1
clip: true
flickableDirection: Flickable.VerticalFlick
boundsBehavior: Flickable.StopAtBounds
property int selectedRow: -1
model: TableModel {
TableModelColumn {
display: "number"
}
TableModelColumn {
display: "elevation_Max"
}
TableModelColumn {
display: "elevation_Min"
}
TableModelColumn {
display: "length"
}
TableModelColumn {
display: "depth"
}
rows: [{
"number": 1,
"elevation_Max": 90000,
"elevation_Min": 50,
"length": "52-73\n122-163\n200-264\n280-317",
"depth": "8636-8900"
}, {
"number": 2,
"elevation_Max": 8000,
"elevation_Min": 21,
"length": "0-57\n119-166\n206-264\n119-166\n206-264\n119-166\n206-264\n119-166\n206-264",
"depth": "12700-13462"
}, {
"number": 3,
"elevation_Max": 8000,
"elevation_Min": 21,
"length": "0-57",
"depth": "12700-13462"
}, {
"number": 3,
"elevation_Max": 8000,
"elevation_Min": 21,
"length": "0-57",
"depth": "12700-13462"
}, {
"number": 3,
"elevation_Max": 8000,
"elevation_Min": 21,
"length": "0-57",
"depth": "12700-13462"
}, {
"number": 3,
"elevation_Max": 8000,
"elevation_Min": 21,
"length": "0-57",
"depth": "12700-13462"
}, {
"number": 3,
"elevation_Max": 8000,
"elevation_Min": 21,
"length": "0-57",
"depth": "12700-13462"
}, {
"number": 3,
"elevation_Max": 8000,
"elevation_Min": 21,
"length": "0-57",
"depth": "12700-13462"
}, {
"number": 3,
"elevation_Max": 8000,
"elevation_Min": 21,
"length": "0-57",
"depth": "12700-13462"
}, {
"number": 3,
"elevation_Max": 8000,
"elevation_Min": 21,
"length": "0-57",
"depth": "12700-13462"
}, {
"number": 3,
"elevation_Max": 8000,
"elevation_Min": 21,
"length": "0-57",
"depth": "12700-13462"
}, {
"number": 3,
"elevation_Max": 8000,
"elevation_Min": 21,
"length": "0-57",
"depth": "12700-13462"
}]
}
delegate: Rectangle {
implicitWidth: 90
implicitHeight: content.implicitHeight
color: tableView.selectedRow === row ? "#052641" : "#394755"
MouseArea {
anchors.fill: parent
onClicked: tableView.selectedRow = row
}
Text {
id: content
width: parent.width
padding: 10
text: display
color: "#ffffff"
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
wrapMode: Text.Wrap
}
}
}
}
}