29 lines
822 B
JavaScript
29 lines
822 B
JavaScript
import React from 'react';
|
|
import { DataGrid } from '@material-ui/data-grid';
|
|
import PropTypes from 'prop-types';
|
|
|
|
/**
|
|
* Displays dataset in tabular form using data grid
|
|
* @param columns: An array of column names with properties: e.g [{field: "col1", headerName: "col1"}, {field: "col2", headerName: "col2"}]
|
|
* @param data: an array of data objects e.g. [ {col1: 1, col2: 2}, {col1: 5, col2: 7} ]
|
|
*/
|
|
const Table = ({ columns, data, height, width }) => {
|
|
let rows = [...data,]
|
|
rows = rows.map((row, i) => {
|
|
row['id'] = i
|
|
return row
|
|
})
|
|
return (
|
|
<div style={{ height, width }} data-testid="tableGrid">
|
|
<DataGrid rows={rows} columns={columns} pageSize={5} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
Table.propTypes = {
|
|
columns: PropTypes.array.isRequired,
|
|
data: PropTypes.array.isRequired
|
|
}
|
|
|
|
export default Table
|