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

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?



  • @patrickkidd

    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.


Log in to reply