Make look of Antd 3.x Tree to look like TreeTable - css

I have some existing code that renders Antd 3.x Tree. It uses lot of Tree props to manage the expand and collapse. Now I would like to show each Node(all nodes) separated by a line(to look similar to a Table) so all nodes are separated row wise. If I try to style "TreeNode", it obviously only applies to the node and since the arrangement of parent-child node is relative, it doesn't look like a table(row separated). please advice. TIA
Please see the link
My last option would be to switch from Tree to Table with Children

Related

how to implement hierarchy lines in ag-grid tree table

I'm trying to implement ag-grid table in React , but I want to add hierarchy lines between parent and children See example
Is that possible to do such things with ag-grid?
Thanks in advance.

How do you make an expanded row in Material Design Lite Data Table

I would like to create a mdl-data-table such that when I click on it.
My guess is just to add a row with colspan == number of columns when I choose to expand the row. I was wondering if there was a better version than that. Something that makes it look like that it is expanded with some existing styles rather than creating a new style.
In addition, if it can be "animated" as a slide down that pushes the other elements that would be a bonus.
Note the answer does not have to handle the clicking part, but just the "expanded" part

JavaFX8 tree table remove disclosure node indentation

The disclosure node is placed in a separate column which for root items contain that arrow and for child items - some data. Currently there's an indentation between arrow and data(see image below).
How can I remove that? Thanks.
I looked high and low for a solution to this my self and finally found it by looking at the source for the skin for the TreeTableRow. Apparently there is a css property called -fx-indent that will do what you need.
This is how I achieved a similar result to what I believe you are trying to do:
.tree-table-row-cell{
-fx-indent: -20;
}
Obviously you need to figure out a better value than -20 but that did the trick in my proof of concept.
I hope this helps.

qt : expandable/collapsable listview

I hope to create a "NEW" listview like QML Exmaple with native Qt classes.
Exactly I want to make a listview which works like below.
It looks like a QML example but slightly differs. QListView has a limitation for it's layout, right? I want a hint for overcoming the problem.
You'd want to use GridView instead of ListView. That'll get you a step closer to making your UI look like what you have designed. However currently Qt Quick only supports fixed cell sizes of grid items, which means you won't be able to expand the cell size of just one item. All you can do is set up the cell size to fit the expanded item so that every grid item will take up as much space as it could possibly need. Then you can alter the dimensions of each item without worrying about fitting issues.

Flex component like a multi-selectable Accordion?

I'm looking for a component like a single-generation treeview that can collapse a section or expand any or all sections, but it would look like an Accordion: headings and canvas "pages".
Obviously, each page would not take up the entire height of the container; they would be fixed height.
Perhaps I am not using the correct terminology (and hence the wrong search terms).
All suggestions are welcome.
You could try a VBox with multiple WindowShade components from the flexlib library, like in this example. You'd need to tweak the styles so it looks more accordian-like though.

Resources