Add Table component

This is a wrapper component for react-table, in order to declutter the
project structure.

Author: Sean Prashad

web/src/components/App.js

@@ -3,13 +3,13 @@ import React from 'react';
 import './styles.scss';
 
 import Navigation from './Navigation';
-import DataGrid from './DataGrid';
+import Table from './Table';
 
 function App() {
   return (
     <div className="App">
       <Navigation />
-      <DataGrid />
+      <Table />
     </div>
   );
 }

web/src/components/DataGrid/index.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Table } from 'reactstrap';
+import { useTable, useSortBy } from 'react-table';
+
+function ReactTable({ columns, data }) {
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    rows,
+    prepareRow,
+  } = useTable(
+    {
+      columns,
+      data,
+    },
+    useSortBy,
+  );
+
+  return (
+    <Table align="center" {...getTableProps()}>
+      <thead>
+        {headerGroups.map(headerGroup => (
+          <tr {...headerGroup.getHeaderGroupProps()}>
+            {headerGroup.headers.map(column => (
+              <th {...column.getHeaderProps(column.getSortByToggleProps())}>
+                {column.render('Header')}
+                <span>
+                  {column.isSorted ? (column.isSortedDesc ? ' 🔽' : ' 🔼') : ''}
+                </span>
+              </th>
+            ))}
+          </tr>
+        ))}
+      </thead>
+
+      <tbody {...getTableBodyProps()}>
+        {rows.map(row => {
+          prepareRow(row);
+          return (
+            <tr {...row.getRowProps()}>
+              {row.cells.map(cell => {
+                return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>;
+              })}
+            </tr>
+          );
+        })}
+      </tbody>
+    </Table>
+  );
+}
+
+export default ReactTable;

web/src/components/ReactTable/index.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Container, Row, Col } from 'reactstrap';
+import ReactTable from '../ReactTable';
+
+import questionList from '../../data';
+
+import './styles.scss';
+
+const Table = () => {
+  const data = React.useMemo(() => questionList, []);
+
+  const columns = React.useMemo(
+    () => [
+      {
+        Header: 'Name',
+        columns: [
+          {
+            Header: '#',
+            accessor: 'id',
+          },
+          {
+            Header: 'Question Name',
+            accessor: 'name',
+          },
+          {
+            Header: 'URL',
+            accessor: 'url',
+          },
+          {
+            Header: 'Pattern',
+            accessor: 'pattern',
+          },
+          {
+            Header: 'Companies',
+            accessor: 'companies',
+          },
+        ],
+      },
+    ],
+    [],
+  );
+
+  return (
+    <Container className="table">
+      <Col>
+        <Row>
+          <Col>
+            <ReactTable columns={columns} data={data} />
+          </Col>
+        </Row>
+      </Col>
+    </Container>
+  );
+};
+
+export default Table;

web/src/components/Table/index.js

@@ -1,8 +1,4 @@
-.datagrid {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
+.table {
   > .col {
     padding: 100px 0 100px 0;
   }