Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Change Tabulation Order in TableView
Forum Updated to NodeBB v4.3 + New Features

Change Tabulation Order in TableView

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
1 Posts 1 Posters 115 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • P Offline
    P Offline
    pekeso
    wrote on last edited by
    #1

    I have the code below creating a table with 3 cells.
    How can I change the tabulation order in the table? For example, going from cell1 to cell3 instead of cell2.

    import QtQuick
    import QtQuick.Window
    import QtQuick.Controls
    import Qt.labs.qmlmodels
    
    Window {
        width: 640
        height: 480
        visible: true
        title: qsTr("Test Table")
    
        TableView {
            anchors.fill: parent
            columnSpacing: 5
            rowSpacing: 2
            clip: true
            flickableDirection: Flickable.AutoFlickIfNeeded
    
            model: TableModel {
                TableModelColumn { display: "name" }
                TableModelColumn { display: "color" }
                TableModelColumn { display: "make" }
    
                rows: [
                    {
                        "name": "",
                        "color": "",
                        "make": ""
                    }
                ]
    
                property var headers: [
                    {
                        'id': 'name_header',
                        'align': Text.AlignLeft,
                        'role':  'name',
                        'title': qsTr("name"),
                        'visible': true,
                        'width': 100
                    },
                    {
                        'id': 'color_header',
                        'align': Text.AlignLeft,
                        'role':  'color',
                        'title': qsTr("color"),
                        'visible': true,
                        'width': 100
                    },
                    {
                        'id': 'make_header',
                        'align': Text.AlignLeft,
                        'role':  'make',
                        'title': qsTr("make"),
                        'visible': true,
                        'width': 100
                    }
                ]
            }
    
            delegate: DelegateChooser {
                DelegateChoice {
                    column: 0
    
                    TextField {
                        id: nameField
                        selectByMouse: true
                        Flickable {
                            contentWidth: 100
                            ScrollBar.horizontal: ScrollBar { }
                        }
                        property bool selected: false
                        property bool borderless: false
                        property bool modified: false
                        text: "first entry"
    
                        background: Rectangle {
                           color: "white"
                           border.color: nameField.activeFocus || selected ? "#354793" : borderless ? "white" : "#bdbebf"
                           border.width: 1
                           radius: 2.0
                        }
                    }
                }
    
                DelegateChoice {
                    column: 1
                    TextField {
    
                        selectByMouse: true
                        property bool selected: false
                        property bool borderless: false
                        property bool modified: false
                        text: "second entry"
    
                        background: Rectangle {
                           color: "white"
                           border.color: colorField.activeFocus || selected ? "#354793" : borderless ? "white" : "#bdbebf"
                           border.width: 1
                           radius: 2.0
                        }
                    }
                }
    
                DelegateChoice {
    
                    column: 2
    
                    Component {
                        TextField {
                            selectByMouse: true
                            property bool selected: false
                            property bool borderless: false
                            property bool modified: false
                            text: "last entry"
    
                            background: Rectangle {
                               color: "white"
                               border.color: makeField.activeFocus || selected ? "#354793" : borderless ? "white" : "#bdbebf"
                               border.width: 1
                               radius: 2.0
                            }
                        }
                    }
                }
            }
        }
    }
    
    

    Thank you

    1 Reply Last reply
    0

    • Login

    • Login or register to search.
    • First post
      Last post
    0
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Get Qt Extensions
    • Unsolved