Adjust customers table layout - alternate colors for rows

gui/CustomerTables.qml

@@ -1,3 +1,7 @@
+import QtQml.Models 2.2
+import QtQml 2.2
+
+
 import QtQuick
 import QtQuick.Layouts
 import QtQuick.Controls
@@ -58,21 +62,27 @@ Item {
 
         HorizontalHeaderView
         {
+            // @disable-check M16
             id: horizontalHeader
             Layout.fillWidth: true
-
+            movableColumns: true
             syncView: testTable
 
         }
 
         TableView
         {
+            property var customWidths: [0.2, 0.5, 0.3]
+            property real newWidth: 0
+
             id: testTable
             Layout.fillHeight: true
             Layout.fillWidth: true
             columnSpacing: 1
             rowSpacing: 2
             model: dbm
+            alternatingRows: true
+            resizableColumns: true
             selectionBehavior: TableView.SelectRows
             selectionModel: ItemSelectionModel
             {
@@ -80,20 +90,53 @@ Item {
                 model: testTable.model
             }
 
+            columnWidthProvider: function(column)
+            {
+                // switch (column)
+                // {
+                //     case 0: return width * 0.2;
+                //     case 1: return width * 0.5;
+                //     case 2: return width * 0.3;
+                //     default: return width / model.columnCount();
+                // }
+                //return customWidths[column] * width;
+                //return tableColumn.content.implicitWidth // model.columnCount()
+                newWidth = columnWidth(column)
+                return newWidth
+            }
+
+            Timer
+            {
+                running: true
+                interval: 100
+                onTriggered:
+                {
+                    //testTable.columnWidths[2] = 150
+                    testTable.forceLayout();
+                }
+            }
+
+
 
             delegate:Rectangle
             {
                 required property bool selected
                 required property bool current
                 implicitWidth: tableColumn.width / testTable.columns
+                Layout.fillWidth: true
                 implicitHeight: 25
-                color: selected? "lightblue": palette.base
+                //color: selected? "lightblue": palette.base
+                color: selected
+                           ? "lightblue" //palette.highlight
+                           : (testTable.alternatingRows && row % 2 !== 0
+                           ? palette.base
+                           : palette.alternateBase)
 
                 Text
                 {
                     Layout.fillWidth: true
                     text: model.display
-
+                    //elide: Text.ElideRight
                 }
 
                 MouseArea
@@ -112,7 +155,6 @@ Item {
 
 
                     }
-
                 }
             }
         }