Nominate our 2022 Qt Champions!

Icon in TableView

  • Hello,
    i'm trying to set an icon depending on its value as a delegate in a table view.
    I can draw the icon but, i have no clue how to change it depending on its value.

            TableView {
                id: tableView
                anchor.fill: parent
                TableViewColumn {
                    role: "type"
                    title: "Typ"
                    width: 100
                    delegate: Image {
                        fillMode: Image.PreserveAspectFit
                        source:  "qrc:/images/exclamation.png"

    The doc says:

    In the delegate you have access to the following special properties: styleData.value - the value or text for this item

    But how can i combine it with the icon?


  • Hello @beecksche,

    What is the test you want to do on styleData.value to change your icon?

  • @Julien-B

    In that role an enum / int is stored. So i would set the source of the image depending on the value:

    switch (styleData.value){
    case Type.Info: image.source = "qrc:/images/info.png"; break;
    case Type.Warning: image.source = "qrc:/images/warning.png"; break;
    case Type.Error: image.source = "qrc:/images/error.png"; break;

  • @beecksche

    I think you can create a function (for example defined in tableView)

    function provideIcon(int enumValue) {
        switch (enumValue) {
            case Type.Info: return "qrc:/images/info.png";
            case Type.Warning: return "qrc:/images/warning.png";
            case Type.Error: return "qrc:/images/error.png";

    and use it in your delegate:

     delegate: Image {
        fillMode: Image.PreserveAspectFit
        source: tableView.provideIcon(styleData.value)

  • @Julien-B
    It's that simple. Thanks a lot. Works perfectly!

Log in to reply