Replace TableView with custom implementation

I intend to copy this implementation to mainline Cura when it's done.

Contributes to issue CURA-8686.

plugins/DigitalLibrary/resources/qml/OpenProjectFilesPage.qml

@@ -1,6 +1,8 @@
-// Copyright (C) 2021 Ultimaker B.V.
+//Copyright (C) 2022 Ultimaker B.V.
+//Cura is released under the terms of the LGPLv3 or higher.
 
-import QtQuick 2.10
+import Qt.labs.qmlmodels 1.0
+import QtQuick 2.15
 import QtQuick.Window 2.2
 import QtQuick.Controls 1.4 as OldControls // TableView doesn't exist in the QtQuick Controls 2.x in 5.10, so use the old one
 import QtQuick.Controls 2.3
@@ -56,8 +58,24 @@ Item
         border.width: UM.Theme.getSize("default_lining").width
         border.color: UM.Theme.getColor("lining")
 
+        //We can't use Cura's TableView here, since in Cura >= 5.0 this uses QtQuick.TableView, while in Cura < 5.0 this uses QtControls1.TableView.
+        //So we have to define our own. Once support for 4.13 and earlier is dropped, we can switch to Cura.TableView.
+        Table
+        {
+            id: filesTableView
+            anchors.fill: parent
 
-        Cura.TableView
+            columnHeaders: ["Name", "Uploaded by", "Uploaded at"]
+            model: TableModel
+            {
+                TableModelColumn { display: "fileName" }
+                TableModelColumn { display: "username" }
+                TableModelColumn { display: "uploadedAt" }
+                rows: manager.digitalFactoryFileModel.items
+            }
+        }
+
+        /*Cura.TableView
         {
             id: filesTableView
             anchors.fill: parent
@@ -102,7 +120,7 @@ Item
                     manager.setSelectedFileIndices(newSelection);
                 }
             }
-        }
+        }*/
 
         Label
         {

plugins/DigitalLibrary/resources/qml/Table.qml

@@ -0,0 +1,127 @@
+//Copyright (C) 2022 Ultimaker B.V.
+//Cura is released under the terms of the LGPLv3 or higher.
+
+import Qt.labs.qmlmodels 1.0
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+
+import DigitalFactory 1.0 as DF
+import UM 1.5 as UM
+
+/*
+ * A re-sizeable table of data.
+ *
+ * This table combines a list of headers with a TableView to show certain roles in a table.
+ * The columns of the table can be resized.
+ * When the table becomes too big, you can scroll through the table. When a column becomes too small, the contents of
+ * the table are elided.
+ * The table gets Cura's themeing.
+ */
+Item
+{
+    id: tableScrollView
+
+    required property var columnHeaders //The text to show in the headers of each column.
+    property alias model: tableView.model //A TableModel to display in this table. To use a ListModel for the rows, use "rows: listModel.items"
+    property int currentRow: -1 //The selected row index.
+
+    Row
+    {
+        id: headerBar
+        Repeater
+        {
+            id: headerRepeater
+            model: columnHeaders
+            Rectangle
+            {
+                width: Math.round(tableScrollView.width / headerRepeater.count)
+                height: UM.Theme.getSize("section").height
+
+                color: UM.Theme.getColor("secondary")
+
+                Label
+                {
+                    id: contentText
+                    anchors.left: parent.left
+                    anchors.leftMargin: UM.Theme.getSize("narrow_margin").width
+                    anchors.right: parent.right
+                    anchors.rightMargin: UM.Theme.getSize("narrow_margin").width
+
+                    text: modelData
+                    font: UM.Theme.getFont("medium_bold")
+                    color: UM.Theme.getColor("text")
+                }
+                Rectangle
+                {
+                    anchors
+                    {
+                        right: parent.right
+                        top: parent.top
+                        bottom: parent.bottom
+                    }
+                    width: UM.Theme.getSize("thick_lining").width
+
+                    color: UM.Theme.getColor("thick_lining")
+
+                    MouseArea
+                    {
+                        anchors.fill: parent
+
+                        cursorShape: Qt.SizeHorCursor
+                        drag
+                        {
+                            target: parent
+                            axis: Drag.XAxis
+                        }
+                        onMouseXChanged:
+                        {
+                            if(drag.active)
+                            {
+                                parent.parent.width = Math.max(10, parent.parent.width + mouseX); //Don't go smaller than 10 pixels, to make sure you can still scale it back.
+                            }
+                            tableView.forceLayout();
+                        }
+                    }
+                }
+            }
+        }
+    }
+    TableView
+    {
+        id: tableView
+        anchors
+        {
+            top: headerBar.bottom
+            left: parent.left
+            right: parent.right
+            bottom: parent.bottom
+        }
+
+        clip: true
+        ScrollBar.vertical: UM.ScrollBar {}
+        columnWidthProvider: function(column)
+        {
+            return headerBar.children[column].width; //Cells get the same width as their column header.
+        }
+
+        delegate: Rectangle
+        {
+            height: UM.Theme.getSize("section").height
+
+            color: UM.Theme.getColor((row % 2 == 0) ? "main_background": "viewport_background")
+
+            Label
+            {
+                id: cellContent
+                anchors.fill: parent
+
+                text: display
+                verticalAlignment: Text.AlignVCenter
+                elide: Text.ElideRight
+                font: UM.Theme.getFont("default")
+                color: UM.Theme.getColor("text")
+            }
+        }
+
+    }
+}