Material UI

app/package.json

@@ -6,6 +6,11 @@
     "start": "next start"
   },
   "dependencies": {
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.5.0",
+    "@mui/material": "^5.5.0",
+    "@mui/x-data-grid": "^5.6.1",
     "next": "latest",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

app/pages/home/Table.js

@@ -1,25 +1,56 @@
-import React from 'react'
+import { Component } from 'react'
-import ItemRow from './ItemRow'
+import { DataGrid } from '@mui/x-data-grid'
+import { Link } from '@mui/material'
 
-export default class Table extends React.Component {
+export default class Table extends Component {
   constructor ({ scanResults }) {
     super()
-    this.scanResults = scanResults
+    this.scanResults = scanResults.map(row => ({
+      ...row,
+      id: row._id,
+      difference: row.setPrice - row.partsPrice
+    }))
+    this.columns = [
+      {
+        field: 'name',
+        headerName: 'Name',
+        flex: 1,
+        renderCell: (cellValues) => {
+          return <Link href={`#${cellValues.row.url}`}>{cellValues.row.name}</Link>
+        }
+      },
+      {
+        field: 'partsPrice',
+        headerName: 'Parts Price',
+        flex: 1
+      },
+      {
+        field: 'setPrice',
+        headerName: 'Set Price',
+        flex: 1
+      },
+      {
+        field: 'difference',
+        headerName: 'Difference',
+        flex: 1
+      }
+    ]
   }
 
   render () {
     return (
-      <table>
+      <div style={{ height: '90vh', width: '100%' }}>
-        <thead />
+        <DataGrid
-        <tbody>
+          rows={this.scanResults}
-          {this.scanResults.map((scanResult) =>
+          columns={this.columns}
-            <ItemRow
+          autoPageSize
-              key={scanResult._id}
+          initialState={{
-              scanResult={scanResult}
+            sorting: {
+              sortModel: [{ field: 'difference', sort: 'desc' }]
+            }
+          }}
         />
-          )}
+      </div>
-        </tbody>
-      </table>
     )
   }
 }