Change TableView Backgroun

[nero_ner]

Hi I’m Working with TableView in 6.5.3 with quick controls 2.15 and am struggling to figure out how to change the background of a TableView. TableViewStyle doesn’t exist in 2.15 and I don’t see any properties on the docs that expose styling for the table view itself.

this is some sample code for reference

TableView {
                id: topicsTableView
                anchors.top: topicsHeader.bottom
                anchors.bottom: parent.bottom
                width: parent.width
                columnSpacing: 1
                rowSpacing: 1
                clip: true

                model: TableModel {
                    TableModelColumn {
                        display: "topic"
                    }

                    rows: debugTable.topics
                }

                delegate: Rectangle {
                    implicitWidth: topicsTableView.width
                    implicitHeight: debugTable.rowHeight
                    border.width: scrollingTopics
                                  && model.index === debugTable.selectedTopicIndex ? 5 : 1

                    Text {
                        text: display
                        anchors.centerIn: parent
                    }
                }
            }

[JoeCFD]

@nero_ner
something like:

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    visible: true
    width: 600
    height: 400
    title: "TableView with Background"

    // Define your custom background color or image here
    Rectangle {
        width: parent.width
        height: parent.height
        color: "lightblue" // Set your desired background color

        TableView {
            id: tableView
            anchors.fill: parent

            model: ListModel {
                ListElement { name: "John"; age: 25 }
                ListElement { name: "Alice"; age: 30 }
                ListElement { name: "Bob"; age: 22 }
            }
            
            delegate: Rectangle {
                implicitWidth: tableView.width / 2
                implicitHeight: 40
                border.width: 1
                
                Text {
                    text: model.name
                    color: "black"
                    anchors.centerIn: parent
                }
            }
        }
    }
}

[JoeCFD]

@nero_ner if your tableview is fully filled with delegates, add color property to delegate as background color.

take a look at the Qt6 example:
quick/tableview/gameoflife

[nero_ner]

@JoeCFD what if the table is not filled with delegates? Should I just make the tables height just wrap content?

[JoeCFD]

@nero_ner then add a rectangle to tableview for background. Usually, alternating colors are applied for delegates and you can fill tableview with delegates.

[nero_ner]

@JoeCFD what do you mean "add a rectangle to tableview for background" when i say

background: Rectangle {
   color: "black"
}

i get an error that background is not a known property of TableView

[JoeCFD]

@nero_ner
something like:

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    visible: true
    width: 600
    height: 400
    title: "TableView with Background"

    // Define your custom background color or image here
    Rectangle {
        width: parent.width
        height: parent.height
        color: "lightblue" // Set your desired background color

        TableView {
            id: tableView
            anchors.fill: parent

            model: ListModel {
                ListElement { name: "John"; age: 25 }
                ListElement { name: "Alice"; age: 30 }
                ListElement { name: "Bob"; age: 22 }
            }
            
            delegate: Rectangle {
                implicitWidth: tableView.width / 2
                implicitHeight: 40
                border.width: 1
                
                Text {
                    text: model.name
                    color: "black"
                    anchors.centerIn: parent
                }
            }
        }
    }
}

[nero_ner]

@JoeCFD Wow, i cannot believe i didnt try that thank you so much!