refactor: move sortable fields in table

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

@@ -2,7 +2,6 @@ import styled from '@emotion/styled';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import DropdownButton from './DropdownButton';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { faCalendar } from '@fortawesome/pro-regular-svg-icons';
 import SortAndFilterBar, { SortType } from './SortAndFilterBar';
 import { useEffect, useState } from 'react';
 
@@ -10,6 +9,7 @@ type OwnProps = {
   viewName: string;
   viewIcon?: IconProp;
   onSortsUpdate?: (sorts: Array<SortType>) => void;
+  sortsAvailable: Array<SortType>;
 };
 
 const StyledContainer = styled.div`
@@ -44,7 +44,12 @@ const StyledFilters = styled.div`
   margin-right: ${(props) => props.theme.spacing(2)};
 `;
 
-function TableHeader({ viewName, viewIcon, onSortsUpdate }: OwnProps) {
+function TableHeader({
+  viewName,
+  viewIcon,
+  onSortsUpdate,
+  sortsAvailable,
+}: OwnProps) {
   const [sorts, setSorts] = useState([] as Array<SortType>);
 
   const onSortItemSelect = (sortId: string) => {
@@ -64,15 +69,6 @@ function TableHeader({ viewName, viewIcon, onSortsUpdate }: OwnProps) {
     onSortsUpdate && onSortsUpdate(sorts);
   }, [sorts, onSortsUpdate]);
 
-  const sortsAvailable: Array<SortType> = [
-    {
-      id: 'created_at',
-      label: 'Created at',
-      order: 'asc',
-      icon: faCalendar,
-    },
-  ];
-
   return (
     <StyledContainer>
       <StyledTableHeader>