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.5k 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.
  • L Offline
    L Offline
    learn_Qt
    wrote on 31 Jan 2023, 13:48 last edited by
    #1

    Hi all ,
    I want change different stylesheet for each header, how to do this ? I taken qtableView,

    dfb80e59-e4b1-4b5a-9bc9-e069e145f70a-image.png

    J 1 Reply Last reply 31 Jan 2023, 14:01
    0
    • L learn_Qt
      31 Jan 2023, 13:48

      Hi all ,
      I want change different stylesheet for each header, how to do this ? I taken qtableView,

      dfb80e59-e4b1-4b5a-9bc9-e069e145f70a-image.png

      J Offline
      J Offline
      JonB
      wrote on 31 Jan 2023, 14:01 last edited by
      #2

      @learn_Qt
      I don't believe Qt stylesheet lets you address individual columns/cells.

      1 Reply Last reply
      1
      • A Offline
        A Offline
        Axel Spoerl
        Moderators
        wrote on 31 Jan 2023, 19:56 last edited by
        #3

        @JonB is right (as usual). You can set different stylesheets for normal and focus items, but not for each individual item. You could craft that into a custom item model.

        Software Engineer
        The Qt Company, Oslo

        L 1 Reply Last reply 1 Feb 2023, 05:22
        1
        • A Axel Spoerl
          31 Jan 2023, 19:56

          @JonB is right (as usual). You can set different stylesheets for normal and focus items, but not for each individual item. You could craft that into a custom item model.

          L Offline
          L Offline
          learn_Qt
          wrote on 1 Feb 2023, 05:22 last edited by learn_Qt 2 Jan 2023, 05:23
          #4

          thanks @JonB and @Axel-Spoerl , what is the way do custom item model. example plz .

          J 1 Reply Last reply 1 Feb 2023, 08:13
          0
          • L learn_Qt
            1 Feb 2023, 05:22

            thanks @JonB and @Axel-Spoerl , what is the way do custom item model. example plz .

            J Offline
            J Offline
            JonB
            wrote on 1 Feb 2023, 08:13 last edited by
            #5

            @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 1 Reply Last reply 9 Feb 2023, 11:30
            1
            • J JonB
              1 Feb 2023, 08:13

              @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 9 Feb 2023, 11:30 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
              • S Offline
                S Offline
                SGaist
                Lifetime Qt Champion
                wrote on 9 Feb 2023, 20:17 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 10 Feb 2023, 05:21
                0
                • S SGaist
                  9 Feb 2023, 20:17

                  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 10 Feb 2023, 05:21 last edited by
                  #8

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

                  B 1 Reply Last reply 10 Feb 2023, 05:57
                  0
                  • L learn_Qt
                    10 Feb 2023, 05:21

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

                    B Offline
                    B Offline
                    Bonnie
                    wrote on 10 Feb 2023, 05:57 last edited by Bonnie 2 Oct 2023, 06:01
                    #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 10 Feb 2023, 06:20
                    0
                    • B Bonnie
                      10 Feb 2023, 05:57

                      @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 10 Feb 2023, 06:20 last edited by
                      #10

                      @Bonnie , I'm using tableview.

                      J 1 Reply Last reply 10 Feb 2023, 06:21
                      0
                      • L learn_Qt
                        10 Feb 2023, 06:20

                        @Bonnie , I'm using tableview.

                        J Offline
                        J Offline
                        jsulm
                        Lifetime Qt Champion
                        wrote on 10 Feb 2023, 06:21 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 10 Feb 2023, 07:10
                        0
                        • J jsulm
                          10 Feb 2023, 06:21

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

                          L Offline
                          L Offline
                          learn_Qt
                          wrote on 10 Feb 2023, 07:10 last edited by learn_Qt 2 Oct 2023, 07:11
                          #12

                          @jsulm QStandardItemModel

                          QStandardItemModel *modelTableView = new QStandardItemModel();

                          B 1 Reply Last reply 10 Feb 2023, 08:21
                          0
                          • L learn_Qt
                            10 Feb 2023, 07:10

                            @jsulm QStandardItemModel

                            QStandardItemModel *modelTableView = new QStandardItemModel();

                            B Offline
                            B Offline
                            Bonnie
                            wrote on 10 Feb 2023, 08:21 last edited by Bonnie 2 Oct 2023, 09:16
                            #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 10 Feb 2023, 11:57
                            1
                            • B Bonnie
                              10 Feb 2023, 08:21

                              @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 10 Feb 2023, 11:57 last edited by learn_Qt 2 Oct 2023, 12:03
                              #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 J 2 Replies Last reply 10 Feb 2023, 14:15
                              0
                              • L learn_Qt
                                10 Feb 2023, 11:57

                                @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 10 Feb 2023, 14:15 last edited by Bonnie 2 Oct 2023, 14:38
                                #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 12 Feb 2023, 13:02
                                1
                                • L learn_Qt
                                  10 Feb 2023, 11:57

                                  @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);
                                      }
                                  }
                                  
                                  J Offline
                                  J Offline
                                  JonB
                                  wrote on 10 Feb 2023, 14:32 last edited by JonB 2 Oct 2023, 14:33
                                  #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
                                    10 Feb 2023, 14: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 Offline
                                    L Offline
                                    learn_Qt
                                    wrote on 12 Feb 2023, 13:02 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.

                                    J B 2 Replies Last reply 12 Feb 2023, 15:21
                                    0
                                    • L learn_Qt
                                      12 Feb 2023, 13:02

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

                                      J Offline
                                      J Offline
                                      JonB
                                      wrote on 12 Feb 2023, 15:21 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 13 Feb 2023, 04:53
                                      0
                                      • L learn_Qt
                                        12 Feb 2023, 13:02

                                        @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 13 Feb 2023, 03:47 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
                                        • J JonB
                                          12 Feb 2023, 15:21

                                          @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 13 Feb 2023, 04:53 last edited by learn_Qt
                                          #20

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

                                          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