Fixes table header (#1087)

* Wrap up Front chat

* Wrap up Front chat

* Disable entity selectionwhen starting from menu

front/src/modules/ui/utilities/drag-select/components/DragSelect.tsx

@@ -0,0 +1,62 @@
+import { RefObject } from 'react';
+import {
+  boxesIntersect,
+  useSelectionContainer,
+} from '@air/react-drag-to-select';
+
+type OwnProps = {
+  dragSelectable: RefObject<HTMLElement>;
+  onDragSelectionChange: (id: string, selected: boolean) => void;
+  onDragSelectionStart: () => void;
+};
+
+export function DragSelect({
+  dragSelectable,
+  onDragSelectionChange,
+  onDragSelectionStart,
+}: OwnProps) {
+  const { DragSelection } = useSelectionContainer({
+    shouldStartSelecting: (target) => {
+      if (target instanceof HTMLElement) {
+        let el = target;
+        while (el.parentElement && !el.dataset.selectDisable) {
+          el = el.parentElement;
+        }
+
+        return el.dataset.selectDisable !== 'true';
+      }
+      return true;
+    },
+    onSelectionStart: onDragSelectionStart,
+    onSelectionChange: (box) => {
+      const scrollAwareBox = {
+        ...box,
+        top: box.top + window.scrollY,
+        left: box.left + window.scrollX,
+      };
+      Array.from(
+        dragSelectable.current?.querySelectorAll('[data-selectable-id]') ?? [],
+      ).forEach((item) => {
+        const id = item.getAttribute('data-selectable-id');
+        if (!id) {
+          return;
+        }
+        if (boxesIntersect(scrollAwareBox, item.getBoundingClientRect())) {
+          onDragSelectionChange(id, true);
+        } else {
+          onDragSelectionChange(id, false);
+        }
+      });
+    },
+    selectionProps: {
+      style: {
+        border: '1px solid #4C85D8',
+        background: 'rgba(155, 193, 239, 0.4)',
+        position: `absolute`,
+        zIndex: 99,
+      },
+    },
+  });
+
+  return <DragSelection />;
+}