49 lines
1.1 KiB
JavaScript
49 lines
1.1 KiB
JavaScript
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>
|
|
</>
|
|
);
|
|
}
|
|
}
|