CODEWITHSUNDEEP
javascriptreactjs
Daniel
Daniel

Reputation: 6039

Not showing borders of table

I have written the following code (ES6) to show a bunch of things in a JSON file within a table: 

var tablesGlobal2 = 
[
  {"titleRow":[{"string":"Country","alignment":-1},{"string":"Hemisphere","alignment":2}],
  "contentMatrix":[[{"string":"USA","alignment":-1},{"string":"North","alignment":2}],[{"string":"Brazil","alignment":0},{"string":"South","alignment":0}]]},
  {"titleRow":[{"string":"Season","alignment":0},{"string":"Month","alignment":0}],
  "contentMatrix":[[{"string":"Spring","alignment":-1},{"string":"March","alignment":-1}],[{"string":"Spring","alignment":1},{"string":"April","alignment":-1}],[{"string":"Spring","alignment":0},{"string":"May","alignment":2}],[{"string":"Summer","alignment":2},{"string":"June","alignment":2}],[{"string":"Summer","alignment":0},{"string":"July","alignment":0}],[{"string":"Summer","alignment":1},{"string":"August","alignment":2}],[{"string":"Fall","alignment":0},{"string":"September","alignment":0}],[{"string":"Fall","alignment":-1},{"string":"October","alignment":-1}],[{"string":"Fall","alignment":1},{"string":"November","alignment":0}],[{"string":"Winter","alignment":-1},{"string":"December","alignment":2}],[{"string":"Winter","alignment":-1},{"string":"January","alignment":0}],[{"string":"Winter","alignment":2},{"string":"February","alignment":-1}]]}
];

class SampleApplication extends React.Component {
  constructor(props) {
    super(props);
    this.state = { tables: tablesGlobal2 };
  }
  ShowRowsOfATable(row) { 
    var rows = [];
    row.forEach(function(cell) {
      rows.push(<td> {JSON.stringify(cell.string)} </td> );
    }); 
    return ( {rows} );
  }
  ShowATable(table) { 
    var rows = [];
    var self = this;
    table.contentMatrix.forEach(function(row) {
      var goo = <tr> {self.ShowRowsOfATable(row)} </tr>;
      rows.push(goo);
    }); 
    return (<table> {rows} </table>);  
  } 

  ShowTables(tables) {
    var self = this;
    var rows = [];
    tables.forEach(function(table) {
      rows.push( self.ShowATable(table) );
    });  

    var tableRows = <div>{rows}</div>;
    return (
      <div>  
        {tableRows} 
      </div> 
      ); 
  }
  render() {
    var ts = this.ShowTables(this.state.tables);
    return ( <div> {ts} </div> );
  }
}

React.render(<SampleApplication />, document.body);

Here is a sample output: https://jsfiddle.net/danyaljj/0rb0uo8a/ enter image description here

I want to add specifications to the table. For example when I change <table> to <table border="10"> the output still does not change. Similarly, when I change <td> to <td bgcolor="#FF0000">.

Any idea where I am doing it wrong?

Upvotes: 0

Views: 11958

Answers (1)

Oleg Ongoza
Oleg Ongoza

Reputation: 11

You can find all Table Attributes here Click here. As said Felix Kling "border" is deprecated ;(

But You can use "borderWidth" and "borderStyle"

<table style={{"borderWidth":"1px", 'borderColor':"#aaaaaa", 'borderStyle':'solid'}}></table>

Upvotes: 1

Related Questions