From 7111f99cff7fe5407ab1b00a01550dea4f772a1a Mon Sep 17 00:00:00 2001
From: Anders Borch <anders@cyborch.com>
Date: Wed, 12 Apr 2023 19:24:35 +0200
Subject: [PATCH] Add table styling

---
 front/src/components/table/Table.tsx | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/front/src/components/table/Table.tsx b/front/src/components/table/Table.tsx
index 28b1d6462..9c451cc74 100644
--- a/front/src/components/table/Table.tsx
+++ b/front/src/components/table/Table.tsx
@@ -8,6 +8,7 @@ import {
 } from '@tanstack/react-table';
 import TableHeader from './TableHeader';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import styled from '@emotion/styled';
 
 type OwnProps = {
   data: Array<any>;
@@ -16,6 +17,21 @@ type OwnProps = {
   viewIcon?: IconProp;
 };
 
+const StyledTable = styled.table`
+  min-width: 100%;
+  border-radius: 4px;
+  border: 1px solid #f5f5f5;
+  border-spacing: 0;
+
+  td,
+  th {
+    border: 1px solid #f5f5f5;
+    font-size: 12px;
+    text-align: left;
+    padding: 11px 0 11px 4px;
+  }
+`;
+
 function Table({ data, columns, viewName, viewIcon }: OwnProps) {
   const table = useReactTable({
     data,
@@ -26,7 +42,7 @@ function Table({ data, columns, viewName, viewIcon }: OwnProps) {
   return (
     <div>
       <TableHeader viewName={viewName} viewIcon={viewIcon} />
-      <table>
+      <StyledTable>
         <thead>
           {table.getHeaderGroups().map((headerGroup) => (
             <tr key={headerGroup.id}>
@@ -71,6 +87,7 @@ function Table({ data, columns, viewName, viewIcon }: OwnProps) {
           ))}
         </tfoot>
       </table>
+      </StyledTable>
     </div>
   );
 }