import { action, computed, observable } from "mobx";
import { observer } from "mobx-react";
import * as React from "react";

interface TableBoxProps {
    pairs: {x: number, y:number}[]
}


export class TableBox extends React.Component<TableBoxProps> {



    render() {
        return (
            <div className="table-container">
                <table className="table">
                    <thead>
                        <tr className="table-row">
                            <th>x</th>
                            <th>y</th>
                        </tr>
                    </thead>
                    <tbody>
                    {this.props.pairs.map(p => {
                        return (<tr className="table-row">
                            <td>{p.x}</td>
                            <td>{p.y}</td>
                        </tr>)
                    })}
                    </tbody>
                </table>
            </div>
        )
    }

}