First version of Table component implementing react-table

dashboard/package-lock.json

@@ -677,6 +677,15 @@
         "@types/react-router": "*"
       }
     },
+    "@types/react-table": {
+      "version": "7.7.1",
+      "resolved": "https://registry.npmjs.org/@types/react-table/-/react-table-7.7.1.tgz",
+      "integrity": "sha512-oed13swLIS4Ffyo4jAjl9lGbYMaY0uavKoI9GNMvf2R6vh8JfpRUpizQ90X1VI4WrhfaMb/HMsN7TTBvkGOQXQ==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/react-transition-group": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.0.tgz",
@@ -6282,6 +6291,11 @@
         "tiny-warning": "^1.0.0"
       }
     },
+    "react-table": {
+      "version": "7.7.0",
+      "resolved": "https://registry.npmjs.org/react-table/-/react-table-7.7.0.tgz",
+      "integrity": "sha512-jBlj70iBwOTvvImsU9t01LjFjy4sXEtclBovl3mTiqjz23Reu0DKnRza4zlLtOPACx6j2/7MrQIthIK1Wi+LIA=="
+    },
     "react-transition-group": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",

dashboard/package.json

@@ -42,6 +42,7 @@
     "react-dom": "^16.13.1",
     "react-modal": "^3.11.2",
     "react-router-dom": "^5.2.0",
+    "react-table": "^7.7.0",
     "semver": "^7.3.5",
     "styled-components": "^5.2.0"
   },
@@ -64,6 +65,7 @@
     "@types/react-modal": "^3.10.6",
     "@types/react-router": "^5.1.8",
     "@types/react-router-dom": "^5.1.5",
+    "@types/react-table": "^7.7.1",
     "@types/semver": "^7.3.5",
     "@types/styled-components": "^5.1.3",
     "file-loader": "^6.1.0",

dashboard/src/components/Table.tsx

@@ -0,0 +1,108 @@
+import React from "react";
+import styled from "styled-components";
+import { Column, Row, useTable } from "react-table";
+
+export type TableProps = {
+  columns: Column<any>[];
+  data: any[];
+  onRowClick?: (row: Row) => void;
+};
+
+const Table: React.FC<TableProps> = ({
+  columns: columnsData,
+  data,
+  onRowClick,
+}) => {
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headers,
+    columns,
+    rows,
+    prepareRow,
+    headerGroups,
+  } = useTable({
+    columns: columnsData,
+    data,
+  });
+
+  return (
+    <TableWrapper>
+      <StyledTable {...getTableProps()}>
+        <StyledTHead>
+          {headerGroups.map((headerGroup) => (
+            <StyledTr {...headerGroup.getHeaderGroupProps()}>
+              {headerGroup.headers.map((column) => (
+                <StyledTh {...column.getHeaderProps()}>
+                  {column.render("Header")}
+                </StyledTh>
+              ))}
+            </StyledTr>
+          ))}
+        </StyledTHead>
+        <tbody {...getTableBodyProps()}>
+          {rows.map((row) => {
+            prepareRow(row);
+
+            return (
+              <StyledTr
+                {...row.getRowProps()}
+                onClick={() => onRowClick && onRowClick(row)}
+                selected={false}
+              >
+                {row.cells.map( cell => (
+                  <StyledTd {...cell.getCellProps()}>{cell.render("Cell")}</StyledTd>
+                ))}
+              </StyledTr>
+            );
+          })}
+        </tbody>
+      </StyledTable>
+    </TableWrapper>
+  );
+};
+
+export default Table;
+
+const TableWrapper = styled.div`
+  padding-bottom: 20px;
+`;
+
+export const StyledTr = styled.tr`
+  line-height: 2.2em;
+  cursor: ${(props: { disableHover?: boolean; selected?: boolean }) =>
+    props.disableHover ? "" : "pointer"};
+  background: ${(props: { disableHover?: boolean; selected?: boolean }) =>
+    props.selected ? "#ffffff11" : ""};
+  :hover {
+    background: ${(props: { disableHover?: boolean; selected?: boolean }) =>
+      props.disableHover ? "" : "#ffffff22"};
+  }
+`;
+
+export const StyledTd = styled.td`
+  font-size: 13px;
+  color: #ffffff;
+  padding-left: 32px;
+`;
+
+export const StyledTHead = styled.thead`
+  width: 100%;
+`;
+
+export const StyledTh = styled.th`
+  text-align: left;
+  font-size: 13px;
+  font-weight: 500;
+  color: #aaaabb;
+  padding-left: 32px;
+`;
+
+export const StyledTable = styled.table`
+  width: 100%;
+  margin-top: 5px;
+  padding-left: 32px;
+  padding-bottom: 20px;
+  min-width: 500px;
+  border-collapse: collapse;
+`;