react sortable tree example

Comment

0

import React, { Component } from 'react';
import SortableTree,  {toggleExpandedForAll} from 'react-sortable-tree';
import { Button, Divider} from 'semantic-ui-react';
import 'react-sortable-tree/style.css'; // This only needs to be imported once in your app
 
export default class SortTree extends Component {
  constructor(props) {
    super(props);
 
    this.state = {
      treeData: [
        { title: 'Comic Books', children: [{ title: 'Amazing Spider-Man' },{ title: 'The Incredible Hulk' },{ title: 'Action Comics' },{ title: 'Batman' },{ title: 'New Avengers' }] },
        { title: 'Historical Fiction', children: [{ title: 'The Help' },{ title: 'All the Light We Cannot See' },{ title: ' The Color Purple' },{ title: ' War and Peace' }] },
      ],
    };
  }

  expandAndCollapse = (expanded) => {
    this.setState({
      treeData: toggleExpandedForAll({
        treeData: this.state.treeData,
        expanded,
      }),
    });
   };
 
  render() {
    return (
      <div style={{ height: 800 }}>
        <h2>React Sortable Tree</h2>
        <Divider></Divider>
        <Button size='mini' color='blue' onClick={() => { this.expandAndCollapse(true); }}>Expand all</Button>
        <Button size='mini' color='blue' onClick={() => { this.expandAndCollapse(false); }}>Collapse all</Button>
        <SortableTree
          treeData={this.state.treeData}
          onChange={treeData => this.setState({ treeData })}
        />
      </div>
    );
  }
}

Popularity 6/10 Helpfulness 2/10 Language javascript

Source: frugalisminds.com

Tags: javascript tree

Share

Link to this answer
Share Copy Link

Contributed on Oct 04 2022

Lively Lemur

0 Answers Avg Quality 2/10

react sortable tree example

Comment

0

import React, { Component } from 'react';
import SortableTree from 'react-sortable-tree';
import 'react-sortable-tree/style.css'; // This only needs to be imported once in your app
 
export default class SortTree extends Component {
  constructor(props) {
    super(props);
 
    this.state = {
      treeData: [
        { title: 'Comic Books', children: [{ title: 'Amazing Spider-Man' },{ title: 'The Incredible Hulk' },{ title: 'Action Comics' },{ title: 'Batman' },{ title: 'New Avengers' }] },
        { title: 'Historical Fiction', children: [{ title: 'The Help' },{ title: 'All the Light We Cannot See' },{ title: ' The Color Purple' },{ title: ' War and Peace' }] },
      ],
    };
  }
 
  render() {
    return (
      <div style={{ height: 800 }}>
        <SortableTree
          treeData={this.state.treeData}
          onChange={treeData => this.setState({ treeData })}
        />
      </div>
    );
  }
}

Popularity 8/10 Helpfulness 4/10 Language javascript

Source: frugalisminds.com

Tags: tree javascript t

Share

Link to this answer
Share Copy Link

Contributed on Oct 04 2022

Lively Lemur

0 Answers Avg Quality 2/10

react sortable tree example

Comment

0

import React, { Component } from 'react';
import SortableTree, { toggleExpandedForAll } from 'react-sortable-tree';
import { Button, Divider, Input } from 'semantic-ui-react';
import 'react-sortable-tree/style.css';

export default class SortTree extends Component {
  constructor(props) {
    super(props);

    this.state = {
      searchString: '',
      searchFocusIndex: 0,
      treeData: [
        { title: 'Comic Books', children: [{ title: 'Amazing Spider-Man' }, { title: 'The Incredible Hulk' }, { title: 'Action Comics' }, { title: 'Batman' }, { title: 'New Avengers' }] },
        { title: 'Historical Fiction Books', children: [{ title: 'The Help' }, { title: 'All the Light We Cannot See' }, { title: ' The Color Purple' }, { title: ' War and Peace' }] },
      ],
    };
  }

  expandAndCollapse = (expanded) => {
    this.setState({
      treeData: toggleExpandedForAll({
        treeData: this.state.treeData,
        expanded,
      }),
    });
  };

  updateTreeData(treeData) {
    this.setState({ treeData });
  }

  render() {
    const { searchString, searchFocusIndex, treeData } = this.state;
    return (
      <div style={{ height: 800 }}>
        <div style={{ flex: '0 0 auto', padding: '0 15px' }}>
          <h2>React Sortable Tree</h2>
          <Divider></Divider>
          <Button size='mini' color='blue' onClick={() => { this.expandAndCollapse(true); }}>Expand all</Button>
          <Button size='mini' color='blue' onClick={() => { this.expandAndCollapse(false); }}>Collapse all</Button>&nbsp;&nbsp;&nbsp;
          <Input size='mini' placeholder='Search' value={searchString}
            onChange={event => this.setState({ searchString: event.target.value })}/>
        </div> 
        <Divider></Divider>
        <SortableTree
          searchQuery={searchString}
          onChange={this.updateTreeData}
          searchFocusOffset={searchFocusIndex}
          treeData={treeData}
          onChange={treeData => this.setState({ treeData })}
        />
      </div>
    );
  }
}

Popularity 6/10 Helpfulness 3/10 Language javascript

Source: frugalisminds.com

Tags: javascript tree

Share

Link to this answer
Share Copy Link

Contributed on Oct 04 2022

Lively Lemur

0 Answers Avg Quality 2/10

react sortable tree example

Comment

0

import React, { Component } from 'react';
import SortableTree,  {toggleExpandedForAll} from 'react-sortable-tree';
import { Button, Divider} from 'semantic-ui-react';
import 'react-sortable-tree/style.css'; // This only needs to be imported once in your app
 
export default class SortTree extends Component {
  constructor(props) {
    super(props);
 
    this.state = {
      treeData: [
        { title: 'Comic Books', children: [{ title: 'Amazing Spider-Man' },{ title: 'The Incredible Hulk' },{ title: 'Action Comics' },{ title: 'Batman' },{ title: 'New Avengers' }] },
        { title: 'Historical Fiction', children: [{ title: 'The Help' },{ title: 'All the Light We Cannot See' },{ title: ' The Color Purple' },{ title: ' War and Peace' }] },
      ],
    };
  }

  expandAndCollapse = (expanded) => {
    this.setState({
      treeData: toggleExpandedForAll({
        treeData: this.state.treeData,
        expanded,
      }),
    });
   };
 
  render() {
    return (
      <div style={{ height: 800 }}>
        <h2>React Sortable Tree</h2>
        <Divider></Divider>
        <Button size='mini' color='blue' onClick={() => { this.expandAndCollapse(true); }}>Expand all</Button>
        <Button size='mini' color='blue' onClick={() => { this.expandAndCollapse(false); }}>Collapse all</Button>
        <SortableTree
          treeData={this.state.treeData}
          onChange={treeData => this.setState({ treeData })}
        />
      </div>
    );
  }
}

Popularity 6/10 Helpfulness 1/10 Language javascript

Source: frugalisminds.com

Tags: tree javascript

Share

Link to this answer
Share Copy Link

Contributed on Oct 04 2022

Lively Lemur

0 Answers Avg Quality 2/10

react sortable tree example

Contents

More Related Answers

react sortable tree example

Closely Related Answers

react sortable tree example

react sortable tree example

react sortable tree example

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.