Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Call for Presentations - Qt World Summit

    Solved TableView with exapanding columns

    QML and Qt Quick
    qml tableview layout
    2
    5
    353
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • noone
      noone last edited by noone

      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

      1 Reply Last reply Reply Quote 0
      • noone
        noone last edited by

        adding onWidthChanged: forceLayout() with columnWidthProvider to TableView works

        1 Reply Last reply Reply Quote 1
        • fcarney
          fcarney last edited by

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

          C++ is a perfectly valid school of magic.

          noone 1 Reply Last reply Reply Quote 0
          • noone
            noone @fcarney last edited by

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

            1 Reply Last reply Reply Quote 0
            • fcarney
              fcarney last edited by

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

              C++ is a perfectly valid school of magic.

              1 Reply Last reply Reply Quote 0
              • noone
                noone last edited by

                adding onWidthChanged: forceLayout() with columnWidthProvider to TableView works

                1 Reply Last reply Reply Quote 1
                • First post
                  Last post