TableView.qml 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
  1. //Copyright (C) 2022 Ultimaker B.V.
  2. //Cura is released under the terms of the LGPLv3 or higher.
  3. import Qt.labs.qmlmodels 1.0
  4. import QtQuick 2.15
  5. import QtQuick.Controls 2.15
  6. import UM 1.5 as UM
  7. /*
  8. * A re-sizeable table of data.
  9. *
  10. * This table combines a list of headers with a TableView to show certain roles in a table.
  11. * The columns of the table can be resized.
  12. * When the table becomes too big, you can scroll through the table. When a column becomes too small, the contents of
  13. * the table are elided.
  14. * The table gets Cura's themeing.
  15. */
  16. Item
  17. {
  18. id: tableBase
  19. required property var columnHeaders //The text to show in the headers of each column.
  20. property alias model: tableView.model //A TableModel to display in this table. To use a ListModel for the rows, use "rows: listModel.items"
  21. property int currentRow: -1 //The selected row index.
  22. property var onDoubleClicked: function(row) {} //Something to execute when double clicked. Accepts one argument: The index of the row that was clicked on.
  23. property bool allowSelection: true //Whether to allow the user to select items.
  24. property string sectionRole: ""
  25. property alias flickableDirection: tableView.flickableDirection
  26. Row
  27. {
  28. id: headerBar
  29. Repeater
  30. {
  31. id: headerRepeater
  32. model: columnHeaders
  33. Rectangle
  34. {
  35. width: Math.max(1, Math.round(tableBase.width / headerRepeater.count))
  36. height: UM.Theme.getSize("section").height
  37. color: UM.Theme.getColor("main_background")
  38. border.width: UM.Theme.getSize("default_lining").width
  39. border.color: UM.Theme.getColor("thick_lining")
  40. UM.Label
  41. {
  42. id: contentText
  43. anchors.left: parent.left
  44. anchors.leftMargin: UM.Theme.getSize("default_margin").width
  45. anchors.right: parent.right
  46. anchors.rightMargin: UM.Theme.getSize("narrow_margin").width
  47. wrapMode: Text.NoWrap
  48. text: modelData
  49. font: UM.Theme.getFont("medium_bold")
  50. elide: Text.ElideRight
  51. }
  52. Item //Resize handle.
  53. {
  54. anchors
  55. {
  56. right: parent.right
  57. top: parent.top
  58. bottom: parent.bottom
  59. }
  60. width: UM.Theme.getSize("default_lining").width
  61. MouseArea
  62. {
  63. anchors.fill: parent
  64. cursorShape: Qt.SizeHorCursor
  65. drag
  66. {
  67. target: parent
  68. axis: Drag.XAxis
  69. }
  70. onMouseXChanged:
  71. {
  72. if(drag.active)
  73. {
  74. let new_width = parent.parent.width + mouseX;
  75. let sum_widths = mouseX;
  76. for(let i = 0; i < headerBar.children.length; ++i)
  77. {
  78. sum_widths += headerBar.children[i].width;
  79. }
  80. if(sum_widths > tableBase.width)
  81. {
  82. new_width -= sum_widths - tableBase.width; //Limit the total width to not exceed the view.
  83. }
  84. let width_fraction = new_width / tableBase.width; //Scale with the same fraction along with the total width, if the table is resized.
  85. parent.parent.width = Qt.binding(function() { return Math.max(10, Math.round(tableBase.width * width_fraction)) });
  86. }
  87. }
  88. }
  89. }
  90. onWidthChanged: tableView.forceLayout(); //Rescale table cells underneath as well.
  91. }
  92. }
  93. }
  94. Rectangle
  95. {
  96. color: UM.Theme.getColor("main_background")
  97. anchors
  98. {
  99. top: headerBar.bottom
  100. topMargin: -UM.Theme.getSize("default_lining").width
  101. left: parent.left
  102. right: parent.right
  103. bottom: parent.bottom
  104. }
  105. border.width: UM.Theme.getSize("default_lining").width
  106. border.color: UM.Theme.getColor("thick_lining")
  107. }
  108. TableView
  109. {
  110. id: tableView
  111. anchors
  112. {
  113. top: headerBar.bottom
  114. left: parent.left
  115. right: parent.right
  116. bottom: parent.bottom
  117. margins: UM.Theme.getSize("default_lining").width
  118. }
  119. flickableDirection: Flickable.AutoFlickIfNeeded
  120. contentWidth: -1 // AUto calculate the contendWidth
  121. clip: true
  122. ScrollBar.vertical: UM.ScrollBar {}
  123. columnWidthProvider: function(column)
  124. {
  125. return headerBar.children[column].width; //Cells get the same width as their column header.
  126. }
  127. delegate: Rectangle
  128. {
  129. implicitHeight: Math.max(1, cellContent.height)
  130. color: UM.Theme.getColor((tableBase.currentRow == row) ? "text_selection" : "main_background")
  131. UM.Label
  132. {
  133. id: cellContent
  134. anchors
  135. {
  136. left: parent.left
  137. leftMargin: UM.Theme.getSize("default_margin").width
  138. right: parent.right
  139. }
  140. wrapMode: Text.NoWrap
  141. text: display
  142. verticalAlignment: Text.AlignVCenter
  143. elide: Text.ElideRight
  144. }
  145. TextMetrics
  146. {
  147. id: cellTextMetrics
  148. text: cellContent.text
  149. font: cellContent.font
  150. elide: cellContent.elide
  151. elideWidth: cellContent.width
  152. }
  153. UM.TooltipArea
  154. {
  155. anchors.fill: parent
  156. acceptedButtons: Qt.LeftButton
  157. text: (cellTextMetrics.elidedText == cellContent.text) ? "" : cellContent.text //Show full text in tooltip if it was elided.
  158. onClicked:
  159. {
  160. if(tableBase.allowSelection)
  161. {
  162. tableBase.currentRow = row; //Select this row.
  163. }
  164. }
  165. onDoubleClicked:
  166. {
  167. tableBase.onDoubleClicked(row);
  168. }
  169. }
  170. }
  171. Connections
  172. {
  173. target: model
  174. function onRowCountChanged()
  175. {
  176. tableView.contentY = 0; //When the number of rows is reduced, make sure to scroll back to the start.
  177. }
  178. }
  179. }
  180. Connections
  181. {
  182. target: model
  183. function onRowsChanged()
  184. {
  185. let first_column = model.columns[0].display;
  186. if(model.rows.length > 0 && model.rows[0][first_column].startsWith("<b>")) //First item is already a section header.
  187. {
  188. return; //Assume we already added section headers. Prevent infinite recursion.
  189. }
  190. if(sectionRole === "" || model.rows.length == 0) //No section headers, or no items at all.
  191. {
  192. tableView.model.rows = model.rows;
  193. return;
  194. }
  195. //Insert section headers in the rows.
  196. let last_section = "";
  197. let new_rows = [];
  198. for(let i = 0; i < model.rows.length; ++i)
  199. {
  200. let item_section = model.rows[i][sectionRole];
  201. if(item_section !== last_section) //Starting a new section.
  202. {
  203. let section_header = {};
  204. for(let key in model.rows[i])
  205. {
  206. section_header[key] = (key === first_column) ? "<b>" + item_section + "</b>" : ""; //Put the section header in the first column.
  207. }
  208. new_rows.push(section_header); //Add a row representing a section header.
  209. last_section = item_section;
  210. }
  211. new_rows.push(model.rows[i]);
  212. }
  213. tableView.model.rows = new_rows;
  214. }
  215. }
  216. }