{"size": 939, "ext": "js", "max_stars_repo_path": "src/components/base/Table.js", "max_stars_repo_name": "simposk/Adapt-Final-Project", "max_stars_repo_stars_event_min_datetime": "2018-12-22T20:01:41.000Z", "max_stars_repo_stars_event_max_datetime": "2018-12-22T20:01:41.000Z", "max_issues_repo_path": "src/components/base/Table.js", "max_issues_repo_name": "simposk/Adapt-Final-Project", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/base/Table.js", "max_forks_repo_name": "simposk/Adapt-Final-Project", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 34.7777777778, "max_line_length": 201, "alphanum_fraction": 0.381256656}
/* eslint-disable */
import React from 'react';

const Table = (props) => {
    const { data } = props;
    return (
        <table width="100%" className="rwd-table">
            <tbody>
                <tr className="table__header">
                    <th>Date</th>
                    <th>Price</th>
                    <th className="change">Change</th>
                </tr>
                {
                    data.length > 0 && data.map(item => (
                        <tr key={item.time}>
                        <td>{item.date}</td>
                        <td>${item.close}</td>
                        <td className={item.changePct[0] === '-' ? 'red' : 'green'} >{ item.changePct[0] === '-' ? `${item.changePct.substring(0, 5)}% ▼` : `${item.changePct.substring(0, 4)}% ▲`}</td>
                    </tr>
                ))}
            </tbody>
        </table>
    );
  };

export default Table;