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

TableView with exapanding columns



  • Hi, How can I have TableView with its columns expanding to available space ? if table have 2 columns then those 2 columns should expand to fill avaible width. here is my code:-

    import QtQuick 2.15
    import QtQuick.Layouts 1.15
    import QtQuick.Controls 2.15 as QQC2
    import org.kde.kirigami 2.4 as Kirigami
    
    
    Kirigami.Page {
        id: examsRoot
        title: "Exams"
        //some kde specific stuff 
        actions {
            contextualActions: [
                Kirigami.Action {
                    text: "Create Exam"
                    iconName: "add"
                    tooltip: { text : "Create New Exam" }
                }
            ]
        }
    
        TableView {
            model: ExamsModel
            anchors.fill: parent
            delegate: QQC2.Frame {
                width: examsRoot.width/3 // I have 3 columns so width should be divided equally to all columns, no?
                QQC2.Label {
                    text: display
                    anchors.centerIn: parent
                }
            }
    
        }
    }
    
    #pragma once
    
    #include <QAbstractTableModel>
    #include <QString>
    #include <map>
    
    namespace Models {
    
    class Exams : public QAbstractTableModel {
    
    private:
        struct DS {
            QString title;
            unsigned int marks;
            int state;
            std::vector<int>* questions = nullptr;
        };
    
        //id and exams
        std::map<int, DS> exams;
    
    public:
        Exams();
    
        // QAbstractItemModel interface
        int rowCount(const QModelIndex& parent) const override;
        int columnCount(const QModelIndex& parent) const override;
        QVariant data(const QModelIndex& index, int role) const override;
    
        // QAbstractItemModel interface
    public:
        QHash<int, QByteArray> roleNames() const override;
    };
    
    } //end namespace Models
    
    #include "exams.hpp"
    
    namespace Models {
    
    Exams::Exams()
    {
        for (int i = 0; i < 200; i++) { // fill random for now
            DS exam {
                "Exam" + QString::number(i),
                0,
                (i * 3) / 2,
                nullptr
            };
    
            exams[i] = exam;
        }
    }
    
    int Exams::rowCount(const QModelIndex& parent) const
    {
        return exams.size();
    }
    
    int Exams::columnCount(const QModelIndex& parent) const
    {
        return 3;
    }
    
    QVariant Exams::data(const QModelIndex& index, int role) const
    {
        if (role == Qt::DisplayRole) {
            if (index.column() == 0)
                return exams.at(index.row()).title;
            else if (index.column() == 1)
                return exams.at(index.row()).marks;
            else if (index.column() == 2)
                return exams.at(index.row()).state;
        }
        return QVariant();
    }
    
    QHash<int, QByteArray> Exams::roleNames() const
    {
        return { { Qt::DisplayRole, "display" } };
    }
    
    } // end namepsace Models
    
    Models::Exams exams;
    qmlAppEngine.rootContext()->setContextProperty("ExamsModel", &exams);
    

    This gives following result:-

    alt text

    And when I try to resize the window, everything gets messed up

    alt text

    EDIT:-

    I also tried using

    columnWidthProvider: function (_) { return examsRoot.width/3
    

    But it gives somewhat same messed up output as 2nd screenshot.
    alt text



  • adding onWidthChanged: forceLayout() with columnWidthProvider to TableView works



  • Take a look at columnWithProvider. It should help you determine the width of your columns better.



  • @fcarney pls take a look at last screenshot in my first post. using columnWidthProvider messes up first two columns



  • You need to return a list of column widths. Sorry I didn't see that before.



  • adding onWidthChanged: forceLayout() with columnWidthProvider to TableView works