Hướng dẫn create table using javascript

Here is an example of drawing a table using raphael.js. We can draw tables directly to the canvas of the browser using Raphael.js Raphael.js is a javascript library designed specifically for artists and graphic designers.




    
    
    
        
    
     
    

    
paper = new Raphael[0,0,500,500];// width:500px, height:500px

var x = 100;
var y = 50;
var height = 50
var width = 100;

WriteTableRow[x,y,width*2,height,paper,"TOP Title"];// draw a table header as merged cell
y= y+height;
WriteTableRow[x,y,width,height,paper,"Score,Player"];// draw table header as individual cells
y= y+height;
for [i=1;i {
         return {key.toUpperCase[]}
      }]
   }

{this.renderTableHeader[]}

Object.Keys cung cấp cho chúng ta tất cả keys của sinh viên dưới dạng mảng và chúng tôi đã lưu trữ nó dưới dạng biến của header. Vì vập chúng ta có thể lặp lại header bằng sử dụng map[]
Bạn có thể nghĩ tại sao chúng ta không sử dụng forEach, nó cũng làm như vậy. Lý do là khi chúng tôi muốn là map[] vì nó sẽ trả về một mảng mới .Nên chúng tôi sử dụng phương thức map[], trong khi forEach không trả về bất cứ thứ gì, nó chỉ lặp lại trên các phần tử của mảng.

Kết quả:

import React, { Component } from 'react'

class Tables extends Component {
  constructor[props] {
    super[props]
    this.state = {
      students: [
        { id: 1, name: 'Wasif', age: 21, email: '' },
        { id: 2, name: 'Ali', age: 19, email: '' },
        { id: 3, name: 'Saad', age: 16, email: '' },
        { id: 4, name: 'Asad', age: 25, email: '' },
      ],
    }
  }

  renderTableData[] {
    return this.state.students.map[[student, index] => {
      const { id, name, age, email } = student
      return [
        
          {id}
          {name}
          {age}
          {email}
        
      ]
    }]
  }

  renderTableHeader[] {
    const header = Object.keys[this.state.students[0]]
    return header.map[[key, index] => {key.toUpperCase[]}]
  }

  render[] {
    return [
        
          
            {this.renderTableHeader[]}
            {this.renderTableData[]}
          
        
    ]
  }
}

export default Tables