TableView does not show scrollbars

adqt

How can I get scrollbars for my TableView? I can scroll using 'flick' action but I need scrollbar so that I can immediately jump to the end (or any point) of my data.

Here is my TableView,

    TableView{
        id: tableViewOutput
        anchors.fill: parent
        columnSpacing: 1
        rowSpacing: 1
        clip: true

        model: DatagridTableModel {}
        delegate: Rectangle {
            border.color: "black"
            implicitHeight: datacell.implicitHeight+10
            implicitWidth: datacell.implicitWidth+30
            border.width: 1
            Rectangle {
                anchors.fill: parent
                anchors.bottomMargin: 1
                anchors.rightMargin: 1
                color: heading ? '#757575':"#EEEEEE"
                Text {
                    id: datacell
                    text: tabledata
                    wrapMode: Text.Normal
                    anchors.fill: parent
                    anchors.margins: 10
                    color: heading ? 'white':"black"
                    font.pixelSize: 10
                    verticalAlignment: Text.AlignVCenter
                }
            }
        }
    }

6thC

https://doc.qt.io/qt-5/qml-qtquick-tableview.html

Import Statement: import QtQuick 2.14
Since: Qt 5.12
Inherits: Flickable

https://doc.qt.io/qt-5/qml-qtquick-controls2-scrollbar.html#details

adqt

@6thC same import statement is already there. This did not resolve the issue.

Markkyboy

@adqt

A more complete paste of your code would be helpful (for newcomers like me) to those wanting to help you solve your problem. For me, it means I learn as I try to help others, thanks.

adqt

@Markkyboy Here is the model that is referred in the TableView

#include "datatablemodel.h"

DataTableModel::DataTableModel()
{
    int count =60;
    for (int i = 0; i < count; ++i) {
            table.append({"Bob", "US", "abc@xyz.com"});
            table.append({"Mary", "UK", "xyz@asd.com"});
            table.append({"Chan", "Japan", "rty@kkj.com"});
    }

}

int DataTableModel::rowCount(const QModelIndex &parent) const
{
    Q_UNUSED(parent);
    return table.size();
}

int DataTableModel::columnCount(const QModelIndex &parent) const
{
    Q_UNUSED(parent);
    return table.at(0).size();
}

QVariant DataTableModel::data(const QModelIndex &index, int role) const
{
    switch (role) {
    case TableDataRole: {
        return table.at(index.row()).at(index.column());
    }
    case HeadingRole: {
        return index.row() == 0;
    }
    default: break;
    }
    return QVariant("Q");
}

bool DataTableModel::setData(const QModelIndex &index, const QVariant &value, int role)
{

}

QVariant DataTableModel::headerData(int section, Qt::Orientation orientation, int role) const
{
    if (role != Qt::DisplayRole) {
        return QVariant();
    }
    if (orientation == Qt::Horizontal) {
        switch (section) {
        case 0 :
            return QString("Name");
        case 1 :
            return QString("Country");
        case 2:
            return QString("Email");
        }
    }
}

bool DataTableModel::insertRows(int row, int count, const QModelIndex &parent)
{
    beginInsertRows(QModelIndex(), row, row+count-1);
    for (int i = 0; i < count; ++i) {
        table.insert(row,{"John", "US", "abc@xyz.com"});
    }
    endInsertRows();
    return  true;
}

bool DataTableModel::removeRows(int row, int count, const QModelIndex &parent)
{
    beginRemoveRows(QModelIndex(), row, row+count-1);

    for (int i = 0; i < count; ++i) {
        table.removeAt(row);
    }
    endRemoveRows();
    return true;
}

Qt::ItemFlags DataTableModel::flags(const QModelIndex &index) const
{
    if (!index.isValid()) {
        return QAbstractItemModel::flags(index);
    }
    return QAbstractItemModel::flags(index) | Qt::ItemIsEditable;
}

QHash<int, QByteArray> DataTableModel::roleNames() const
{
    QHash<int, QByteArray> roles;
    roles[TableDataRole] = "tabledata";
    roles[HeadingRole] = "heading";
    return roles;
}

Also, add a line in main.cpp

qmlRegisterType<DataTableModel>("DataTableModel",0,1, "DatagridTableModel");

Put my TableView in main.qml. Create header file for model code pasted above and set references. You should be good.

adqt

I am not sure if this is the best way to solve this issue. All I did was pasted following 2 lines (from Qt website) just before the TableView closing curly brackets and I can now see scrollbars. If anyone has a better solution with good explanation, please post your solution.

            ScrollBar.horizontal: ScrollBar { id: hbar; active: vbar.active }
            ScrollBar.vertical: ScrollBar { id: vbar; active: hbar.active }

Markkyboy

Cool, thanks. As for a 'better solution', that is highly subjective, if it works, it works. If adding only those 2 lines you've shown 'fixes' the problem, then personally, I would call it 'solved' and it seems like a good solution to me, but then I am still learning about QT/QML, albeit most of my experience is through using SailfishOS which is largely QML based, mixed with java and some proprietary stuff.

6thC

@adqt
That's what I said: https://doc.qt.io/qt-5/qml-qtquick-controls2-scrollbar.html#details
You put it onto a flickable, which tableview is...

adqt

@6thC I didn't have to put it inside a flickable. It worked as soon as I added the scrollbars. TableView is a by default flickable. May be I am not getting what you wanted to say.