Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. how to set tableview horizontal header different stylesheet in qt creator
Forum Updated to NodeBB v4.3 + New Features

how to set tableview horizontal header different stylesheet in qt creator

Scheduled Pinned Locked Moved Unsolved General and Desktop
24 Posts 6 Posters 5.8k Views 2 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • JonBJ JonB

    @learn_Qt
    Assuming you wish to make individual columns look different from one another. Override the QAbstractItemModel::data() and/or QAbstractItemModel::headerData() methods in your derived model class to produce varying appearance roles on a per column basis. Potentially see also QHeaderView or QStyledItemDelegate depending on your requirements.

    L Offline
    L Offline
    learn_Qt
    wrote on last edited by
    #6

    @JonB
    thanks for reply, actually I'm looking for my tableview header (Only horizontal header) has different background color as u can in pic.

    59e7860a-328c-44aa-9810-07ff4a12ab9a-image.png

    1 Reply Last reply
    0
    • SGaistS Offline
      SGaistS Offline
      SGaist
      Lifetime Qt Champion
      wrote on last edited by
      #7

      Hi,

      You can re-implement the headerData method to return that information.
      You will likely have to use a custom QHeaderView in order to make use of the custom color.

      Interested in AI ? www.idiap.ch
      Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

      L 1 Reply Last reply
      0
      • SGaistS SGaist

        Hi,

        You can re-implement the headerData method to return that information.
        You will likely have to use a custom QHeaderView in order to make use of the custom color.

        L Offline
        L Offline
        learn_Qt
        wrote on last edited by
        #8

        @SGaist
        thanks replay , could you please elaborate a bit more.

        B 1 Reply Last reply
        0
        • L learn_Qt

          @SGaist
          thanks replay , could you please elaborate a bit more.

          B Offline
          B Offline
          Bonnie
          wrote on last edited by Bonnie
          #9

          @learn_Qt What kind of item model are you using to display your tableview?
          I think you should overrideheaderData() as @JonB said.

          L 1 Reply Last reply
          0
          • B Bonnie

            @learn_Qt What kind of item model are you using to display your tableview?
            I think you should overrideheaderData() as @JonB said.

            L Offline
            L Offline
            learn_Qt
            wrote on last edited by
            #10

            @Bonnie , I'm using tableview.

            jsulmJ 1 Reply Last reply
            0
            • L learn_Qt

              @Bonnie , I'm using tableview.

              jsulmJ Offline
              jsulmJ Offline
              jsulm
              Lifetime Qt Champion
              wrote on last edited by
              #11

              @learn_Qt The question was what model you're using for your view...

              https://forum.qt.io/topic/113070/qt-code-of-conduct

              L 1 Reply Last reply
              0
              • jsulmJ jsulm

                @learn_Qt The question was what model you're using for your view...

                L Offline
                L Offline
                learn_Qt
                wrote on last edited by learn_Qt
                #12

                @jsulm QStandardItemModel

                QStandardItemModel *modelTableView = new QStandardItemModel();

                B 1 Reply Last reply
                0
                • L learn_Qt

                  @jsulm QStandardItemModel

                  QStandardItemModel *modelTableView = new QStandardItemModel();

                  B Offline
                  B Offline
                  Bonnie
                  wrote on last edited by Bonnie
                  #13

                  @learn_Qt If you are using QStandardItemModel, then your headers should be QStandardItems, right?
                  You should be able to call QStandardItem::setBackground() on them to set the background color for each one.

                  [Added]: I found there's something related to the style. The windows style seems to ignore the background role returned by the headerData() (which will return the color set by setBackground() in this case).
                  So if you are on Windows you'll need to either switch style to fushion (which is much more simple as my example code below), or write your own custom proxy style.

                  //change the style of the whole tableview
                  ui->tableView->setStyle(QStyleFactory::create("fusion"));
                  

                  or

                  //only change the style of the headerviews
                  auto fusion = QStyleFactory::create("fusion");
                  ui->tableView->horizontalHeader()->setStyle(fusion);
                  ui->tableView->verticalHeader()->setStyle(fusion);
                  
                  L 1 Reply Last reply
                  1
                  • B Bonnie

                    @learn_Qt If you are using QStandardItemModel, then your headers should be QStandardItems, right?
                    You should be able to call QStandardItem::setBackground() on them to set the background color for each one.

                    [Added]: I found there's something related to the style. The windows style seems to ignore the background role returned by the headerData() (which will return the color set by setBackground() in this case).
                    So if you are on Windows you'll need to either switch style to fushion (which is much more simple as my example code below), or write your own custom proxy style.

                    //change the style of the whole tableview
                    ui->tableView->setStyle(QStyleFactory::create("fusion"));
                    

                    or

                    //only change the style of the headerviews
                    auto fusion = QStyleFactory::create("fusion");
                    ui->tableView->horizontalHeader()->setStyle(fusion);
                    ui->tableView->verticalHeader()->setStyle(fusion);
                    
                    L Offline
                    L Offline
                    learn_Qt
                    wrote on last edited by learn_Qt
                    #14

                    @Bonnie thank for reply
                    I'm shearing my code snippet thought code I got above 1st posted pic result. could let me know what to do for 2nd posted result.

                    QStandardItemModel *mode = new QStandardItemModel();
                    //number of column
                    mode->setColumnCount(12);
                    //number of row
                    mode->setRowCount(12);
                    QString styleSheet = "::section {" // "QHeaderView::section {"
                            "background-color: white;"
                            "border-radius: 20px;"
                            "border: 3px solid #498fd0;"
                            "font-size: 20px;"
                            "text-align: center;"
                            "font: bold;"
                            "}";
                    ui->tableView->horizontalHeader()->setStyleSheet(styleSheet);    
                    ui->tableView->verticalHeader()->setVisible(false);
                    ui->tableView->horizontalHeader()->setSectionResizeMode(QHeaderView::Stretch);
                    mode->setHeaderData(0, Qt::Horizontal, ("1"));
                    mode->setHeaderData(1, Qt::Horizontal, ("2"));
                    mode->setHeaderData(2, Qt::Horizontal, ("3"));
                    mode->setHeaderData(3, Qt::Horizontal, ("4"));
                    mode->setHeaderData(4, Qt::Horizontal, ("5"));
                    mode->setHeaderData(5, Qt::Horizontal, ("6"));
                    mode->setHeaderData(6, Qt::Horizontal, ("7"));
                    mode->setHeaderData(7, Qt::Horizontal, ("8"));
                    for(int i = 0; i < MAX_ROW_COUNT; i++)
                    {
                        for(int j = 0; j < MAX_COLUMN_COUNT; j++)
                        {
                            mode->setData(mode->index(i, j), " ");
                            mode->setData(mode->index(i, j), Qt::AlignCenter, Qt::TextAlignmentRole);
                            mode->setData(mode->index(i, j), QFont("Arial", 10, QFont::Bold), Qt::FontRole);
                        }
                    }
                    
                    B JonBJ 2 Replies Last reply
                    0
                    • L learn_Qt

                      @Bonnie thank for reply
                      I'm shearing my code snippet thought code I got above 1st posted pic result. could let me know what to do for 2nd posted result.

                      QStandardItemModel *mode = new QStandardItemModel();
                      //number of column
                      mode->setColumnCount(12);
                      //number of row
                      mode->setRowCount(12);
                      QString styleSheet = "::section {" // "QHeaderView::section {"
                              "background-color: white;"
                              "border-radius: 20px;"
                              "border: 3px solid #498fd0;"
                              "font-size: 20px;"
                              "text-align: center;"
                              "font: bold;"
                              "}";
                      ui->tableView->horizontalHeader()->setStyleSheet(styleSheet);    
                      ui->tableView->verticalHeader()->setVisible(false);
                      ui->tableView->horizontalHeader()->setSectionResizeMode(QHeaderView::Stretch);
                      mode->setHeaderData(0, Qt::Horizontal, ("1"));
                      mode->setHeaderData(1, Qt::Horizontal, ("2"));
                      mode->setHeaderData(2, Qt::Horizontal, ("3"));
                      mode->setHeaderData(3, Qt::Horizontal, ("4"));
                      mode->setHeaderData(4, Qt::Horizontal, ("5"));
                      mode->setHeaderData(5, Qt::Horizontal, ("6"));
                      mode->setHeaderData(6, Qt::Horizontal, ("7"));
                      mode->setHeaderData(7, Qt::Horizontal, ("8"));
                      for(int i = 0; i < MAX_ROW_COUNT; i++)
                      {
                          for(int j = 0; j < MAX_COLUMN_COUNT; j++)
                          {
                              mode->setData(mode->index(i, j), " ");
                              mode->setData(mode->index(i, j), Qt::AlignCenter, Qt::TextAlignmentRole);
                              mode->setData(mode->index(i, j), QFont("Arial", 10, QFont::Bold), Qt::FontRole);
                          }
                      }
                      
                      B Offline
                      B Offline
                      Bonnie
                      wrote on last edited by Bonnie
                      #15

                      @learn_Qt Unfortunately my solution is conflict with stylesheet, as far as I can see, you can't have different header bgcolors if you use stylesheet to set the header bg/border.
                      So If you remove these 3 lines from your style sheet
                      "background-color: white;"
                      "border-radius: 20px;"
                      "border: 3px solid #498fd0;"

                      Then you could have colorful headers by adding the below code:

                      mode->setHeaderData(0, Qt::Horizontal, QColor("red"), Qt::BackgroundRole);
                      mode->setHeaderData(1, Qt::Horizontal, QColor("green"), Qt::BackgroundRole);
                      mode->setHeaderData(2, Qt::Horizontal, QColor("blue"), Qt::BackgroundRole);
                      
                      auto headerStyle = ui->tableView->horizontalHeader()->style();
                      if(headerStyle->inherits("QWindowsStyle")) {
                          headerStyle = QStyleFactory::create("fusion");
                          headerStyle->setParent(this);
                          ui->tableView->horizontalHeader()->setStyle(headerStyle);
                      }
                      
                      L 1 Reply Last reply
                      1
                      • L learn_Qt

                        @Bonnie thank for reply
                        I'm shearing my code snippet thought code I got above 1st posted pic result. could let me know what to do for 2nd posted result.

                        QStandardItemModel *mode = new QStandardItemModel();
                        //number of column
                        mode->setColumnCount(12);
                        //number of row
                        mode->setRowCount(12);
                        QString styleSheet = "::section {" // "QHeaderView::section {"
                                "background-color: white;"
                                "border-radius: 20px;"
                                "border: 3px solid #498fd0;"
                                "font-size: 20px;"
                                "text-align: center;"
                                "font: bold;"
                                "}";
                        ui->tableView->horizontalHeader()->setStyleSheet(styleSheet);    
                        ui->tableView->verticalHeader()->setVisible(false);
                        ui->tableView->horizontalHeader()->setSectionResizeMode(QHeaderView::Stretch);
                        mode->setHeaderData(0, Qt::Horizontal, ("1"));
                        mode->setHeaderData(1, Qt::Horizontal, ("2"));
                        mode->setHeaderData(2, Qt::Horizontal, ("3"));
                        mode->setHeaderData(3, Qt::Horizontal, ("4"));
                        mode->setHeaderData(4, Qt::Horizontal, ("5"));
                        mode->setHeaderData(5, Qt::Horizontal, ("6"));
                        mode->setHeaderData(6, Qt::Horizontal, ("7"));
                        mode->setHeaderData(7, Qt::Horizontal, ("8"));
                        for(int i = 0; i < MAX_ROW_COUNT; i++)
                        {
                            for(int j = 0; j < MAX_COLUMN_COUNT; j++)
                            {
                                mode->setData(mode->index(i, j), " ");
                                mode->setData(mode->index(i, j), Qt::AlignCenter, Qt::TextAlignmentRole);
                                mode->setData(mode->index(i, j), QFont("Arial", 10, QFont::Bold), Qt::FontRole);
                            }
                        }
                        
                        JonBJ Offline
                        JonBJ Offline
                        JonB
                        wrote on last edited by JonB
                        #16

                        @learn_Qt
                        As @Bonnie has said, your stylesheet was not just setting border, it was setting colors too. Qt always makes stylesheet rules override coded styles.

                        I don't know whether @Bonnie tried it, but you might be able to keep your border non-color stuff:

                                "border-radius: 20px;"
                                "border: 3px solid;"
                        

                        Try his first to make sure that works, then see whether you could add in above without losing your color stuff.

                        1 Reply Last reply
                        0
                        • B Bonnie

                          @learn_Qt Unfortunately my solution is conflict with stylesheet, as far as I can see, you can't have different header bgcolors if you use stylesheet to set the header bg/border.
                          So If you remove these 3 lines from your style sheet
                          "background-color: white;"
                          "border-radius: 20px;"
                          "border: 3px solid #498fd0;"

                          Then you could have colorful headers by adding the below code:

                          mode->setHeaderData(0, Qt::Horizontal, QColor("red"), Qt::BackgroundRole);
                          mode->setHeaderData(1, Qt::Horizontal, QColor("green"), Qt::BackgroundRole);
                          mode->setHeaderData(2, Qt::Horizontal, QColor("blue"), Qt::BackgroundRole);
                          
                          auto headerStyle = ui->tableView->horizontalHeader()->style();
                          if(headerStyle->inherits("QWindowsStyle")) {
                              headerStyle = QStyleFactory::create("fusion");
                              headerStyle->setParent(this);
                              ui->tableView->horizontalHeader()->setStyle(headerStyle);
                          }
                          
                          L Offline
                          L Offline
                          learn_Qt
                          wrote on last edited by
                          #17

                          @Bonnie thanks reply, It's code snippet working. But how can we add background-color, border-radius, border into header in that.

                          JonBJ B 2 Replies Last reply
                          0
                          • L learn_Qt

                            @Bonnie thanks reply, It's code snippet working. But how can we add background-color, border-radius, border into header in that.

                            JonBJ Offline
                            JonBJ Offline
                            JonB
                            wrote on last edited by
                            #18

                            @learn_Qt
                            Did you even try adding back in, say, the "border-radius: 20px;" I suggested you try? Or not?

                            L 2 Replies Last reply
                            0
                            • L learn_Qt

                              @Bonnie thanks reply, It's code snippet working. But how can we add background-color, border-radius, border into header in that.

                              B Offline
                              B Offline
                              Bonnie
                              wrote on last edited by
                              #19

                              @learn_Qt I already said: as far as I can see, you can't.
                              If you have less than three columns, you can set them individually by :first, :middle, :last pseudo states in stylesheet. But if more, there seems nothing can help.

                              1 Reply Last reply
                              0
                              • JonBJ JonB

                                @learn_Qt
                                Did you even try adding back in, say, the "border-radius: 20px;" I suggested you try? Or not?

                                L Offline
                                L Offline
                                learn_Qt
                                wrote on last edited by learn_Qt
                                #20

                                @JonB I try that but it's not working.

                                1 Reply Last reply
                                0
                                • JonBJ JonB

                                  @learn_Qt
                                  Did you even try adding back in, say, the "border-radius: 20px;" I suggested you try? Or not?

                                  L Offline
                                  L Offline
                                  learn_Qt
                                  wrote on last edited by
                                  #21

                                  @JonB Any way to we can do it?

                                  JonBJ 1 Reply Last reply
                                  0
                                  • L learn_Qt

                                    @JonB Any way to we can do it?

                                    JonBJ Offline
                                    JonBJ Offline
                                    JonB
                                    wrote on last edited by
                                    #22

                                    @learn_Qt
                                    If you cannot get stylesheet to work on, say, border radius, for whatever reason, then you will need a custom QHeaderView and override void QHeaderView::paintSection(QPainter *painter, const QRect &rect, int logicalIndex) const, or something like that.

                                    L 1 Reply Last reply
                                    0
                                    • JonBJ JonB

                                      @learn_Qt
                                      If you cannot get stylesheet to work on, say, border radius, for whatever reason, then you will need a custom QHeaderView and override void QHeaderView::paintSection(QPainter *painter, const QRect &rect, int logicalIndex) const, or something like that.

                                      L Offline
                                      L Offline
                                      learn_Qt
                                      wrote on last edited by
                                      #23

                                      @JonB how to implement, any reference?

                                      JonBJ 1 Reply Last reply
                                      0
                                      • L learn_Qt

                                        @JonB how to implement, any reference?

                                        JonBJ Offline
                                        JonBJ Offline
                                        JonB
                                        wrote on last edited by
                                        #24

                                        @learn_Qt
                                        The reference is the link I gave you.

                                        1 Reply Last reply
                                        0

                                        • Login

                                        • Login or register to search.
                                        • First post
                                          Last post
                                        0
                                        • Categories
                                        • Recent
                                        • Tags
                                        • Popular
                                        • Users
                                        • Groups
                                        • Search
                                        • Get Qt Extensions
                                        • Unsolved