Set font size to horizontal header (QAbstractTableModel) TableView qml

[SPQt]

Hi
App is going to show data in TableView (qml side)
TableModel is a part of QAbstractTableModel (C++ side)

Code below:
TableModel.h

#ifndef TABLEMODEL_H
#define TABLEMODEL_H

#include "qqmlintegration.h"
#include <QAbstractTableModel>
#include <QObject>


class TableModel : public QAbstractTableModel
{
    Q_OBJECT
    QML_ELEMENT // This makes the class available
                //for use/instantiation on the QML side.
    QML_ADDED_IN_MINOR_VERSION(1)//???
    enum TableRoles {
        TableDataRole = Qt::UserRole + 1

    };

public:
    explicit TableModel(QObject *parent = nullptr);

    // QAbstractItemModel interface
public:
    virtual int rowCount(const QModelIndex &parent) const override;
    virtual int columnCount(const QModelIndex &parent) const override;
    virtual QVariant data(const QModelIndex &index, int role) const override;
    virtual QVariant headerData(int section, Qt::Orientation orientation, int role) const override;
    virtual QHash<int, QByteArray> roleNames() const override;
    virtual bool insertRows(int row, int count, const QModelIndex &parent) override;
    virtual bool removeRows(int row, int count, const QModelIndex &parent) override;
    Q_INVOKABLE virtual bool setData(const QModelIndex &index, const QVariant &value, int role) override;
    Q_INVOKABLE virtual void sort(int column, Qt::SortOrder order = Qt::AscendingOrder) override;
    Q_INVOKABLE QVariant get_display_data(const QModelIndex& index);

private:
        QVector<QVector<QString>> table;
};

#endif // TABLEMODEL_H

TableModel.cpp

#include "TableModel.h"
#include <QQuickItem>
#include <QSortFilterProxyModel>
TableModel::TableModel(QObject *parent) : QAbstractTableModel(parent)
{
    table.append({"2024-01-03", "Jane", "27", "Teacher", "Married", "Verkso", "Tukk"});
    table.append({"2024-03-01", "Doe", "32", "Farmer", "Single", "Gounduana", "Mestkv"});
    table.append({"2024-01-04", "Jane", "27", "Teacher", "Married", "Verkso", "Tukk"});
    table.append({"2024-01-02", "Doe", "32", "Farmer", "Single", "Gounduana", "Mestkv"});
}

int TableModel::rowCount(const QModelIndex &parent) const
{
    return table.size(); //number of rows
}

int TableModel::columnCount(const QModelIndex &parent) const
{
    return table.at(0).size(); //columns
}

QVariant TableModel::data(const QModelIndex &index, int role) const
{
    switch (role) {
    case TableDataRole:
    {
        return table.at(index.row()).at(index.column());
    }

    default:
        break;
    }
    return QVariant();
}

QVariant TableModel::headerData(int section, Qt::Orientation orientation, int role) const
{

    if(role == Qt::DisplayRole){

    if(orientation == Qt::Horizontal && section == 0) {
        return "Date";
    }
    if(orientation == Qt::Horizontal && section == 1) {
        return "Name";
    }
    if(orientation == Qt::Horizontal && section == 2) {
        return "Age";
    }
    if(orientation == Qt::Horizontal && section == 3) {
        return "Job";
    }
    if(orientation == Qt::Horizontal && section == 4) {
        return "Status";
    }
    if(orientation == Qt::Horizontal && section == 5) {
        return "Name";
    }
    if(orientation == Qt::Horizontal && section == 6 ) {
        return "Country";
    }
    if(orientation == Qt::Horizontal && section == 7) {
        return "City";
    }


    if(orientation == Qt::Vertical) {
        return QVariant::fromValue(section + 1);
    }


    }
    // not working
    if(role == Qt::FontRole)
    {
        qDebug() <<"I am in...";
        QFont headerFont("Times", 26, QFont::Bold, false);
        return headerFont;
    }


    return QVariant();
}

QHash<int, QByteArray> TableModel::roleNames() const
{
    QHash<int, QByteArray> roles;
    roles[TableDataRole] = "tabledata";


    //roles[SomeOtherRole] = "someotherrole"; // You can set up multiple mappings if needed
    return roles;
}

bool TableModel::insertRows(int row, int count, const QModelIndex &parent)
{
    beginInsertRows(parent, row, row + count - 1);
    table.append({"a", "q", "r", "t", "g", "b", "y"});
    qDebug() << "Table size _ insertRows: " << table.size();
    endInsertRows();
    return true;
}

bool TableModel::removeRows(int row, int count, const QModelIndex &parent)
{
    beginRemoveRows(parent, row, row+count - 1);

    table.removeAt(row);
    qDebug() << "Table size _ removeRows: " << table.size();
    endRemoveRows();

    return true;
}

bool TableModel::setData(const QModelIndex &index, const QVariant &value, int role)
{
    if (index.isValid() && role == TableDataRole) {

       table[(index.row())][(index.column())] = value.toString();

        emit dataChanged(index, index, QVector<int>() << role);

        qDebug() << "Data : " << table[(index.row())][(index.column())];
        qDebug() << "index: " << index;

       return true;
   }
    return false;
}

void TableModel::sort(int column, Qt::SortOrder order)
{
    qDebug("Sorting by column %d", column);
    QSortFilterProxyModel sortFilterProxyModel;
    sortFilterProxyModel.sort(column, order);
}

QVariant TableModel::get_display_data(const QModelIndex &index)
{
    return data(index, TableDataRole);
}

Main.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Controls 2.0
import com.tablemodel
import QtQuick.Layouts


ApplicationWindow {
  id: appWinId
  width: 640
  height: 480
  visible: true
  visibility: "Maximized"


  property int tableDataRole: 257
  property int columnWidthStepper: 0


  Component.onCompleted: console.log("AppWinWidth: ", appWinId.width);


  HorizontalHeaderView {
    id: horizontalHeader
    anchors.left: tableViewId.left
    anchors.top: parent.top
    syncView: tableViewId
    clip: true
    model: tableModelId   

  }

  VerticalHeaderView {
    id: verticalHeader
    anchors.top: tableViewId.top
    anchors.left: parent.left
    syncView: tableViewId
    clip: true
  }

  TableModel {
    id: tableModelId

  }

  Component {
    id: delegateTableCell



    Rectangle {
      id: rect_id
      implicitHeight: txtInput.implicitHeight
      implicitWidth: txtInput.implicitWidth
      color: "lightblue"
      clip: true


//      MouseArea {
//                      anchors.fill: parent
//                     hoverEnabled: true
//                 }

      TextInput {
       id: txtInput
       text: model.tabledata
       font.pixelSize: 18
       padding: 12

       maximumLength: 16

       anchors.centerIn: parent
       focus: true
       activeFocusOnTab: true
       color: activeFocus ? "red" : "black"

       onTextChanged: {
         tableViewId.setColumnWidth(0,   columnWidthStepper + 2)
         columnWidthStepper = columnWidthStepper - 2
       }

       onEditingFinished: {
         tableModelId.setData(tableModelId.index(row, column), text, tableDataRole)

       }

     }
      }
  }

  TableView {
    id: tableViewId  
    anchors.left: verticalHeader.right
    anchors.top: horizontalHeader.bottom
    anchors.right: parent.right
    anchors.bottom: parent.bottom


    focus: true
    activeFocusOnTab: true   



    columnSpacing: 1
    rowSpacing: 1
    resizableColumns: true

    model:tableModelId
    delegate: delegateTableCell

   columnWidthProvider: function() {
    return tableViewId.width / tableViewId.model.columnCount();

   }

  }

  Row {
    id: buttonsRow

    anchors {
      bottom: parent.bottom

    }

    leftPadding: 30
    spacing: 30

    Button {
      id: btnInsertRow
      text: "Insert row"

      anchors {
        bottom: parent.bottom
      }

      onClicked: {
        console.log(tableModelId.get_display_data(tableModelId.index(1, 1)));
        tableModelId.insertRows(tableModelId.rowCount(), 1);       
        console.log("tableModelId rowsCount()+++: ", tableModelId.rowCount());

      }
    }

    Button {
      id: btnRemoveRow
      text: "Remove row"
      enabled: true
      anchors { bottom: parent.bottom }

      onClicked: {

       if(tableModelId.rowCount() > 0) {
         console.log("tableViewId.rows - 1: ", tableViewId.rows - 1);

       tableModelId.removeRows(tableModelId.rowCount() - 1, 1)


       } else if(tableModelId.rowCount() === 0)
         tableModelId.removeRows(0, 1);

      }
    }
  }
}

The part of the code which is not working:

 // not working
    if(role == Qt::FontRole)
    {
        qDebug() <<"I am in...";
        QFont headerFont("Times", 26, QFont::Bold, false);
        return headerFont;
    }

Why the above code in the if statement is not called???
I cant see qDebug() <<"I am in...";

[afalsa]

Hello!

I am not very familiarized with TableViews but i think you can try something like this in data() method:

elif role == Qt.FontRole:
        if row == 0 and col == 0:  # change font only for cell(0,0)
            bold_font = QFont()
            bold_font.setBold(True)
            return bold_font

Via: 2.2 Extending the Read Only Example with Roles