demo: fix the table moves when dragging elements to the right (#42745)

* demo: fix the layout/table moves when dragging elements to the right

* fix: package json

components/table/demo/drag-sorting-handler.tsx

@@ -1,6 +1,7 @@
 import { MenuOutlined } from '@ant-design/icons';
 import type { DragEndEvent } from '@dnd-kit/core';
 import { DndContext } from '@dnd-kit/core';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
 import {
   arrayMove,
   SortableContext,
@@ -56,10 +57,7 @@ const Row = ({ children, ...props }: RowProps) => {
 
   const style: React.CSSProperties = {
     ...props.style,
-    transform: CSS.Transform.toString(transform && { ...transform, scaleY: 1 })?.replace(
-      /translate3d\(([^,]+),/,
-      'translate3d(0,',
-    ),
+    transform: CSS.Transform.toString(transform && { ...transform, scaleY: 1 }),
     transition,
     ...(isDragging ? { position: 'relative', zIndex: 9999 } : {}),
   };
@@ -118,7 +116,7 @@ const App: React.FC = () => {
   };
 
   return (
-    <DndContext onDragEnd={onDragEnd}>
+    <DndContext modifiers={[restrictToVerticalAxis]} onDragEnd={onDragEnd}>
       <SortableContext
         // rowKey array
         items={dataSource.map((i) => i.key)}

components/table/demo/drag-sorting.tsx

@@ -1,5 +1,6 @@
 import type { DragEndEvent } from '@dnd-kit/core';
 import { DndContext } from '@dnd-kit/core';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
 import {
   arrayMove,
   SortableContext,
@@ -87,7 +88,7 @@ const App: React.FC = () => {
   };
 
   return (
-    <DndContext onDragEnd={onDragEnd}>
+    <DndContext modifiers={[restrictToVerticalAxis]} onDragEnd={onDragEnd}>
       <SortableContext
         // rowKey array
         items={dataSource.map((i) => i.key)}

package.json

@@ -163,6 +163,7 @@
     "@argos-ci/core": "^0.8.0",
     "@babel/eslint-plugin": "^7.19.1",
     "@dnd-kit/core": "^6.0.7",
+    "@dnd-kit/modifiers": "^6.0.1",
     "@dnd-kit/sortable": "^7.0.2",
     "@dnd-kit/utilities": "^3.2.1",
     "@emotion/babel-preset-css-prop": "^11.10.0",