import React, { Component } from 'react';
import PropTypes from 'prop-types';
import "./HtmlTableView.css";
import Table from 'react-bootstrap/es/Table';

class HtmlTableView extends Component {
  static propTypes = {
    columns: PropTypes.array.isRequired,
    values: PropTypes.array.isRequired,
    styles: PropTypes.object,
  };

  render() {
    const styles = this.props.styles || {};
    return (
      <Table hover className="HtmlTableView" style={styles['table']}>
        <tbody>
        <tr style={styles['tr']}>
          { this.props.columns.map((c, idx) => {
              let style;
              if (idx === 0) {
                style = styles['th-first'] || styles['th'];
              } else {
                style = styles['th'];
              }
              return <th key={idx} style={style}>{c}</th>;
            }
          )}
        </tr>
          { this.props.values.map((vArray, index) => (
            <tr key={index} style={styles['tr']}>
              { vArray.map((v, idx) => {
                let style;
                if (idx === 0) {
                  style = styles['td-first'] || styles['td'];
                } else {
                  style = styles['td'];
                }
                  return <td key={idx} style={style}>{isNaN(v) ? "" : v}</td>;
                }
              )}
            </tr>
          ))}
        </tbody>
      </Table>
    );
  }
}

export default HtmlTableView;

@@ -1014,32 +1014,34 @@
                 
+  
 let style;%0A     
@@ -1027,32 +1027,34 @@
      let style;%0A
+  
                 
@@ -1062,32 +1062,34 @@
 f (idx === 0) %7B%0A
+  
                 
@@ -1142,32 +1142,34 @@
                 
+ 
+ 
 %7D else %7B%0A       
@@ -1153,32 +1153,34 @@
        %7D else %7B%0A
+  
                 
@@ -1195,32 +1195,34 @@
 = styles%5B'td'%5D;%0A
+  
                 
@@ -1281,24 +1281,8 @@
 e%7D%3E%7B
-isNaN(v) ? %22%22 : 
 v%7D%3C/

Fix HtmlTableView bug that was hiding metric and param names on Run page (#273)