如何在动态Json Table React JS和表格单元格数据比较中添加Row Span

Question

the JSON data which i get from back-end has dynamic keys and value. the below data is one of the example method data which i need to convert the first column value as rowSpan that is my requirement. is this possible for rowspan and comparing the numeric value of the cell data and add icon for it..? please give me solution

data= [
{carrier: "Emirates", range: "min", "Jul 29": 1275, "Jul 30": 1325},
{carrier: "Emirates",  range: "med", "Jul 29": 1275, "Jul 30": 1338},
{carrier: "Emirates",  range: "max", "Jul 29": 1275, "Jul 30": 1375},
{carrier: "rehlat",  range: "min", "Jul 29": 1138, "Jul 30": 1306},
{carrier: "rehlat",  range: "med", "Jul 29": 1198, "Jul 30": 1330},
{carrier: "rehlat", range: "max", "Jul 29": 1258, "Jul 30": 1354}]

the code which i'm using for it is given below

const RenderRow = (props) =>{
 return props.keys.map((key, index)=>{
 return <td>{props.data[key]}</td>
 })
}


class Mycomponent extends Component {
 
 constructor(props){
 super(props);
 this.getHeader = this.getHeader.bind(this);
 this.getRowsData = this.getRowsData.bind(this);
 this.getKeys = this.getKeys.bind(this);
 }
 
 getKeys = function(){
    return Object.keys(this.props.data[0]);
 }
 
 getHeader = function(){
    var keys = this.getKeys();
 return keys.map((key, index)=>{
 return <th key={key}>{key.toUpperCase()}</th>
 })
 }
 
 getRowsData = function(){
  var items = this.props.data;
 var keys = this.getKeys();
 return items.map((row, index)=>{
 return <tr key={index}><RenderRow key={index} data={row} keys={keys}/></tr>
 })
 }
 
 render() {
 return (
 <div>
 <table>
 <thead>
 <tr>{this.getHeader()}</tr>
 </thead>
 <tbody>
 {this.getRowsData()}
 </tbody>
 </table>
 </div>
 
 );
 }
}

my Output enter image description here

expected output enter image description here

code added in codesandbox enter link description here

Answer 1

I'm sure it can take lot of improvement but as a start try this codesandbox

https://codesandbox.io/s/serene-gauss-ffs5d

   let keys = this.state.data.reduce(function(a, e) {
      let estKey = e["carrier"];
      (a[estKey] ? a[estKey] : (a[estKey] = null || [])).push(e);
      return a;
    }, {});

The whole idea is to group by your desired property and then, after you know how many items you have based on your property, you can loop and render equivalent rows and tds.

return Object.keys(keys).map((key, index) => {
  return keys[key].map((obj, index2) => {
    return (
      <tr key={index} style={{ borderWidth: 1, borderColor: "red" }}>
        <RenderRow
          key={index2}
          idx={index2}
          data={obj}
          keys={key}
          rows={keys[key].length}
        />
      </tr>
    );
  });
});

So you take all the keys that you grouped by your array and then you apply a map function. For each key, you take the equivalent list (that's what the reduce function does) and loop through that list. Each list should create list.length rows but only the first row should have the <td> with the rowSpan attribute.

The key here also is to know that you need to render only 1 time the td with rownSpan property, so you need to check the index while map -ing.