QML TableView with dynamic width columns

Question

I have created a TableView in PySide2 Qt 5.13.0. I want a TableView to fill the width of the parent item, but it will not resize the columns unless I drag the table. From the start of the program, I want the columns to be wider.

main.py

import sys

from PySide2.QtCore import QUrl
from PySide2.QtQml import QQmlApplicationEngine, qmlRegisterType
from PySide2.QtWidgets import QApplication

from table_model import TableModel

import qml_rc  # noqa: F401


if __name__ == "__main__":
    app = QApplication(sys.argv)

    engine = QQmlApplicationEngine()

    qmlRegisterType(TableModel, "TableModel", 1, 0, "TableModel")

    engine.load(QUrl("qrc:/main.qml"))

    if not engine.rootObjects():
        sys.exit(-1)

    sys.exit(app.exec_())

main.qml

import QtQuick 2.13
import QtQuick.Controls 2.13

import TableModel 1.0

ApplicationWindow {
    visible: true

    Component.onCompleted: {
        showMaximized()
    }

    TableView {
        id: tableView
        clip: true
        anchors.fill: parent
        model: TableModel {}
        topMargin: columnsHeader.implicitHeight
        columnWidthProvider: function () { return tableView.width / tableView.model.columnCount(); }

        delegate: Rectangle {
            implicitWidth: tableView.columnWidthProvider()
            implicitHeight: 40

            Text {
                text: display
            }
        }

        Row {
            id: columnsHeader
            y: tableView.contentY
            z: 2

            Repeater {
                model: tableView.columns > 0 ? tableView.columns : 1

                Rectangle {
                    width: tableView.columnWidthProvider()
                    height: 60
                    clip: true

                    Label {
                        id: headerText
                        width: parent.width
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                        text: tableView.model.headerData(modelData, Qt.Horizontal)
                        elide: Text.ElideRight
                        clip: true
                    }
                }
            }
        }
    }
}

table_model.py

from typing import Any, Optional

from PySide2.QtCore import QAbstractTableModel, QModelIndex, QObject, Qt

from table import Table


class TableModel(QAbstractTableModel):
    def __init__(self, parent: QObject = None) -> None:
        super().__init__(parent)
        self._model_data = Table(
            ["This", "Is", "A", "Test", "Of", "Headers"],
            [
                ["A", 1, 2, "B", "C", "D"],
                ["E", 3, 4, "F", "G", "H"],
                ["I", 5, 6, "J", "K", "L"],
                ["M", 7, 8, "N", "O", "P"],
                ["A", 1, 2, "B", "C", "D"],
                ["E", 3, 4, "F", "G", "H"],
                ["I", 5, 6, "J", "K", "L"],
                ["M", 7, 8, "N", "O", "P"],
                ["A", 1, 2, "B", "C", "D"],
                ["E", 3, 4, "F", "G", "H"],
                ["I", 5, 6, "J", "K", "L"],
                ["M", 7, 8, "N", "O", "P"],
                ["A", 1, 2, "B", "C", "D"],
                ["E", 3, 4, "F", "G", "H"],
                ["I", 5, 6, "J", "K", "L"],
                ["M", 7, 8, "N", "O", "P"],
                ["A", 1, 2, "B", "C", "D"],
                ["E", 3, 4, "F", "G", "H"],
                ["I", 5, 6, "J", "K", "L"],
                ["M", 7, 8, "N", "O", "P"],
                ["A", 1, 2, "B", "C", "D"],
                ["E", 3, 4, "F", "G", "H"],
                ["I", 5, 6, "J", "K", "L"],
                ["M", 7, 8, "N", "O", "P"],
                ["A", 1, 2, "B", "C", "D"],
                ["E", 3, 4, "F", "G", "H"],
                ["I", 5, 6, "J", "K", "L"],
                ["M", 7, 8, "N", "O", "P"],
                ["A", 1, 2, "B", "C", "D"],
                ["E", 3, 4, "F", "G", "H"],
                ["I", 5, 6, "J", "K", "L"],
                ["M", 7, 8, "N", "O", "P"],
                ["A", 1, 2, "B", "C", "D"],
                ["E", 3, 4, "F", "G", "H"],
                ["I", 5, 6, "J", "K", "L"],
                ["M", 7, 8, "N", "O", "P"],
            ])

    def rowCount(self, parent=QModelIndex()) -> int:
        return len(self._model_data.rows)

    def columnCount(self, parent=QModelIndex()) -> int:
        return len(self._model_data.headers)

    def data(self, index: QModelIndex, role=Qt.DisplayRole) -> Optional[Any]:
        if role != Qt.DisplayRole:
            return None

        if not self.checkIndex(index, QAbstractTableModel.CheckIndexOption.IndexIsValid):
            return None

        return self._model_data.rows[index.row()][index.column()]

    def headerData(self, section: int, orientation, role) -> Optional[str]:
        if role != Qt.DisplayRole:
            return None

        if section < 0 or section >= len(self._model_data.headers):
            return None

        return self._model_data.headers[section]

    def reset_with_data(self, model_data: Table) -> None:
        self.beginResetModel()
        self._model_data = model_data
        self.endResetModel()

table.py

from dataclasses import dataclass
from typing import Any, List


@dataclass
class Table:
    headers: List[str]
    rows: List[List[Any]]

qml.qrc

<RCC>
    <qresource prefix="/">
        <file>main.qml</file>
    </qresource>
</RCC>

Run:

pipenv run pyside2-rcc -o qml_rc.py qml.qrc
pipenv run python main.py

Answer 1

As the docs points out:

Row heights and column widths

When a new column is flicked into view, TableView will determine its width by calling the columnWidthProvider function. TableView itself will never store row height or column width, as it's designed to support large models containing any number of rows and columns. Instead, it will ask the application whenever it needs to know.

TableView uses the largest implicitWidth among the items as the column width, unless the columnWidthProvider property is explicitly set. Once the column width is found, all other items in the same column are resized to this width, even if new items that are flicked in later have larger implicitWidth. Setting an explicit width on an item is ignored and overwritten.

Note: The calculated width of a column is discarded when it is flicked out of the viewport, and is recalculated if the column is flicked back in. The calculation is always based on the items that are visible when the column is flicked in. This means that it can end up different each time, depending on which row you're at when the column enters. You should therefore have the same implicitWidth for all items in a column, or set columnWidthProvider. The same logic applies for the row height calculation.

If you change the values that a rowHeightProvider or a columnWidthProvider return for rows and columns inside the viewport, you must call forceLayout. This informs TableView that it needs to use the provider functions again to recalculate and update the layout.

Since Qt 5.13, if you want to hide a specific column, you can return 0 from the columnWidthProvider for that column. Likewise, you can return 0 from the rowHeightProvider to hide a row. If you return a negative number, TableView will fall back to calculate the size based on the delegate items.

Note: The size of a row or column should be a whole number to avoid sub-pixel alignment of items.

The following example shows how to set a simple columnWidthProvider together with a timer that modifies the values the function returns. When the array is modified, forceLayout is called to let the changes take effect:

TableView {
    id: tableView

    property var columnWidths: [100, 50, 80, 150]
    columnWidthProvider: function (column) { return columnWidths[column] }

    Timer {
        running: true
        interval: 2000
        onTriggered: {
            tableView.columnWidths[2] = 150
            tableView.forceLayout();
        }
    }
}

^{(emphasis mine)}

So in this case when the width of the TableView changes you should call forceLayout(). In my case (Qt 5.13.1, PySide2 5.13.1, Linux) I also had to set a width and height to the ApplicationWindow:

import QtQuick 2.13
import QtQuick.Controls 2.13

import TableModel 1.0

ApplicationWindow {
    visible: true

    Component.onCompleted: {
        showMaximized()
    }

    width: 640
    height: 480


    TableView {
        id: tableView
        clip: true
        anchors.fill: parent
        model: TableModel{}
        topMargin: columnsHeader.implicitHeight

        columnWidthProvider: function (column) { 
            return tableView.model ? tableView.width/tableView.model.columnCount() : 0
        }

        onWidthChanged: tableView.forceLayout()

        delegate: Rectangle {
            implicitWidth: tableView.columnWidthProvider(column)
            implicitHeight: 40
            Text {
                text: display
            }
        }

        Row {
            id: columnsHeader
            y: tableView.contentY
            z: 2
            Repeater {
                model: tableView.columns > 0 ? tableView.columns : 1
                Rectangle {
                    width: tableView.columnWidthProvider(modelData)
                    height: 60
                    clip: true

                    Label{
                        id: headerText
                        width: parent.width
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                        text: tableView.model ? tableView.model.headerData(modelData, Qt.Horizontal): 0
                        elide: Text.ElideRight
                        clip: true
                    }
                }
            }
        }
    }
}