QML - Lesson 011. Data transmission from QML QSqlQueryModel in the TableView

QML, SQL, Qt, DataBase, QSqlQueryModel, TableView

To represent database tables in the development TableView using QML You can use a class inherited from QSqlQueryModel . To do this, in the inherited class to define a method that would establish the respective roles of the table columns to the corresponding columns in the TableView, defined in the QML , which also indicates the roles of each object TableViewColumn , that is, for each column. You will also need to override a method QVariant data(...) const , which returns the data for the table cells. In this case, the information will be returned in accordance with certain roles columns of the table.

The project structure to work with TableView

The project consists of the following files:

  • QmlSqlQueryModel.pro - the profile of the project;
  • database.h - header to create and initialize the test database;
  • database.cpp - file source code to create and initialize the test database;
  • model.h - header data model file;
  • model.cpp - file source data model;
  • main.cpp - the main source file;
  • main.qml - qml file TableView.


Be sure to connect the SQL module to the project in this file. Otherwise QSqlQueryModel library will not be found when compiling the project.


QT += qml quick widgets sql

SOURCES += main.cpp \
    database.cpp \

RESOURCES += qml.qrc

# Additional import path used to resolve QML modules in Qt Creator's code model

# Default rules for deployment.

    database.h \


Header wrapper class file to initialize the database connection, and its creation if the database does not exist. This helper class appeared in a number of earlier lessons. For example, when working QSqlTableModel or QSqlRelationalTableModel . So I will not focus on it, and only give the code. And I note that this class is created or opened (if already created) database which is placed at each opening four lines. And each row consists of four columns: date ( "date") , the time ( "time") , pseudo-random number ( "random") , and reports of a given number ( "message").

ATTENTION!!! - The database file is created in the folder C: / example, so the correct method or DataBase::connectToDataBase() example or create a folder on drive C.

#ifndef DATABASE_H
#define DATABASE_H

#include <QObject>
#include <QSql>
#include <QSqlQuery>
#include <QSqlError>
#include <QSqlDatabase>
#include <QFile>
#include <QDate>
#include <QDebug>

#define DATABASE_HOSTNAME   "ExampleDataBase"
#define DATABASE_NAME       "DataBase.db"

#define TABLE                   "TableExample"
#define TABLE_DATE              "date"
#define TABLE_TIME              "time"
#define TABLE_MESSAGE           "message"
#define TABLE_RANDOM            "random"

class DataBase : public QObject
    explicit DataBase(QObject *parent = 0);
    /* Methods to work directly with the class. 


#include "database.h"

DataBase::DataBase(QObject *parent) : QObject(parent)
    /* After that is done filling the database tables of 


And now the most interesting. Inheriting from class QSqlQueryModel and create your own model class that returns data in accordance with certain roles in the columns in the TableView Qml layer. That is, override the method to retrieve the data - this data() method, as well as roleNames() method that returns the role names under which data will be substituted in the TableView , I note that the names will be the same.

#ifndef MODEL_H
#define MODEL_H

#include <QObject>
#include <QSqlQueryModel>

class Model : public QSqlQueryModel
    // List all the roles that will be used in the TableView
    enum Roles {
        DateRole = Qt::UserRole + 1,    

    explicit Model(QObject *parent = 0);

    // Override the method that will return the data
    QVariant data(const QModelIndex & index, int role = Qt::DisplayRole) const;

    /* hashed table of roles for speakers. 
     * The method used in the wilds of the base class QAbstractItemModel, 
     * from which inherits the class QSqlQueryModel
     * */
    QHash<int, QByteArray> roleNames() const;


public slots:

#endif // MODEL_H


#include "model.h"

Model::Model(QObject *parent) :


// The method for obtaining data from the model
QVariant Model::data(const QModelIndex & index, int role) const {

    // Define the column number, address, so to speak, on the role of number
    int columnId = role - Qt::UserRole - 1;
    // Create the index using the ID column
    QModelIndex modelIndex = this->index(index.row(), columnId);

    /* And with the help of already data() method of the base class 
     * to take out the data table from the model
     * */
    return QSqlQueryModel::data(modelIndex, Qt::DisplayRole);

QHash<int, QByteArray> Model::roleNames() const {

    QHash<int, QByteArray> roles;
    roles[DateRole] = "date";
    roles[TimeRole] = "time";
    roles[RandomRole] = "random";
    roles[MessageRole] = "message";
    return roles;


And now, using the techniques of registration refer to C ++ object in QML layer of the lesson on the signals and slots in QML register a custom data model in QML as the layer properties that can be accessed by the name "myModel" from QML layer. Not forgetting, of course perform SQL-query to retrieve data.

#include <QApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>

#include <database.h>
#include <model.h>

int main(int argc, char *argv[])
    QApplication app(argc, argv);
    QQmlApplicationEngine engine;

    // Initialize database
    DataBase database;
    // We declare and initialize the data model representation
    Model *model = new Model();
    /* Since we inherited from QSqlQueryModel, the data sample, 
     * we need to perform SQL-query in which we select all the needed fields from the desired table to us
     * */
                   " FROM " TABLE);

    /* And it is already familiar from the lessons of the signals and slots in QML. 
     * We put the resulting model in QML context to be able to refer to the model name "myModel"
     * */
    engine.rootContext()->setContextProperty("myModel", model);


    return app.exec();


And the simplest example of all - is to install TableView a column that the roles, which will be replaced with the data, as well as to establish the model itself by the registered name "myModel".

import QtQuick 2.5
import QtQuick.Controls 1.4

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    TableView {
        anchors.fill: parent

        TableViewColumn {
            role: "date"    // These roles are roles names coincide with a C ++ model
            title: "Date"

        TableViewColumn {
            role: "time"    // These roles are roles names coincide with a C ++ model
            title: "Time"

        TableViewColumn {
            role: "random"  // These roles are roles names coincide with a C ++ model
            title: "Random"

        TableViewColumn {
            role: "message" // These roles are roles names coincide with a C ++ model
            title: "Message"

        // We set the model in the TableView
        model: myModel


As a result of the above actions you will receive an application in which the window is TableView data taken out of the database, as shown in the figure.


We recommend hosting TIMEWEB
We recommend hosting TIMEWEB
Stable hosting, on which the social network EVILEG is located. For projects on Django we recommend VDS hosting.
Support the author Donate


Only authorized users can post comments.
Please, Log in or Sign up
Looking for a Job?
25,000.00 руб. - 30,000.00 руб.
Разработчик Qt/C++
Barnaul, Altai Krai, Russia

For registered users on the site there is a minimum amount of advertising

Oct. 14, 2019, 2:59 p.m.

C++ - Тест 003. Условия и циклы

  • Result:78points,
  • Rating points2
Oct. 14, 2019, 4:09 a.m.

C++ - Test 001. The first program and data types

  • Result:80points,
  • Rating points4
Oct. 12, 2019, 5:24 p.m.
Arshak Martirosyan

C++ - Test 001. The first program and data types

  • Result:66points,
  • Rating points-1
Last comments
Oct. 14, 2019, 7:48 a.m.
Evgenij Legotskoj

Добрый день. Нет, если сами по себе координаты при ресайзе все подсчитываются правильно, то это уже проблема графической подсистемы в ОС и работы с X11, если вы конечно под Linux собирали проект…
Oct. 13, 2019, 9:17 a.m.

Здравствуйте. Сделал подобным образом ресайз и в Qt Widgets, и в QML. Везде получаю, что при изменении размера через левую или верхннюю границы проихсодит мерцание подобно как на этом виде…
Oct. 6, 2019, 1:44 p.m.
Evgenij Legotskoj

Может база не открылась в прошлый раз. Либо пересобрали проект. хз, если честно ))
Oct. 6, 2019, 11:27 a.m.

Добрый день Евгений. Спасибо за пример, все понятно. Попытался сделать по аналогии сохранение в базе MySQL заготовок отчетов excel, но MySQL ругается на нарушение в строке запроса. Я подозреваю,…
Sept. 30, 2019, 3:33 a.m.
Evgenij Legotskoj

Если честно то с авторизацией в мобильном приложении я не работал. Знаю, что для таких вещей используют батарейку Django Rest Framework, с помощью которого можно получить токена для самого сайта…
Now discuss on the forum
Oct. 14, 2019, 2:51 p.m.
Evgenij Legotskoj

Добрый день. Первое, что приходит на ум, то можно подружить это дело через веб сокеты. Со стороны Django - это использование батарейки django-channels, а со стороны это QtWebSockets. …
Oct. 11, 2019, 3:11 a.m.
Evgenij Legotskoj

Понятно. Мне нужен пример вашего кода с проблемой. Если сможете накидать вырезку из вашего проекта, которую можно будет скомпилировать и посмотреть, что там происходит, то попробую помочь. Но бы…
Oct. 10, 2019, 10:58 a.m.

Вот ответ на мой вопрос: https://doc.qt.io/qt-5/qtvirtualkeyboard-deployment-guide.html#creating-inputpanel The input panel must be a sibling element next to the application conta…
Oct. 9, 2019, 3:45 p.m.
Evgenij Legotskoj

Добрый день. Нет, я таким не сталкивался, но вот таким образом вы можете разбить тот тег, на ноды, и забрать текст в нормально порядке, а потом вам уже не составит труда, как я думаю, запи…
Oct. 9, 2019, 12:04 p.m.
Vadim Polshkov

Здравствуйте. Все получилось, только редирект сделал по другому redirect(price.file.url) Спасибо вам за помощь!
© EVILEG 2015-2019
Recommend hosting TIMEWEB