WIP - Add DataGrid component

Author: Sean Prashad

web/package.json

@@ -16,6 +16,7 @@
     "react-dom": "^16.12.0",
     "react-scripts": "3.3.0",
     "react-scroll": "^1.7.15",
+    "react-table": "^7.0.0-rc.15",
     "react-test-renderer": "^16.12.0",
     "reactstrap": "^8.2.0"
   },

web/src/components/App.js

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

web/src/components/DataGrid/index.js

@@ -0,0 +1,127 @@
+import React from 'react';
+import { Container, Row, Col } from 'reactstrap';
+import { useTable, useSortBy } from 'react-table';
+
+import questions from '../../data';
+
+import './styles.scss';
+
+function Table({ columns, data }) {
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    rows,
+    prepareRow,
+  } = useTable(
+    {
+      columns,
+      data,
+    },
+    useSortBy,
+  );
+
+  // We don't want to render all 2000 rows for this example, so cap
+  // it at 20 for this use case
+  const firstPageRows = rows.slice(0, 20);
+
+  return (
+    <>
+      <table {...getTableProps()}>
+        <thead>
+          {headerGroups.map(headerGroup => (
+            <tr {...headerGroup.getHeaderGroupProps()}>
+              {headerGroup.headers.map(column => (
+                // Add the sorting props to control sorting. For this example
+                // we can add them into the header props
+                <th {...column.getHeaderProps(column.getSortByToggleProps())}>
+                  {column.render('Header')}
+                  {/* Add a sort direction indicator */}
+                  <span>
+                    {column.isSorted
+                      ? column.isSortedDesc
+                        ? ' 🔽'
+                        : ' 🔼'
+                      : ''}
+                  </span>
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody {...getTableBodyProps()}>
+          {firstPageRows.map((row, i) => {
+            prepareRow(row);
+            return (
+              <tr {...row.getRowProps()}>
+                {row.cells.map(cell => {
+                  return (
+                    <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
+                  );
+                })}
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+      <br />
+      <div>Showing the first 20 results of {rows.length} rows</div>
+    </>
+  );
+}
+
+// {
+//   id: 1,
+//   name: 'My Question',
+//   url: 'wwww.google.ca',
+//   pattern: 'Arrays',
+//   companies: ['abc', 'def', 'ghi'],
+// },
+
+const DataGrid = () => {
+  const data = React.useMemo(() => questions, []);
+  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="datagrid" fluid>
+      <Col>
+        <Row>
+          <Col>
+            <Table columns={columns} data={data} />
+          </Col>
+        </Row>
+      </Col>
+    </Container>
+  );
+};
+
+export default DataGrid;

web/src/components/DataGrid/styles.scss

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

web/src/data/index.js

@@ -0,0 +1,11 @@
+const data = [
+  {
+    id: 1,
+    name: 'My Question',
+    url: 'wwww.google.ca',
+    pattern: 'Arrays',
+    companies: ['abc', 'def', 'ghi'],
+  },
+];
+
+export default data;

web/yarn.lock

@@ -9383,6 +9383,11 @@ react-scroll@^1.7.15:
     lodash.throttle "^4.1.1"
     prop-types "^15.5.8"
 
+react-table@^7.0.0-rc.15:
+  version "7.0.0-rc.15"
+  resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.0.0-rc.15.tgz#bb855e4e2abbb4aaf0ed2334404a41f3ada8e13a"
+  integrity sha512-ofMOlgrioHhhvHjvjsQkxvfQzU98cqwy6BjPGNwhLN1vhgXeWi0mUGreaCPvRenEbTiXsQbMl4k3Xmx3Mut8Rw==
+
 react-test-renderer@^16.0.0-0, react-test-renderer@^16.12.0:
   version "16.12.0"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.12.0.tgz#11417ffda579306d4e841a794d32140f3da1b43f"