import React from 'react';
import { map } from 'lodash';

import CampaignRow from './CampaignRow';
import EventRow from './EventRow';
import './table.scss';

class Table extends React.Component {
  render() {
    const heading = this.props.headings.map((title, index) => {
      return <th key={index} className="table__cell"><h3 className="heading -delta">{title}</h3></th>
    });

    const rows = this.props.data.map((content, index) => {
      if (this.props.type === 'campaigns') {
        return <CampaignRow key={index} data={content} />;
      }

      return <EventRow key={index} data={content} />;

    });

    return (
      <table className="table">
        <thead>
          <tr className="table__header">
            {heading}
          </tr>
        </thead>
        <tbody>
            {rows}
        </tbody>
      </table>
    )
  }
}

export default Table;

@@ -49,16 +49,52 @@
 lodash';
+%0Aimport PropTypes from 'prop-types';
 %0A%0Aimport
@@ -409,24 +409,97 @@
 h%3E%0A    %7D);%0A%0A
+    // @TODO - Rethink this. Why are CampaignRow and EventRow different?%0A
     const ro
@@ -891,26 +891,24 @@
     %3Ctbody%3E%0A
-  
           %7Br
@@ -912,16 +912,16 @@
  %7Brows%7D%0A
+
         
@@ -954,19 +954,252 @@
   )%0A  %7D%0A
-
 %7D%0A%0A
+Table.propTypes = %7B%0A  headings: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types%0A  data: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types%0A  type: PropTypes.string.isRequired,%0A%7D;%0A%0A%0A
 export d

Add proptype validation to Table component