Display Sudoku grid diffrently using combo box qml

[arlyn123]

I want to make a Sudoku game in qml with 5 diffrent levels. I have a combo box and when I select a game level and then on the NEXT button I want to open the same game window but with numbers being positioned diffrently on the board coresponding to each difficulty level. My board is made with TabelView and QAbstractTableModel. How can I do display the same game window but with diffrent numbers in the grid?
Here is my combo box:

Here is the qml code for the combo box:

                ColumnLayout{
                    spacing: 400
                    anchors {
                           right: parent.right
                           top: parent.top
                       }

                       x: -530
                       y: 325
                       anchors.rightMargin: 230
                       anchors.topMargin: 267
                       RowLayout{
                           spacing: 100
                           DropDownMenu{
                               id: selectionCombo
                               model: ["Very Easy", "Easy", "Medium", "Difficult", "May God have mercy"]
                           }
                       }
                   }

                Button {
                         id: btn1
                         x: 1005
                         y: 591
                         width: 211
                         height: 38
                         onClicked: {
                             if(qsTr(selectionCombo.currentText)==="Very Easy"){
                                 classA.gameWindow();
                             }
                         }
                         text: qsTr(" NEXT ")
                         background: Rectangle {
                                color: "transparent"
                             }

                         font.family: "Inria Serif"
                         font.pixelSize: 30


                         contentItem: Text {
                                text: btn1.text
                                color: btn1.hovered ? "#ccccb3" : "#ffffff"
                                font.family: "Inria Serif"
                                font.pixelSize: 30
                                horizontalAlignment: Text.AlignLeft
                                verticalAlignment: Text.AlignTop
                                wrapMode: Text.Wrap
                                font.weight: Font.Normal
                            }

                        }
                }
            }

Here is the c++ code of the grid:

#include "Grid.h"

Grid::Grid(QObject *parent) : QAbstractTableModel(parent)
{
    for (int row = 0; row < 9; ++row) {
        for (int col = 0; col < 9; ++col) {
            gridData[row][col] = (row * 3 + row / 3 + col) % 9 + 1;
        }
    }
}

int Grid::rowCount(const QModelIndex &) const
{
    return 9;
}

int Grid::columnCount(const QModelIndex &) const
{
    return 9;
}

QVariant Grid::data(const QModelIndex &index, int role) const
{
    switch (role) {
    case Qt::DisplayRole:
        return gridData[index.row()][index.column()];
    default:
        break;
    }

    return QVariant();
}

QHash<int, QByteArray> Grid::roleNames() const
{
    return { {Qt::DisplayRole, "display"} };
}

and its .h file:

#pragma once

#include <QAbstractTableModel>

class Grid : public QAbstractTableModel
{
    Q_OBJECT

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

public:
    int rowCount(const QModelIndex & = QModelIndex()) const override;

    int columnCount(const QModelIndex & = QModelIndex()) const override;

    QVariant data(const QModelIndex &index, int role) const override;

    QHash<int, QByteArray> roleNames() const override;

signals:

private:
    int gridData[9][9];
};

And this is the TableView:

TableView {
                anchors.fill: parent
                columnSpacing: 1
                rowSpacing: 1
                clip: true

                model: SudokuGrid {}

                delegate: Rectangle {
                    implicitWidth: 50
                    implicitHeight: 50
                    border {
                         color: "white"
                         width: 1
                    }
                    color: model.row % 2 ? "lightpink" : "lightblue"
                    Text {
                        anchors.centerIn: parent
                        text: display
                        font.pointSize: 12
                    }
                }
            }