import React,{ Component } from 'react';

class Table extends Component{
    click(id){
        if(typeof this.props.onClick === 'function'){
            this.props.onClick(id);
        }
    }
    render(){
        const   length = this.props.headers.length,
                self = this;
        return(
            <table className='w3-table w3-table-all'>
                <tbody>
                    <tr>
                        {this.props.headers.map(function(header){
                            return (
                                <th key={header}>{header}</th>
                            )
                        })}
                    </tr>
                    {this.props.rows.map(function(row, i){
                        return (
                            <tr key={row[row.length-1]} className='w3-hover-gray' onClick={self.click.bind(self, row[row.length-1])}>
                                {row.map(function(entry, j){
                                    if(j < length){
                                        return (
                                            <td key={j}>{entry}</td>
                                        )
                                    }
                                    return null;
                                })}
                            </tr>
                        )
                    })}
                </tbody>
            </table>
        )
    }
}
export default Table;