Solved Header Columns for QtQuick TableView
-
Hi,
I need to add some tables to my presentation, and as the QuickControls1 Tableview seems to be deprecated I thought I would use the new QtQuick TableView. However, it comes without any header or selection support.
What is the best practice for adding headers to a QtQuick TableView?
-
I have made them from another TableView attached above 'internal' TV. Looks like this.
Minimal example can be, for example:
TableView { id: tableHeader Layout.fillWidth: true Layout.preferredHeight: 80 model: root.header clip: true interactive: false contentWidth: root.tableContentWidth boundsMovement: Flickable.StopAtBounds rowSpacing: 1 contentX: tableViewInternal.contentX delegate: HeaderDelegate { tableView: root } } TableView { id: tableViewInternal Layout.fillWidth: true Layout.fillHeight: true focus: true clip: true interactive: !quickSettings.hovered contentWidth: tableHeader.contentWidth boundsMovement: tableHeader.boundsMovement rowSpacing: tableHeader.rowSpacing }
Part: contentX: tableViewInternal.contentX keeps them together.
-
Thank you!
-
@Izowiuz said in Header Columns for QtQuick TableView:
I have made them from another TableView attached above 'internal' TV. Looks like this.
Minimal example can be, for example:
TableView { id: tableHeader Layout.fillWidth: true Layout.preferredHeight: 80 model: root.header clip: true interactive: false contentWidth: root.tableContentWidth boundsMovement: Flickable.StopAtBounds rowSpacing: 1 contentX: tableViewInternal.contentX delegate: HeaderDelegate { tableView: root } } TableView { id: tableViewInternal Layout.fillWidth: true Layout.fillHeight: true focus: true clip: true interactive: !quickSettings.hovered contentWidth: tableHeader.contentWidth boundsMovement: tableHeader.boundsMovement rowSpacing: tableHeader.rowSpacing }
Part: contentX: tableViewInternal.contentX keeps them together.
Could you possibly provide some more code? For example, how do you keep the column widths in sync between the header and the table?
-
Of course. Full [and somewhat poorly documented] code is at:
https://github.com/Izowiuz/iz-sql-tableview
To sync tables I just use same columnWidthProvider in both, for example:
columnWidthProvider: function (column) { return root.columnWidth(column); }
EDIT: Just beware - code is ridden with hacks to get functionalities such as full selection model, 'stretch-last-column' or alternative rows colors.