Rework Table Header

front/src/components/table/ColumnHead.tsx

@@ -0,0 +1,34 @@
+import styled from '@emotion/styled';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+
+type OwnProps = {
+  viewName: string;
+  viewIcon?: IconProp;
+};
+
+const StyledTitle = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 40px;
+  color: ${(props) => props.theme.text60};
+  font-weight: 500;
+  padding-left: ${(props) => props.theme.spacing(2)};
+`;
+
+const StyledIcon = styled.div`
+  display: flex;
+  margin-right: ${(props) => props.theme.spacing(1)};
+`;
+
+function TableHeader({ viewName, viewIcon }: OwnProps) {
+  return (
+    <StyledTitle>
+      <StyledIcon>{viewIcon && <FontAwesomeIcon icon={viewIcon} />}</StyledIcon>
+      {viewName}
+    </StyledTitle>
+  );
+}
+
+export default TableHeader;

front/src/components/table/Table.tsx

@@ -32,6 +32,12 @@ const StyledTable = styled.table`
   }
 `;
 
+const StyledTableWithHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+`;
+
 function Table({ data, columns, viewName, viewIcon }: OwnProps) {
   const table = useReactTable({
     data,
@@ -40,7 +46,7 @@ function Table({ data, columns, viewName, viewIcon }: OwnProps) {
   });
 
   return (
-    <div>
+    <StyledTableWithHeader>
       <TableHeader viewName={viewName} viewIcon={viewIcon} />
       <StyledTable>
         <thead>
@@ -92,7 +98,7 @@ function Table({ data, columns, viewName, viewIcon }: OwnProps) {
           </tfoot>
         )}
       </StyledTable>
-    </div>
+    </StyledTableWithHeader>
   );
 }
 

front/src/components/table/TableHeader.tsx

@@ -11,16 +11,47 @@ const StyledTitle = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: 5px;
+  justify-content: space-between;
+  height: 40px;
   color: ${(props) => props.theme.text60};
   font-weight: 500;
+  padding-left: ${(props) => props.theme.spacing(2)};
+`;
+
+const StyledIcon = styled.div`
+  display: flex;
+  margin-right: ${(props) => props.theme.spacing(2)};
+`;
+
+const StyledViewSection = styled.div`
+  display: flex;
+`;
+
+const StyledFilters = styled.div`
+  display: flex;
+  font-weight: 400;
+  margin-right: ${(props) => props.theme.spacing(1)};
+`;
+
+const StyledFilterButton = styled.div`
+  display: flex;
+  margin-left: ${(props) => props.theme.spacing(4)};
 `;
 
 function TableHeader({ viewName, viewIcon }: OwnProps) {
   return (
     <StyledTitle>
-      {viewIcon && <FontAwesomeIcon icon={viewIcon} />}
-      {viewName}
+      <StyledViewSection>
+        <StyledIcon>
+          {viewIcon && <FontAwesomeIcon icon={viewIcon} size="lg" />}
+        </StyledIcon>
+        {viewName}
+      </StyledViewSection>
+      <StyledFilters>
+        <StyledFilterButton>Filter</StyledFilterButton>
+        <StyledFilterButton>Sort</StyledFilterButton>
+        <StyledFilterButton>Settings</StyledFilterButton>
+      </StyledFilters>
     </StyledTitle>
   );
 }