QVariantMap of an Object display in tabular form

[Babs]

Hello,
I'm working on a CAN Sniffer QML API.
My CAN hardware is connected to an STM32 board wich send CAN messages.
The purpose is to display that messages.
I store my Message in a QVariantMap and expose it QML frontend.

Here is my CANMessage class.

//#ifndef CANMESSAGE_H
#define CANMESSAGE_H

#include <QObject>


class CanMessage:public QObject
{
    Q_OBJECT
    //Q_GADGET
public:
    explicit CanMessage(QObject *parent=nullptr);
    CanMessage(quint32 ,QString ,int ,qint64 );
    CanMessage(const CanMessage &other);
    quint32 getID() const ;
    QString  getData() const;
    int getLength() const ;
    qint64  getTimeStamp() const ;
    void setID(quint32 ID);
    void setLength(int length);
    void setData(const QString data);
    void setTimeStamp(qint64 time);
signals:

public slots:

private:
    quint32 m_identifier;
    QString m_payload;
    int m_lenght;
    qint64   m_time;
};

Q_DECLARE_METATYPE(CanMessage)
#endif // CANMESSAGE_H

In the CanController class below, the can messages are stored in a QVariantMap shared to QML.

//#ifndef CANCONTROLLER_H
#define CANCONTROLLER_H

#include <QObject>
#include <QVariantMap>
#include <QtSerialBus/QCanBus>
#include <QDebug>

class CanController:public QObject
{
    Q_OBJECT
    Q_PROPERTY(QVariantMap messages READ messages  NOTIFY messagesChanged)

public:
    explicit CanController(QObject *parent=nullptr);
    CanController(const CanController &others);

QVariantMap messages() const
 {
     return m_messages;
 }

signals:

 void messagesChanged();

public slots:
    Q_INVOKABLE void connectDevice();
    Q_INVOKABLE void processReceivedFrames();
    void disconnect();

private:
    QVariantMap m_messages;
    QCanBusDevice *m_device;
};
Q_DECLARE_METATYPE(CanController)
#endif // CANCONTROLLER_H

Here is my QML Code

//import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

Window {
    id:window
    visible: true
    width: 640
    height: 480
    title: qsTr("Can Sniffer")
    Item{
        id:rootItem
        anchors.bottom: window.top
        anchors.right: parent.right
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.bottomMargin: 0

        function hexDecode (text){
            var j;
            var hexes = text.match(/.{1,2}/g) || [];
            var back = "";
            for(j = 0; j<hexes.length; j++) {
                back += String.fromCharCode(parseInt(hexes[j], 16));
            }
            return back;
        }

        Item{
            id:controls
            height: 50
            anchors.top: parent.top
            anchors.topMargin: 0
            anchors.left: parent.left
            anchors.leftMargin: 0
            anchors.right: parent.right
            anchors.rightMargin: 0

            Button{
                id:myButton
                text: qsTr("Connect your device")
                anchors.left: parent.left
                anchors.leftMargin: 8
                anchors.verticalCenter: parent.verticalCenter
                onClicked: {
                    canControl.connectDevice()
                    canControl.processReceivedFrames()
                }

            }

        }
        Item {
            id: messageList
            width: parent.width
            anchors.top: controls.bottom
            anchors.bottom: parent.bottom
            anchors.left: parent.left
            anchors.topMargin: 0
            Item{
                id:listHead
                Text{
                    id: idHead
                    width: 60
                    text: "ID"
                    clip: false
                }
                Text{
                    id:payloadHead
                    text: "Payload"
                    //anchors.right: parent.right
                    anchors.rightMargin: 8
                    anchors.left: idHead.right
                    anchors.leftMargin: 64
                }
                Text{
                    id:lengthHead
                    text:"length"
                    //anchors.right: parent.right
                    //anchors.rightMargin: 16
                    anchors.left: payloadHead.right
                    anchors.leftMargin: 64
                }
                Text{
                    text: "timeStamp"
                    anchors.right: parent.right
                    //anchors.rightMargin: 8
                    anchors.left: lengthHead.right
                    anchors.leftMargin: 64
                }
            }
            ListView{
                property int oldIndex: 0
                clip: true
                anchors.top: listHead.bottom
                anchors.right: parent.right
                anchors.bottom: parent.bottom
                anchors.left: parent.left
                anchors.topMargin: 8
                model:canControl.messages
                delegate: Rectangle{
                    id: item1
                    height: 20
                    width:parent.width
                    Text{
                        text: modelData
                    }

                }

            }
        }
    }
}

My problem is that i can't display my messages in my app window. I want to display my data in tabular form. And i want to refresh data with same identifier and not create a new one.
Anyone got an idea?
Excuse my english it's not my native language.