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>
        );
    }
}