QtQuick 2.12 (Qt5.12) TableView issues

[Anat]

Hi, I'm trying to use the new QtQuick TableView for displaying a table of log messages.
I have a model that inherits QAbstractTableModel and the data is displayed OK.
What I can't do is:

1. Make the columns resizable, so user can change them during runtime.
2. AutoScroll - when new rows are added to the model\table, I always want to see the last ones.
3. Add columns headers. I did it with a simple rectangle above each column but I feel like there must be a nicer way...

I couldn't find any documentation or examples that handle the above...

Here is (pretty simple...) my code:

TableView {
	id:                                        newTableId
	model:                                     logControlId.loggerModel
	anchors.top:                               parent.top
	anchors.topMargin:                         30 // For headers
	anchors.fill:                              parent
	Layout.maximumHeight:                      parent.height

	rowSpacing: 5
	columnSpacing: 5

	ScrollBar.horizontal: ScrollBar {}
	ScrollBar.vertical: ScrollBar {}

	rowHeightProvider: function (row) { return 25 }

	property var columnWidths: [120, 130, 160, 160, 1000]
	columnWidthProvider: function (column) { return columnWidths[column] }

	delegate: Rectangle {

		id:                                     itemId
		implicitHeight:                         40
		implicitWidth:                          200
		color:                                  row % 2 === 0 ? "#3D3A38" : "#32302E"

		TextEdit{
			id:                                 cellTextId
			text:                               logGeneral
			color:                              "white"
			anchors.left:                       parent.left
			anchors.leftMargin:                 3
			anchors.rightMargin:                3
			anchors.verticalCenter:             parent.verticalCenter
			wrapMode:                           TextEdit.NoWrap
			clip:                               true
			verticalAlignment:                  TextEdit.AlignVCenter
		}
	}
}

Thanks!!

[Izowiuz]

I was semi successful in adding some additional functionality to the new QtQuick's TableView.
A few hacks and anti patterns later and I got:

-user customizable header [resizing, renaming]
-user customizable table colors [selection, rows]
-'streach last column' functionality
-regexp based, async filtering
-sorting
-full selection model support [rows, columns, cells, currentIndex and selection ranges]

I'm not 100% happy with few things but those are mostly related to the way you have to interact with scene graph classes; a lot of nice thingies are hidden behind private APIs.
Answering your questions:

1. My approach was to construct table header out of another TableView instance [having one row and columnCount() columns]. This allows me to change column properties from QML side using 'normal' methods and bind column widths of the header to the widths of 'real' columns
2. As new TableView inherits flickable you can control its properties directly. Through, for example, contentX and contentY properties to manipulate visible content position.
3. As per point 1: I control columns size using columnWidthProvider of the 'internal' table in the header

I'm attaching gif showing my implementation. As this plugin is one of many in direct dependency chain it does not work standalone, but I can show you code fragments if further help will be needed.

TableView gif

[voreno]

@Izowiuz - great work with your custom TableView.

We have encountered similar challenges, especially when it comes to allowing the user to manually resize the header columns. Would you be able to share some code on how you have implemented the header cell resize handles and how that is connected to the columnWidthProvider method?

I imagine that in your implementation, when there is a header width change because of a dragged handle, the columnWidthProvider returns the new width after a TableView.forceLayout() call?

[maxwell31]

It would be great if you can post some code fragments.

As a side note: I think it would be the job of Qt to provide those things

[Izowiuz]

I'm sorry for dumping code 'as is' :[ I currently got a lot on my hands but I will try to prepare some usage or building instructions during weekend, if needed.
All (I hope!) used code is in repos:

• iz-sql-utilities - generic set of SQL related classes used in my projects
• iz-qml-library - generic set of components used in my projects - ! WARNING ! - hardcoded to QML MaterialTheme
• iz-sql-tableview - table view displaying data from SQL engines - ! WARNING ! - hardcoded to QML MaterialTheme

As for TableView: most of QML related stuff is in file: IzSQLTableView.qml

@voreno yes, that is exacly what is happening. I basically calculate necessary dimensions as per changes in size of columns or root item and then emit 'relayout()' signal from cpp which in turn forces a relayout on internal TableView's.