Естественно сортируйте панд DataFrame по индексу

Вот мой подход с использованием ES6.

import React, { Component } from 'react';
// you should use ReactDOM.render instad of React.renderComponent
import ReactDOM from 'react-dom';

class ToggleBox extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // toggle box is closed initially
      opened: false,
    };
    // http://egorsmirnov.me/2015/08/16/react-and-es6-part3.html
    this.toggleBox = this.toggleBox.bind(this);
  }

  toggleBox() {
    // check if box is currently opened
    const { opened } = this.state;
    this.setState({
      // toggle value of `opened`
      opened: !opened,
    });
  }

  render() {
    const { title, children } = this.props;
    const { opened } = this.state;
    return (
      

        

          {title}
        
        {opened && children && (
          

            {children}
          
        )}
      
    );
  }
}

ReactDOM.render((
  
    
Some content
  
), document.getElementById('app'));

Демо: http://jsfiddle.net/kb3gN/16688/

Я использую код типа:

{opened && }

Это сделает SomeElement только в том случае, если opened истинно. Он работает из-за того, как JavaScript разрешает логические условия:

true && true && 2; // will output 2
true && false && 2; // will output false
true && 'some string'; // will output 'some string'
opened && ; // will output SomeElement if `opened` is true, will output false otherwise

Поскольку React игнорирует false, я нахожу его очень хорошим способом условно отображать некоторые элементы.