How to make dynamic table in react js

user_15620627 0
Viewed 268

I currently want to show the table header according to the API Attributes which will show weight, length, width, and hook, I have tried but I stuck in the part how to display only the Attribute object as below image. Plz, help to teach me this. This is the result I get , but I just wanted to show the Attributes object as header . enter image description here 

const renderTableHeader = () => {
      const header = Object.keys(data.data.VariationList[0]);
      return header.map((key, index) => <th key={index}>{key.toUpperCase()}</th>)
   }
   
      return (
      
      <Table>
            <thead>
          
              <tr>{renderTableHeader()}</tr>
            </thead>
            <tbody>
              {data.data.VariationList.map((variation) => (
                <tr key={variation.VariationSKU}>
                  <td className="text-center">{variation.VariationSKU}</td>
                  <td>{variation.Attribute.Weight}</td>
                  {variation.Attribute.Diameter ? (
                    <td>{variation.Attribute.Diameter}</td>
                  ) : null}
                  {variation.Attribute.Length ? (
                    <td>{variation.Attribute.Length}</td>
                  ) : null}
                  {variation.Attribute.Size ? (
                    <td>{variation.Attribute.Size}</td>
                  ) : null}
                  {variation.Attribute.Width ? (
                    <td>{variation.Attribute.Width}</td>
                  ) : null}
                  {variation.Attribute.Hook ? (
                    <td>{variation.Attribute.Hook}</td>
                  ) : null}

                  <td className="text-right">{variation.Price}</td>
                  <td className="td-actions text-right">
                    <Button
                      className="btn "
                      color="danger"
                      data-toggle="tooltip"
                      id="tooltip542628903"
                      size="md"
                      type="button"
                      onClick={() =>
                        addToCart(data.data.ID, variation.VariationSKU)
                      }
                    >
                      ADD TO CART
                    </Button>
                  </td>
                </tr>
              ))}
            </tbody>
          </Table>
      
      )

this is the Api enter image description here

reactjs api arrays javascript
2 Answers

Just update Line number 2 of your code to use the Attribute's value :

const header = Object.keys(data.data.VariationList[0].Attribute);
user_45461320 
export default class Table extends React.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(){

 }
 
 getHeader = function(){
 
 }
 
 getRowsData = function(){
 
 }
 
 render() {
 return (
 <div>
 <table>
 <thead>
 <tr>{this.getHeader()}</tr>
 </thead>
 <tbody>
 {this.getRowsData()}
 </tbody>
 </table>
 </div>
 
 );
 }
}
const RenderRow = (props) =>{
 
}

Try this structure and pass the data from a json file into the table so that it can be updated properly. Follow these instructions for more details

user_108320400
Related