Comments (8)
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 makerowHeight
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.
Related Issues (20)
- How to use props with redux ? HOT 1
- React version dependency issue HOT 5
- how to make search nodes only starting from one node which we clicked ?
- Is it possible to make the react sortable tree ui less big with a setting : sm, md, bg ?
- React dnd upgrade HOT 2
- How to customize move handler? 🤔 HOT 2
- div is fadeout when drag
- Insert node at specific index under parent node.Iindex HOT 1
- It is possible to use a node as ReactRef() ? HOT 1
- Give Children another label/property name
- Failed to minify the code error HOT 2
- getTreeFromFlatData set rootKey as null
- Support multiple dragging
- Option to snap automatically to nearest possible level HOT 1
- Support React 18 HOT 1
- new child is added to the parent when collapsing the parent HOT 1
- Using the react-sortable-tree in react 18 HOT 4
- is it possible to display the tree as a vertical tree diagram?
- About maintenance of this library
- Could not resolve dependency: React 18 with [email protected] HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-sortable-tree.