CODEWITHSUNDEEP
reactjstreetablereact-table
Dexter
Dexter

Reputation: 25

How to toggle the arrows when children is expanded / collapsed in 'cp-react-tree-table'

Am trying to create a Tree Table utilizing the react plugin, 'cp-react-tree-table'. I was able to render the table fine. But the plugin doesnt provide an option to show indicative arrows ( item expanded / collapsed )

Here is a sample of the original Plugin: https://jsfiddle.net/constantin_p/wzjgspe9/

  renderIndexColumn = (data, metadata, toggleChildren) => {
    return (
      <div style={{ paddingLeft: (metadata.depth * 25) + 'px'}} className="cell-wrapper">
        <span className="toggle-button-wrapper" style={{ width: '80px'}}>
          {(metadata.hasChildren)
            ? (
                <span onClick={toggleChildren}>[toggle]</span>
              )
            : ''
          }
        </span>

        <span>{data.name}</span>
      </div>
    );
  }

I modified it to show indicative arrows.

But now am having trouble in toggling the arrows based on the node is expanded or collapsed.

Here is the modified code : https://jsfiddle.net/5yvgbrtk/

  renderIndexColumn = (data, metadata, toggleChildren) => {
    return (
      <div style={{ paddingLeft: (metadata.depth * 25) + 'px'}} className="cell-wrapper">
        <span className="toggle-button-wrapper" style={{ width: '80px'}}>
          {(metadata.hasChildren)
            ? (
                <span onClick={(event) => {toggleChildren(); this.arrowChange(event)}}>
                <i className="material-icons">arrow_right</i>
                </span>
              )
            : ''
          }
        </span>

        <span>{data.name}</span>
      </div>
    );
  }

   arrowChange = (event) => {
      event.target.classList.toggle('expanded')
  };

The current solution works only when every open node is closed (icons toggle on click). This creates a problem when outer node is closed without closing the inner nodes.

Is there a way we could identify if the node's children are shown / hidden, based on which I could change the arrow icons.

I know the question is very specific to a plugin and not very generic. But any help would be much appreciated. Thanks

Upvotes: 0

Views: 1519

Answers (1)

Dexter
Dexter

Reputation: 25

Based on the request, this feature has been now added to cp-react-tree-table in their latest release.

A new method - 'hasVisibleChildren' is now added to check & toggle the arrows.

Fiddle with updated feature : https://jsfiddle.net/constantin_p/Lystd2j9/

<i className="material-icons">
   {metadata.hasVisibleChildren ? 'arrow_drop_down' : 'arrow_right' }
</i>

Upvotes: 1

Related Questions