class Table extends React.Component {
  constructor(props){
    super(props);
    this.title = props.title;
    this.height = props.height;

    this.ajaxUrl = "./insp.ajax.php";
  }
  componentDidMount() {

    const tableData = [
      {id: 1, name: "John", age: 29},
      {id: 2, name: "Jane", age: 34},
      {id: 3, name: "Smith", age: 23}
    ];

    const table = new Tabulator(this.tableRef, {
      data: tableData,
      layout: "fitColumns",
      columns: [
        {title: "ID", field: "id", width: 150},
        {title: "Name", field: "name"},
        {title: "Age", field: "age"}
      ]
    });
  }

  render() {
    return (
      <>
        <div className="table-title">
        <p className="title">{this.title}</p>


        <div className="button-box">
          <button className="add-btn reverse-btn" onClick={this.addRow}>추가</button>
          <button className="remove-btn reverse-btn" onClick={this.removeRow}>삭제</button>
        </div>


      </div>  
      <div className={this.height}>
        <div className="hy-table" ref={el => (this.tableRef = el)} id="insp_table"></div>
      </div>
      </>
    );
  }
}