QTreeTable is a Quasar App Extension. It can display tree structure data in Table.
QTreeTable is a type of data table that displays hierarchical data in a tree-like structure, allowing users to view and manipulate data with parent-child relationships. It presents data in rows and columns, where each row represents a node in the tree and each column represents a specific attribute or property of the node.
Compatible with Quasar UI v2 and Vue 3.
QTreeTable is a component that allows you to display tree data in table. It use columns and rows properties like basic QTable, and rows use its field key children to define its children.
Because QTreeTable is developed based on QTable, so you can use most api of QTable.
There is one new props icon is a array contain 2 element respectively for the icon appear when row not expanded and expanded. The default value is ["add", "remove"] and you can use ['keyboard_arrow_right', 'keyboard_arrow_down'] to have a try.
Diff from QHierarchy
QHierarchy is using QMarkupTable, but this one is using QTable and can use api of QTable. And this one have a better UI interface if using dense.
quasar ext add tree-tableQuasar CLI will retrieve it from NPM and install the extension.
quasar ext remove tree-tableIf you appreciate the work that went into this project, please consider donating to Quasar.
MIT (c) ray [email protected]