import QtQuick 2.4
import QtQuick.Window 2.2

Window {
    id : mainWindow
    visible: true
    width: 800
    height: 480

    property real gridListWidth : (width * 0.60)
    property real gridListHeight : (height * 0.50)

    property real gridCellSpacing : (height * 0.004)
    property real gridCellHeight : (height * 0.039)
    property real gridCellWidth : (width * 0.20)

    Rectangle {
        id : rectBackground
        anchors.fill: parent
        color : "white"

        ListView {
            id : ls
            width: mainWindow.gridListWidth
            height: mainWindow.gridListHeight
            clip : true
            headerPositioning: ListView.OverlayHeader
            spacing : mainWindow.gridCellSpacing

            model: ListModel {
                ListElement {
                    name: "Bill Smith"
                    number: "555 3264"
                    hairColor: "red"
                }
                ListElement {
                    name: "John Brown"
                    number: "484 7789"
                    hairColor: "blue"
                }
                ListElement {
                    name: "Sam Wise"
                    number: "284 1547"
                    hairColor: "yellow"
                }
            }

            header : Row {
                spacing : mainWindow.gridCellSpacing

                Rectangle {
                    width : mainWindow.gridCellWidth
                    height : mainWindow.gridCellHeight
                    color : "blue"

                    Text {
                        anchors.centerIn: parent
                        color : "white"
                        text: "Name"
                    }
                }

                Rectangle {
                    width : mainWindow.gridCellWidth
                    height : mainWindow.gridCellHeight
                    color : "blue"

                    Text {
                        anchors.centerIn: parent
                        color : "white"
                        text: "Number"
                    }

                }

                Rectangle {
                    width : mainWindow.gridCellWidth
                    height : mainWindow.gridCellHeight
                    color : "blue"

                    Text {
                        anchors.centerIn: parent
                        color : "white"
                        text: "Hair Color"
                    }
                }
            }

            delegate: Row {
                spacing : mainWindow.gridCellSpacing

                Rectangle {
                    width : mainWindow.gridCellWidth
                    height : mainWindow.gridCellHeight
                    color : "red"

                    Text {
                        anchors.centerIn: parent
                        color : "white"
                        text: name
                    }
                }

                Rectangle {
                    width : mainWindow.gridCellWidth
                    height : mainWindow.gridCellHeight
                    color : "red"

                    Text {
                        anchors.centerIn: parent
                        color : "white"
                        text: number
                    }
                }

                Rectangle {
                    width : mainWindow.gridCellWidth
                    height : mainWindow.gridCellHeight
                    color : "red"

                    Text {
                        anchors.centerIn: parent
                        color : "white"
                        text: hairColor
                    }
                }
            }
        }
    }
}