[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/dropdown/components/Dropdown.tsx

@@ -6,7 +6,7 @@ import {
   Placement,
   useFloating,
 } from '@floating-ui/react';
-import { useRef } from 'react';
+import { MouseEvent, useRef } from 'react';
 import { Keys } from 'react-hotkeys-hook';
 import { Key } from 'ts-key-enum';
 
@@ -93,6 +93,14 @@ export const Dropdown = ({
     toggleDropdown();
   };
 
+  const handleClickableComponentClick = (event: MouseEvent) => {
+    event.stopPropagation();
+    event.preventDefault();
+
+    toggleDropdown();
+    onClickOutside?.();
+  };
+
   useListenClickOutside({
     refs: [refs.floating],
     callback: () => {
@@ -126,10 +134,7 @@ export const Dropdown = ({
         {clickableComponent && (
           <div
             ref={refs.setReference}
-            onClick={() => {
-              toggleDropdown();
-              onClickOutside?.();
-            }}
+            onClick={handleClickableComponentClick}
             className={className}
           >
             {clickableComponent}