Unsolved TableView does not show scrollbars
-
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 } } } }
-
https://doc.qt.io/qt-5/qml-qtquick-tableview.html
Import Statement: import QtQuick 2.14
Since: Qt 5.12
Inherits: Flickablehttps://doc.qt.io/qt-5/qml-qtquick-controls2-scrollbar.html#details
-
@6thC same import statement is already there. This did not resolve the issue.
-
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.
-
@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.
-
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 }
-
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.
-
@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... -
@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.