Allow for better visual customization about react-sortable-tree HOT 8 CLOSED

The inline styles in the rows there are a result of using react-virtualized to render them. However, this doesn't actually interfere too much with your customization options:

• The height of the rows can be set with the rowHeight prop, which is given directly to react-virtualized. It becomes a bit tricky if you want flexible row heights, however. Let me know if this is a must-have for you, because I might be able to make rowHeight handle a callback that will give you the row info one at a time, and you return the pixel height of that row. Unfortunately, complete height flexibility (without having to specify the pixel height) is near impossible with react-virtualized, and I think the library currently benefits more with virtualization than without.
• The innerStyle prop lets you add inline styles to the outer container. I used this in my project to add extra padding inside.

If you want to hide the scaffolding lines, it's kind of a hack, but you could use this:

.rst__lineBlock, .rst__lineChildren:after {
    visibility: hidden;
}

from react-sortable-tree.

It's working but it sounds like a workaround to me. I don't want to end up with a solution where I set a bit of style in CSS, some in code and the rest as properties.

It would be the best if it doesn't set any styles at all. More like jQuery sortable. Jquery sets inline styles only when you drag, otherwise, it doesn't care about styles at all.

from react-sortable-tree.

I'll admit it's not designed well for style customization right now. I don't have much experience customizing the appearance of libraries I use, so I lack in perspective in that area.

If you have some suggestions for how things should be done, I'm interested in hearing them. That said, I don't have much time to commit to making significant changes to the library, so I would need you or another interested party to write the improvements, which I could then merge.

from react-sortable-tree.

Sorry but I just drop out of the project where we used your library. I will not have time to improve styling options. If you're not interested in doing this, you may close it.

Anyway, thanks for this great component 👍

from react-sortable-tree.

I'm also thinking about customizing react-sortable-tree for a project of mine. Just for my understanding: What's the purpose of react-virtualized? Is it "just" for handling large trees?

from react-sortable-tree.

@ondrejsevcik Ok, thank you for considering it for your project.

@msiemens It's mainly for handling large trees. As an additional benefit, forcing the scrolling area allows the library to do stuff like the row seeking when searching.

from react-sortable-tree.

@msiemens
Just in case you were having issues with the virtualization bit - I implemented a fix in v0.1.9 to disable it. By setting the isVirtualized prop to false, you can draw the tree without react-virtualized.

One thing to note, though. The following functionality worked under the assumption that the tree container would be fixed-height and scrollable, and therefore doesn't work without virtualization:

• Auto-scrolling while dragging
• Scrolling to the searchFocusOffset

Unfortunately, the styling would need some reworking to eliminate the inline styles, even without virtualization, so this doesn't offer any solution to @ondrejsevcik's issue.

from react-sortable-tree.

Going to treat this as closed due to inactivity.

from react-sortable-tree.