[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,
+      width: 300
     }
-
+  ))
-  updateData(newData) {
+  data = data.map((item, index)=>{
-    this.setState({
+    item.id = index //Datagrid requires every row to have an ID
-      data: newData
+    return item
   })
-  }
   
-  getFields() {
-    if (this.state.schema && this.state.schema.fields) {
-      return this.state.schema.fields
-    }
-    const fields = []
-    for (let key in this.state.data[0]) {
-      fields.push({
-        name: key
-      })
-    }
-    return fields
-  }
-
-  render() {
   return (
-      <ReactTable
+    <div data-testid="tableGrid" style={{ height: 400, width: '100%' }}>
-        data={this.state.data}
+      <DataGrid rows={data} columns={columns} pageSize={5} />
-        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={() => {
+export default Table
-          return { style: { "wordWrap": "break-word", "whiteSpace": "initial" } }
-        }}
-        showPagination={false}
-        defaultPageSize={100}
-        showPageSizeOptions={false}
-        minRows={10}
-      />
-    )
-  }
-}