CODEWITHSUNDEEP
qtqml
Fakhr Ali
Fakhr Ali

Reputation: 128

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

So I want to create a table similar to the one in the picture. 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": "[email protected]",
                        "city": "new york",
                        "state": "new york",
                        "country": "USA"

                    },
                    {
                        "customer": "h",
                        "address": "down",
                        "mobile": "34556",
                        "email": "[email protected]",
                        "city": "new york",
                        "state": "new york",
                        "country": "USA"
                    },
                    {
                        "customer": "h",
                        "address": "down",
                        "mobile": "34556",
                        "email": "[email protected]",
                        "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?

Upvotes: 3

Views: 3072

Answers (1)

Tarod
Tarod

Reputation: 7170

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

Upvotes: 1

Related Questions