[Issue-5772] Add sort feature on settings tables (#5787)

## Proposed Changes
-  Introduce  a new custom hook - useTableSort to sort table content
-  Add test cases for the new custom hook
- Integrate useTableSort hook on to the table in settings object and
settings object field pages

## Related Issue

https://github.com/twentyhq/twenty/issues/5772

## Evidence


https://github.com/twentyhq/twenty/assets/87609792/8be456ce-2fa5-44ec-8bbd-70fb6c8fdb30

## Evidence after addressing review comments


https://github.com/twentyhq/twenty/assets/87609792/c267e3da-72f9-4c0e-8c94-a38122d6395e

## Further comments

Apologies for the large PR. Looking forward for the review

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-front/src/modules/ui/layout/table/components/SortableTableHeader.tsx

@@ -0,0 +1,67 @@
+import { TableHeader } from '@/ui/layout/table/components/TableHeader';
+import { sortedFieldByTableFamilyState } from '@/ui/layout/table/states/sortedFieldByTableFamilyState';
+import { TableSortValue } from '@/ui/layout/table/types/TableSortValue';
+import { useRecoilState } from 'recoil';
+import { IconArrowDown, IconArrowUp } from 'twenty-ui';
+
+export const SortableTableHeader = ({
+  tableId,
+  fieldName,
+  label,
+  align = 'left',
+  initialSort,
+}: {
+  tableId: string;
+  fieldName: string;
+  label: string;
+  align?: 'left' | 'center' | 'right';
+  initialSort?: TableSortValue;
+}) => {
+  const [sortedFieldByTable, setSortedFieldByTable] = useRecoilState(
+    sortedFieldByTableFamilyState({ tableId }),
+  );
+
+  const sortValue = sortedFieldByTable ?? initialSort;
+
+  const isSortOnThisField = sortValue?.fieldName === fieldName;
+
+  const sortDirection = isSortOnThisField ? sortValue.orderBy : null;
+
+  const isAsc =
+    sortDirection === 'AscNullsLast' || sortDirection === 'AscNullsFirst';
+  const isDesc =
+    sortDirection === 'DescNullsLast' || sortDirection === 'DescNullsFirst';
+
+  const isSortActive = isAsc || isDesc;
+
+  const handleClick = () => {
+    setSortedFieldByTable({
+      fieldName,
+      orderBy: isSortOnThisField
+        ? sortValue.orderBy === 'AscNullsLast'
+          ? 'DescNullsLast'
+          : 'AscNullsLast'
+        : 'DescNullsLast',
+    });
+  };
+
+  return (
+    <TableHeader align={align} onClick={handleClick}>
+      {isSortActive && align === 'right' ? (
+        isAsc ? (
+          <IconArrowUp size="14" />
+        ) : (
+          <IconArrowDown size="14" />
+        )
+      ) : null}
+      {label}
+      {isSortActive && align === 'left' ? (
+        isAsc ? (
+          <IconArrowUp size="14" />
+        ) : (
+          <IconArrowDown size="14" />
+        )
+      ) : null}
+    </TableHeader>
+  );
+};

packages/twenty-front/src/modules/ui/layout/table/components/TableHeader.tsx

@@ -1,6 +1,9 @@
 import styled from '@emotion/styled';
 
-const StyledTableHeader = styled.div<{ align?: 'left' | 'center' | 'right' }>`
+const StyledTableHeader = styled.div<{
+  align?: 'left' | 'center' | 'right';
+  onClick?: () => void;
+}>`
   align-items: center;
   border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
   color: ${({ theme }) => theme.font.color.tertiary};
@@ -15,6 +18,7 @@ const StyledTableHeader = styled.div<{ align?: 'left' | 'center' | 'right' }>`
         : 'flex-start'};
   padding: 0 ${({ theme }) => theme.spacing(2)};
   text-align: ${({ align }) => align ?? 'left'};
+  cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')};
 `;
 
 export { StyledTableHeader as TableHeader };