All files / components/table simple-table.jsx

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
 
 
 
 
 
1x
1x
1x
1x
1x
 
 
3x
 
 
 
 
 
 
 
 
 
 
 
 
1x
5x
15x
15x
 
 
 
5x
 
1x
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
import React from 'react';
import PropTypes from 'prop-types';
 
class SimpleTable extends React.Component {
  render() {
    const striped = this.props.striped ? ' table-striped' : '';
    const condensed = this.props.condensed ? ' table-condensed' : '';
    const bordered = this.props.bordered ? ' table-bordered' : '';
    const hovers = this.props.hovers ? ' table-hover' : '';
    const headers = this.props.headers.length > 0 ? (
      <tr>
        {this.props.headers.map((header, h) => {
          return (
            <th
              key={h}
              style={typeof header === 'string' || Object.keys(header).indexOf('width') < 0 ? null : {
                width: header.width
              }}
            >
              {typeof header === 'string' ? header : header.content}
            </th>
          );
        })}
      </tr>
    ) : null;
    const content = this.props.data.length > 0 ? this.props.data.map((dataset, ds) => {
      const cells = this.props.headers.length !== 0 ? this.props.headers.map((header, h) => {
        const cellDatum = dataset[header.id] || null;
        return <td key={h}>{cellDatum}</td>;
      }) : Object.keys(dataset).map((datum, d) => {
        return <td key={d}>{dataset[datum]}</td>;
      });
      return <tr key={ds}>{cells}</tr>;
    }) : null;
    return (
      <table className={`table${striped}${condensed}${bordered}${hovers}`}>
        <tbody>
          {headers}
          {content}
        </tbody>
      </table>
    );
  }
}
 
SimpleTable.propTypes = {
  striped: PropTypes.bool,
  condensed: PropTypes.bool,
  bordered: PropTypes.bool,
  hovers: PropTypes.bool,
  headers: PropTypes.array,
  data: PropTypes.array
};
 
SimpleTable.defaultProps = {
  striped: false,
  condensed: false,
  bordered: false,
  hovers: false,
  headers: [],
  data: []
};
 
export default SimpleTable;