import MUIDataTable from "mui-datatables";

/** MUI dataTable component, used for rendering received response */
const ElementDisplay = (props) => {

    var list = props.data
    if (list.length <= 0) {
        return (
            <MUIDataTable 
            title={"Data Table"}
            data={[]}
            columns={['Fields', 'Values']}
            options={{}}
        />
        )
    }
    var fields = Object.keys(list[0])
    var values = []
    for (var key in list){
        if (list.hasOwnProperty(key)) {
            values.push(Object.values(list[key]))
        }
    }
    console.log(fields)
    console.log(values)
    console.log(list)
    const columns = fields
    const data = values
    const options = {
        'responsive':'vertical'
    }
    return (
        <MUIDataTable 
            title={"Data Table"}
            data={data}
            columns={columns}
            options={options}
        />
    )
}

export default ElementDisplay