feat: reorder columns from table options (#1636)

* draggable prop addition

* draggable component addition

* state modification

* drag select state addition

* changed state name

* main merged

* lint fix

---------

Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com>

front/src/modules/ui/menu-item/components/MenuItem.tsx

@@ -14,6 +14,7 @@ export type MenuItemIconButton = {
 };
 
 export type MenuItemProps = {
+  isDraggable?: boolean;
   LeftIcon?: IconComponent | null;
   accent?: MenuItemAccent;
   text: string;
@@ -35,6 +36,7 @@ const StyledHoverableMenuItemBase = styled(StyledMenuItemBase)`
 `;
 
 export const MenuItem = ({
+  isDraggable,
   LeftIcon,
   accent = 'default',
   text,
@@ -52,7 +54,11 @@ export const MenuItem = ({
       className={className}
       accent={accent}
     >
-      <MenuItemLeftContent LeftIcon={LeftIcon ?? undefined} text={text} />
+      <MenuItemLeftContent
+        isDraggable={isDraggable ? true : false}
+        LeftIcon={LeftIcon ?? undefined}
+        text={text}
+      />
       <div className="hoverable-buttons">
         {showIconButtons && (
           <FloatingIconButtonGroup iconButtons={iconButtons} />

front/src/modules/ui/menu-item/internals/components/MenuItemLeftContent.tsx

@@ -1,5 +1,6 @@
 import { useTheme } from '@emotion/react';
 
+import { IconGripVertical } from '@/ui/icon';
 import { IconComponent } from '@/ui/icon/types/IconComponent';
 import { OverflowingTextWithTooltip } from '@/ui/tooltip/OverflowingTextWithTooltip';
 
@@ -9,15 +10,26 @@ import {
 } from './StyledMenuItemBase';
 
 type OwnProps = {
+  isDraggable?: boolean;
   LeftIcon: IconComponent | null | undefined;
   text: string;
 };
 
-export const MenuItemLeftContent = ({ LeftIcon, text }: OwnProps) => {
+export const MenuItemLeftContent = ({
+  isDraggable,
+  LeftIcon,
+  text,
+}: OwnProps) => {
   const theme = useTheme();
 
   return (
     <StyledMenuItemLeftContent>
+      {isDraggable && (
+        <IconGripVertical
+          size={theme.icon.size.md}
+          stroke={theme.icon.stroke.sm}
+        />
+      )}
       {LeftIcon && (
         <LeftIcon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
       )}