Add all filters to tables + make column width fixed (#133)

* Add additional filters on companies and people page

* Make colunn width fixed

* Remove duplicate declaration of Unknown type

front/src/components/editable-cell/EditableCellWrapper.tsx

@@ -31,10 +31,11 @@ type StyledEditModeContainerProps = {
 const StyledNonEditModeContainer = styled.div`
   display: flex;
   align-items: center;
-  width: 100%;
+  width: calc(100% - ${(props) => props.theme.spacing(5)});
   height: 100%;
   padding-left: ${(props) => props.theme.spacing(2)};
   padding-right: ${(props) => props.theme.spacing(2)};
+  overflow: hidden;
 `;
 
 const StyledEditModeContainer = styled.div<StyledEditModeContainerProps>`

front/src/components/form/Checkbox.tsx

@@ -21,13 +21,17 @@ const StyledContainer = styled.span`
 
   input[type='checkbox']::before {
     content: '';
-    border: 1px solid ${(props) => props.theme.text80};
+    border: 1px solid ${(props) => props.theme.text40};
     width: 12px;
     height: 12px;
     border-radius: 2px;
     display: block;
   }
 
+  input[type='checkbox']:hover::before {
+    border: 1px solid ${(props) => props.theme.text80};
+  }
+
   input[type='checkbox']:checked::before {
     border: 1px solid ${(props) => props.theme.blue};
   }

front/src/components/table/Table.tsx

@@ -43,6 +43,7 @@ const StyledTable = styled.table`
   border-collapse: collapse;
   margin-left: ${(props) => props.theme.spacing(2)};
   margin-right: ${(props) => props.theme.spacing(2)};
+  table-layout: fixed;
 
   th {
     border-collapse: collapse;
@@ -148,7 +149,12 @@ const Table = <
             {table.getHeaderGroups().map((headerGroup) => (
               <tr key={headerGroup.id}>
                 {headerGroup.headers.map((header) => (
-                  <th key={header.id}>
+                  <th
+                    key={header.id}
+                    style={{
+                      width: `${header.getSize()}px`,
+                    }}
+                  >
                     {header.isPlaceholder
                       ? null
                       : flexRender(

front/src/components/table/table-header/FilterDropdownButton.tsx

@@ -91,25 +91,27 @@ export const FilterDropdownButton = <TData extends FilterableFieldsType>({
       );
     }
 
-    return filterSearchResults.results.map((result, index) => (
-      <DropdownButton.StyledDropdownItem
-        key={`fields-value-${index}`}
-        onClick={() => {
-          onFilterSelect({
-            key: selectedFilter.key,
-            label: selectedFilter.label,
-            value: result.value,
-            displayValue: result.render(result.value),
-            icon: selectedFilter.icon,
-            operand: selectedFilterOperand,
-          });
-          setIsUnfolded(false);
-          setSelectedFilter(undefined);
-        }}
-      >
-        {result.render(result.value)}
-      </DropdownButton.StyledDropdownItem>
-    ));
+    return filterSearchResults.results.map((result, index) => {
+      return (
+        <DropdownButton.StyledDropdownItem
+          key={`fields-value-${index}`}
+          onClick={() => {
+            onFilterSelect({
+              key: selectedFilter.key,
+              label: selectedFilter.label,
+              value: result.value,
+              displayValue: result.render(result.value),
+              icon: selectedFilter.icon,
+              operand: selectedFilterOperand,
+            });
+            setIsUnfolded(false);
+            setSelectedFilter(undefined);
+          }}
+        >
+          {result.render(result.value)}
+        </DropdownButton.StyledDropdownItem>
+      );
+    });
   };
 
   function renderValueSelection(

front/src/components/table/table-header/SortOrFilterChip.tsx

@@ -20,6 +20,7 @@ const StyledChip = styled.div`
   padding: ${(props) => props.theme.spacing(1) + ' ' + props.theme.spacing(2)};
   margin-left: ${(props) => props.theme.spacing(2)};
   font-size: ${(props) => props.theme.fontSizeSmall};
+  align-items: center;
 `;
 const StyledIcon = styled.div`
   margin-right: ${(props) => props.theme.spacing(1)};