qt-tableview.qml

qt-tableview.qml

// This sample shows how you can make a QtQuick 1 table have the a QtQuick 2 look and feel
// - Uses custom headerDelegate, rowDelegate, itemDelegate
// - Also shows:
//   - how to dynamically create columns
//   - make the table "flickable" on Android devices
//   - simple "3D" styling with LinearGradient

import QtQuick 2.8
import QtQuick.Controls 1.4
import QtQuick.Controls 2.1
import QtGraphicalEffects 1.0

Item {
    property var columns: [ "name", "country", "subcountry", "latitude", "longitude" ]
    property var cities: [
        { name: "Melbourne", country: "Australia", subcountry: "Victoria", latitude: -37.9716929, longitude: 144.7729583 },
        { name: "London", country: "United Kingdom", subcountry: "England", latitude: 51.5287718, longitude: -0.2416804 },
        { name: "Paris", country: "France", subcountry: "Île-de-France", latitude: 48.8589507, longitude: 2.2770205 },
        { name: "New York City", country: "United States", subcountry: "New York", latitude: 40.6976637, longitude: -74.1197639 },
        { name: "Tokyo", country: "Japan", subcountry: "Tokyo", latitude: 35.6735408 , longitude: 139.5703047 }
    ];

    TableView {
        id: tableView

        anchors.fill: parent

        model: cities
        horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOn
        flickableItem.flickableDirection: Flickable.HorizontalAndVerticalFlick

        headerDelegate: TextField {
            text: styleData.value
            readOnly: true
            background: LinearGradient {
                start: Qt.point(0, 0)
                end: Qt.point(0, height)
                gradient: Gradient {
                    GradientStop { position: 0.0; color: "white" }
                    GradientStop { position: 1.0; color: "#e0e0e0" }
                }
            }
        }

        rowDelegate: Rectangle {
            color: styleData.selected ? "#0077CC" : styleData.row & 1 ? "white" : "#f5f5f5"
            height: 20
        }

        itemDelegate: Text {
            text: styleData.value
            color: styleData.textColor
            elide: styleData.elideMode
        }
    }

    Component {
        id: columnComponent
        TableViewColumn { width: 100 }
    }

    function toUpperCase(c) { return c.toUpperCase(); }
    function capitalize(str) { return str.replace(/^./, toUpperCase); }
    
    function addColumn(name) {
        tableView.addColumn(columnComponent.createObject(tableView, { role: name, title: capitalize(name) } ) );
    }

    Component.onCompleted: columns.forEach(addColumn)
}