[Component][m]: Add table component

packages/portal/src/components/views/Table.js

@@ -1,58 +1,29 @@
-import React from "react"
+import React from 'react';
-import ReactTable from 'react-table-v6'
+import { DataGrid } from '@material-ui/data-grid';
-// import 'react-table-v6/react-table.css'
 
-
+/**
-export default class Table extends React.Component {
+ * Displays a table from a Frictionless dataset
-  constructor(props) {
+ * @param schema: Frictionless Table Schema
-    super(props);
+ * @param data: an array of data objects e.g. [ {a: 1, b: 2}, {a: 5, b: 7} ]
-    this.state = {
+ */
-      data: this.props.data,
+const Table = ({ schema, data }) => {
-      schema: Object.assign({}, this.props.schema)
+  const columns = schema.fields.map((field) => (
-    };
+    {
-  }
+      field: field.title || field.name,
-
+      headerName: field.name,
-  updateData(newData) {
+      width: 300
-    this.setState({
-      data: newData
-    })
-  }
-
-  getFields() {
-    if (this.state.schema && this.state.schema.fields) {
-      return this.state.schema.fields
     }
-    const fields = []
+  ))
-    for (let key in this.state.data[0]) {
+  data = data.map((item, index)=>{
-      fields.push({
+    item.id = index //Datagrid requires every row to have an ID
-        name: key
+    return item
-      })
+  })
-    }
-    return fields
-  }
   
-  render() {
+  return (
-    return (
+    <div data-testid="tableGrid" style={{ height: 400, width: '100%' }}>
-      <ReactTable
+      <DataGrid rows={data} columns={columns} pageSize={5} />
-        data={this.state.data}
+    </div>
-        columns={this.getFields().map(field => {
+  );
-          return {
-            Header: field.name,
-            id: field.name,
-            accessor: val => val[field.name],
-            Cell: props => <div className={field.type || ''}>
-              <span>{props.value}</span>
-            </div>
-          }
-        })}
-        getTheadThProps={() => {
-          return { style: { "wordWrap": "break-word", "whiteSpace": "initial" } }
-        }}
-        showPagination={false}
-        defaultPageSize={100}
-        showPageSizeOptions={false}
-        minRows={10}
-      />
-    )
-  }
 }
+
+export default Table