myReactdemo/table-sortby2.html at master · recatJsObject/myReactdemo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/table.css"/>
</head>
<body>
<div id="app"></div>
</body>
</html>
<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
<script src="js/browser.js"></script>
<script type="text/babel">
          var Excel = React.createClass({
        displayName: 'Excel',

        propTypes: {
          headers: React.PropTypes.arrayOf(
            React.PropTypes.string
          ),
          initialData: React.PropTypes.arrayOf(
            React.PropTypes.arrayOf(
              React.PropTypes.string
            )
          ),
        },
        getInitialState: function() {
          return {
            data: this.props.initialData,
            sortby: null,
            descending: false,
          };
        },

        _sort: function(e) {
          var column = e.target.cellIndex;
          var data = this.state.data.slice();
          var descending = this.state.sortby === column && !this.state.descending;
          data.sort(function(a, b) {
            return descending
              ? (a[column] < b[column] ? 1 : -1)
              : (a[column] > b[column] ? 1 : -1);
          });
          this.setState({
            data: data,
            sortby: column,
            descending: descending,
          });
        },

        render: function() {
          var state = this.state;
          return (
            <table>
              <thead onClick={this._sort}>
                <tr>{
                  this.props.headers.map(function(title, idx) {
                    return (
                      <th key={idx}>
                      {
                        state.sortby === idx
                          ? state.descending
                            ? title + ' \u2191'
                            : title + ' \u2193'
                          : title
                      }
                      </th>
                    );
                  })
                }</tr>
              </thead>
              <tbody>
              {
                this.state.data.map(function(row, idx) {
                  return (
                    <tr key={idx}>{
                      row.map(function(cell, idx) {
                        return <td key={idx}>{cell}</td>;
                      })
                    }</tr>
                  );
                })
              }
              </tbody>
            </table>
          );
        }
      });

      var headers = [
        "Book", "Author", "Language", "Published", "Sales"
      ];

      var data = [
        ["The Lord of the Rings", "J. R. R. Tolkien", "English", "1954-1955", "150 million"],
        ["Le Petit Prince (The Little Prince)", "Antoine de Saint-Exupéry", "French", "1943", "140 million"],
        ["Harry Potter and the Philosopher's Stone", "J. K. Rowling", "English", "1997", "107 million"],
        ["And Then There Were None", "Agatha Christie", "English", "1939", "100 million"],
        ["Dream of the Red Chamber", "Cao Xueqin", "Chinese", "1754-1791", "100 million"],
        ["The Hobbit", "J. R. R. Tolkien", "English", "1937", "100 million"],
        ["She: A History of Adventure", "H. Rider Haggard", "English", "1887", "100 million"],
      ];

      ReactDOM.render(
        React.createElement(Excel, {
          headers: headers,
          initialData: data,
        }),
        document.getElementById("app")
      );
</script>