feat: data table of selected table

src/Controllers/TableListController.js

@@ -4,6 +4,7 @@ class TableListController {
   constructor() {
     this.tables = new Tables()
     this.updatedTablesEvent = new Event('updateTables')
+    this.setSelectedTableEvent = new Event('setSelectedTable')
   }
 
   deleteTable = id => {
@@ -11,8 +12,9 @@ class TableListController {
     document.dispatchEvent(this.updatedTablesEvent)
   }
 
-  logExportById = id => {
-    console.log(this.tables.getById(id).headers)
+  selectTableToView = id => {
+    this.tables.setSelectedTableById(id)
+    document.dispatchEvent(this.setSelectedTableEvent)
   }
 }
 

src/Models/Tables.js

@@ -7,6 +7,7 @@ class Tables {
   constructor () {
     if (!instance) instance = this
     this.collection = []
+    this.selectedTable = null
     return instance
   }
 
@@ -31,6 +32,12 @@ class Tables {
   getCollectionProps = () => this.collection.map(table => table.getProperties())
 
   getById = id => this.collection.find(t => id === t.id)
+
+  setSelectedTableById = id => {
+    const table = this.collection.find(t => id === t.id)
+    if (table) this.selectedTable = table
+    else this.selectedTable = null
+  }
 }
 
 export default Tables

src/views/App.js

@@ -5,6 +5,7 @@ import CreateTableForm from './CreateTable/CreateTableForm'
 import TableList from './TableList/TableList'
 import CreateNodule from './CreateNodule/CreateNodule'
 import NoduleList from './NoduleList/NoduleList'
+import DataTable from './DataTable/DataTable'
 
 class App extends Component {
   render = () => {
@@ -14,6 +15,7 @@ class App extends Component {
         <CreateNodule />
         <TableList />
         <NoduleList />
+        <DataTable />
       </div>
     )
   }

src/views/DataTable/DataTable.js

@@ -0,0 +1,68 @@
+import React, { Component } from 'react'
+import { Table } from 'semantic-ui-react'
+
+import Tables from '../../Models/Tables'
+
+class DataTable extends Component {
+  constructor (props) {
+    super(props)
+    this.tables = new Tables()
+    this.state = {
+      headers: [],
+      tableData: []
+    }
+    
+    document.addEventListener('setSelectedTable', this.setSelectedTable)
+  }
+
+  setSelectedTable = () => {
+    const selectedTable = this.tables.selectedTable
+    if (selectedTable) {
+      this.setState({
+        headers: selectedTable.headers,
+        tableData: selectedTable.rows
+      })
+    }
+  }
+
+  renderCellElements = data => {
+    const { headers } = this.state
+    const rowElements = headers.map(h => <Table.Cell singleLine>{data[h]}</Table.Cell>)
+    return rowElements
+  }
+
+  renderTableHeaderElements = () => {
+    const headers = this.state.headers
+    const headerElements = headers.map(h => <Table.HeaderCell>{h}</Table.HeaderCell>)
+    return headerElements
+  }
+
+
+  renderTableRowElements = () => {
+    const { tableData, headers } = this.state
+    const tableRowElements = tableData.map(d => {
+      return <Table.Row>{ this.renderCellElements(d) }</Table.Row>
+    })
+
+    return tableRowElements
+  }
+
+  render = () => {
+    return (
+      <div className='DataTable'>
+        <Table celled>
+          <Table.Header>
+            <Table.Row>
+              { this.renderTableHeaderElements() }
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+          { this.renderTableRowElements() }
+          </Table.Body>
+        </Table>
+      </div>
+    )
+  }
+}
+
+export default DataTable

src/views/TableList/TableListItem.js

@@ -25,7 +25,7 @@ class TableListItem extends Component {
             Delete <Icon name='trash' />
           </span>
           <span 
-          onClick={() => { this.controller.logExportById(table.id) }}
+          onClick={() => { this.controller.selectTableToView(table.id) }}
           style={{ cursor: 'pointer' }}>
             View <Icon name='table' />
           </span>