Doc: Add snippet to demonstrate keyboard navigation

Add example to showcase keybord navigation for the TableView QML type
together with 'current' and 'selected' properties.

Fixes: QTBUG-107889
Pick-to: 6.5 6.4
Change-Id: Ie95d85aa09e574bee16c23a2dff27056bc0bcd05
Reviewed-by: Topi Reiniö <topi.reinio@qt.io>
Reviewed-by: Richard Moe Gustavsen <richard.gustavsen@qt.io>

2 files changed, 76 insertions, 1 deletions

diff --git a/src/quick/doc/snippets/qml/tableview/keyboard-navigation.qml b/src/quick/doc/snippets/qml/tableview/keyboard-navigation.qml
new file mode 100644
index 0000000000..8af308dec5
--- /dev/null
+++ b/src/quick/doc/snippets/qml/tableview/keyboard-navigation.qml
@@ -0,0 +1,71 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Controls
+import Qt.labs.qmlmodels 1.0
+
+//![0]
+ApplicationWindow {
+    width: 800
+    height: 600
+    visible: true
+    ScrollView {
+        anchors.fill: parent
+        TableView {
+            id: tableView
+            clip: true
+            interactive: true
+            rowSpacing: 1
+            columnSpacing: 1
+            model: TableModel {
+                TableModelColumn { display: "checked" }
+                TableModelColumn { display: "amount" }
+                TableModelColumn { display: "fruitType" }
+                TableModelColumn { display: "fruitName" }
+                TableModelColumn { display: "fruitPrice" }
+
+                rows: [
+                    {
+                        checked: false,
+                        amount: 1,
+                        fruitType: "Apple",
+                        fruitName: "Granny Smith",
+                        fruitPrice: 1.50
+                    },
+                    {
+                        checked: true,
+                        amount: 4,
+                        fruitType: "Orange",
+                        fruitName: "Navel",
+                        fruitPrice: 2.50
+                    },
+                    {
+                        checked: false,
+                        amount: 1,
+                        fruitType: "Banana",
+                        fruitName: "Cavendish",
+                        fruitPrice: 3.50
+                    }
+                ]
+            }
+            selectionModel: ItemSelectionModel {}
+            delegate: Rectangle {
+                implicitWidth: 100
+                implicitHeight: 50
+                required property bool selected
+                required property bool current
+                border.width: current ? 2 : 0
+                color: selected ? "lightblue" : palette.base
+                Text{
+                    text: model.display
+                    padding: 12
+                }
+            }
+        }
+    }
+    SelectionRectangle {
+        target: tableView
+    }
+}
+//![0]
diff --git a/src/quick/items/qquicktableview.cpp b/src/quick/items/qquicktableview.cpp
index 69b0e9a992..81eddb03ce 100644
--- a/src/quick/items/qquicktableview.cpp
+++ b/src/quick/items/qquicktableview.cpp
@@ -259,7 +259,11 @@
     to the \l selectionModel property. TableView will then use this model to manipulate
     the model's \l {ItemSelectionModel::currentIndex}{currentIndex}. You can
     disable keyboard navigation fully (in case you want to implement your own key
-    handlers) by setting \l keyNavigationEnabled to \c false.
+    handlers) by setting \l keyNavigationEnabled to \c false. Below is an
+    example that demonstrates how to use keyboard navigation together with
+    \c current and \c selected properties:
+
+    \snippet qml/tableview/keyboard-navigation.qml 0
 
     \section1 Copy and paste