/**
 * Created by baoyinghai on 6/28/17.
 */
import React from 'react';

export default class Table extends React.Component {

  _renderColGroup = dataSource => {
    return dataSource && Object.keys(dataSource).map(key => {
      return (
        <colgroup key={key} style={{ width: '500px' }} />
      );
    });
  };

  _renderThread = dataSource => {
    return (
      <thead>
        <tr>
          {dataSource && Object.keys(dataSource).map(key => {
            return (
              <th key={key}>
                <span>{key}</span>
              </th>
            );
          })}
        </tr>
      </thead>
    );
  };

  _renderBody = dataSource => {
    return (
      <tbody>
        <tr>
          {dataSource && Object.keys(dataSource).map(key => {
            return (
              <td key={key}>
                <span>{dataSource[key]}</span>
              </td>
            );
          })}
        </tr>
      </tbody>
    );
  };

  render() {
    const { dataSource = {} } = this.props;
    return (
      <table>
        {this._renderColGroup(dataSource)}
        {this._renderThread(dataSource)}
        {this._renderBody(dataSource)}
      </table>
    );
  }
}
