marchaos / react-virtualized-sticky-tree

A React component for efficiently rendering tree like structures with support for position: sticky
MIT License
152 stars 12 forks source link

Custom renderer for parent-node and list-node #26

Closed promontis closed 4 years ago

promontis commented 4 years ago

First of all, thanks for this library! It is exactly what I was looking for!

I'm currently trying to add some tree lines (with offsets), but it is currently rather difficult to do so.

What would make it easier is if we could provide a custom renderer for the parent-node and list-node divs. That way I could add some SVG lines or divs myself.

Is that something you are willing to add? I could also do a PR if needed.

marchaos commented 4 years ago

in the renderer that you pass in, you get all the info needed to switch on the node type and return whatever each node type needs.

DiegoAndai commented 2 years ago

Hi! sorry for the very late follow up, but I still haven't found a way to do what OP was trying to do. The parent node (the one with className "rv-sticky-parent-node" rendered by renderChildWithChildren) is always the same div, with no way to customize it. And the same for list nodes. What I'm trying to find out how to do is that for nodes with children instead of

// current supported behaviour
// the parent node and node list divs are provided by the library
// ParentComponent, ChildrenComponentA, and ChildrenComponentB are returned by the rowRenderer function

<div className="rv-sticky-parent-node">
    <ParentComponent />
    <div className="rv-sticky-node-list">
        <ChildrenComponentA />
        <ChildrenComponentB />
    </div>
</div>

I had the option of either using or adding a custom parent node:

// use a custom parent node

<MyCustomParentNode className="rv-sticky-parent-node">
    <ParentComponent />
    <div className="rv-sticky-node-list">
        <ChildrenComponentA />
        <ChildrenComponentB />
    </div>
</MyCustomParentNode>
// add a custom parent node

<div className="rv-sticky-parent-node">
    <MyCustomParentNode>
        <ParentComponent />
        <div className="rv-sticky-node-list">
            <ChildrenComponentA />
            <ChildrenComponentB />
        </div>
    </MyCustomParentNode>
</div>

And the same for the node list

// use a custom the node list

<div className="rv-sticky-parent-node">
    <ParentComponent />
    <MyCustomNodeList className="rv-sticky-node-list">
        <ChildrenComponentA />
        <ChildrenComponentB />
    </MyCustomNodeList>
</div>
// add a custom node list

<div className="rv-sticky-parent-node">
    <ParentComponent />
    <div className="rv-sticky-node-list">
        <MyCustomNodeList>
            <ChildrenComponentA />
            <ChildrenComponentB />
        </MyCustomNodeList>
    </div>
</div>

And I think this is not supported right now, please correct me if I'm wrong. I will be working on a PR proposal to support this in the meantime as I really need it. Thanks in advance and thanks for creating the library in the first place! 😊