PropertiesView

import QtQuick 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.12

ItemDelegate {
    id: delegate

    checkable: true

    contentItem:
        ColumnLayout {
        spacing: 10

        GridLayout {
            id: gridLabels
            columnSpacing: 40
            rows: 1
            columns: 3

            Rectangle {
                id: rect_hostname
                width: 60
                Text {
                    text: hostname
                    font.bold: true
                    anchors.fill: parent
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                }
            }
            Rectangle {
                id: rect_model
                width: 60
                Text {
                    text: model_name
                    font.pixelSize: 9
                    anchors.fill: parent
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                }
                Layout.alignment: Qt.AlignLeft | Qt.AlignBaseline
            }
            Rectangle {
                id: rect_status
                width: 60
                Text {
                    text: status
                    font.pixelSize: 9
                    anchors.fill: parent
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                }
                Layout.alignment: Qt.AlignLeft | Qt.AlignBaseline
            }
        }

        GridLayout {
            id: grid
            visible: false

            columns: 2
            rowSpacing: 10
            columnSpacing: 5

            Rectangle {
                id: rect_space_left
                height: 20
                Layout.leftMargin: 60
            }

            Label {
                id: rect_space_right
                height: 20
                Layout.fillWidth: true
            }

            Label {
                text: qsTr("date install:")
                Layout.leftMargin: 60
            }

            Label {
                text: date_install
                font.bold: true
                elide: Text.ElideLeft
                Layout.fillWidth: true
            }

            Label {
                text: qsTr("date change:")
                Layout.leftMargin: 60
            }

            Label {
                text: date_change
                font.bold: true
                elide: Text.ElideRight
                Layout.fillWidth: true
            }
        }
    }

    states: [
        State {
            name: "expanded"
            when: delegate.checked

            PropertyChanges {
                target: grid
                visible: true
            }
        }
    ]
}