Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

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




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



  • @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.



  • @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.


Log in to reply