Delegate FolderListModel in TableView - qt

Question

I'm learning Qt Quick to make a file manager, but I have no experience in QML or GUI in general. The first step is to list the content of a folder, using FolderListModel. I got the example code working using ListView, but naturally I want to display multiple fields in addition to the name, e.g. size, time, and so on. Thus, I'm thinking of using TableView.
However, it's not clear to me how to delegate each entry as a row in TableView. Currently I'm simply using itemDelegate to display fileName, and the resultant is that in each row, all the columns repeat the name of the entry. So I think rowDelegate is the correct way, but how do I make a proper delegate Component for that purpose? Conceptually I'd like to specify an array of fields, e.g. [model.fileName, model.fileSize] corresponding to the table columns. Is this achievable?
For clarify I'm posting the code below:
import QtQuick 2.4
import QtQuick.Controls 1.4
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.1
import Qt.labs.folderlistmodel 2.1
ApplicationWindow {
visible: true
width: 900
height: 600
title: qsTr("Hello World")
Item {
anchors.fill: parent
width: 900
height: 600
SplitView {
id: splitView1
anchors.fill: parent
TabView {
id: tabView1
width: splitView1.width / 2
Tab {
title: qsTr("Home")
TableView {
id: tableView1
width: splitView1.width / 2
TableViewColumn {
role: "name"
title: qsTr("Name")
width: tableView1.width * 0.75
}
TableViewColumn {
role: "size"
title: qsTr("Size")
width: tableView1.width * 0.25
}
FolderListModel {
id: folderModel2
folder: "file:/home/username"
nameFilters: ["*"]
showHidden: true
}
Component {
id: fileDelegate2
Text {
text: model.fileName
}
}
model: folderModel2
itemDelegate: fileDelegate2
}
}
}
}
}
}

Answer 1

The documentation mentions that the following roles are available:
List item
fileName
filePath
fileURL (since Qt 5.2)
fileBaseName
fileSuffix
fileSize
fileModified
fileAccessed
fileIsDir
So you don't need to have custom delegates to display that information, just set the role property of TableViewColumn appropriately:
import QtQuick 2.4
import QtQuick.Controls 1.4
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.1
import Qt.labs.folderlistmodel 2.1
ApplicationWindow {
visible: true
width: 900
height: 600
title: qsTr("Hello World")
Item {
anchors.fill: parent
width: 900
height: 600
SplitView {
id: splitView1
anchors.fill: parent
TabView {
id: tabView1
width: splitView1.width / 2
Tab {
title: qsTr("Home")
TableView {
id: tableView1
width: splitView1.width / 2
TableViewColumn {
role: "fileName"
title: qsTr("Name")
width: tableView1.width * 0.75
}
TableViewColumn {
role: "fileSize"
title: qsTr("Size")
width: tableView1.width * 0.25
}
FolderListModel {
id: folderModel2
folder: "file:/home/username"
nameFilters: ["*"]
showHidden: true
}
model: folderModel2
}
}
}
}
}
}