packages/app/src/components/table/Body.tsx

@@ -0,0 +1,76 @@
+import classNames from 'classnames';
+import {forwardRef} from 'react';
+import BodyTr from './BodyTr';
+import {Empty} from 'antd';
+import {HeaderGroup, RowModel} from '@tanstack/react-table';
+
+type Props = {
+  scrollProgess: 'start' | 'end' | 'process',
+  getCenterTotalSize: () => number,
+  getRowModel: () => RowModel<Record<string, any>>,
+  highlightValue?: unknown,
+  hightlightKey?: any,
+  getHeaderGroups: () => HeaderGroup<Record<string, any>>[],
+};
+
+export default forwardRef<HTMLTableElement, Props>(function TableBody(
+  {
+    scrollProgess,
+    getCenterTotalSize,
+    getRowModel,
+    highlightValue,
+    hightlightKey,
+    getHeaderGroups,
+  },
+  ref,
+) {
+  return (
+    <div className="ld-table-body-wrapper" ref={ref}>
+      <table
+        className={classNames('ld-table', {
+          'ld-table-enabled-right-fixed-shadow': scrollProgess !== 'end',
+          'ld-table-enabled-left-fixed-shadow': scrollProgess !== 'start',
+        })}
+        style={{width: getCenterTotalSize()}}
+      >
+        <tbody className="ld-table-body">
+          {getRowModel().rows.length > 0 ? (
+            getRowModel().rows.map(function({
+              id,
+              getVisibleCells,
+              original,
+            }) {
+              return (
+                <BodyTr
+                  getVisibleCells={getVisibleCells}
+                  key={id}
+                  highlight={original[hightlightKey as string ?? 'id'] === highlightValue}
+                />
+              );
+            })
+          ) : (
+            <tr>
+              <td
+                colSpan={getHeaderGroups()[0].headers.length}
+                style={{padding: 0}}
+              >
+                <Empty
+                  image={Empty.PRESENTED_IMAGE_SIMPLE}
+                  style={{
+                    width: '400px',
+                    position: 'sticky',
+                    left: '50%',
+                    transform: 'translateX(-50%)',
+                    overflow: 'hidden',
+                    margin: 0,
+                    padding: '50px 10px',
+                  }}
+                />
+              </td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+});

packages/app/src/components/table/Header.tsx

@@ -0,0 +1,105 @@
+import {
+  DndContext,
+  DragEndEvent,
+  DragOverlay,
+  DragStartEvent,
+  PointerSensor,
+  closestCenter,
+  useSensor,
+} from '@dnd-kit/core';
+import {
+  SortableContext,
+  horizontalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import classNames from 'classnames';
+import {forwardRef} from 'react';
+import HeaderTh from './HeaderTh';
+import type {LDColumnsType} from '.';
+import type {Header, HeaderGroup} from '@tanstack/react-table';
+
+type Props = {
+  onDragStart: (event: DragStartEvent) => void,
+  onDragEnd: (event: DragEndEvent) => void,
+  columns: LDColumnsType<any>[],
+  scrollProgess: 'start' | 'end' | 'process',
+  getCenterTotalSize: () => number,
+  getHeaderGroups: () => HeaderGroup<Record<string, any>>[],
+  disabledSizeChange?: boolean,
+  disabledHeadSort?: boolean,
+  isSecondLevel?: boolean,
+  active: Header<Record<string, any>, unknown> | null,
+};
+
+export default forwardRef<HTMLDivElement, Props>(function TableHead(
+  {
+    onDragEnd,
+    onDragStart,
+    columns,
+    scrollProgess,
+    getCenterTotalSize,
+    getHeaderGroups,
+    disabledSizeChange,
+    disabledHeadSort,
+    isSecondLevel,
+    active,
+  },
+  ref,
+) {
+  const sensor = useSensor(PointerSensor);
+
+  return (
+    <DndContext
+      onDragStart={onDragStart}
+      onDragEnd={onDragEnd}
+      sensors={[sensor]}
+      collisionDetection={closestCenter}
+    >
+      <SortableContext
+        items={(columns).map(val => val.dataIndex.toString())}
+        strategy={horizontalListSortingStrategy}
+      >
+        <div className="ld-table-header-sticky" ref={ref}>
+          <table
+            className={classNames('ld-table', {
+              'ld-table-enabled-right-fixed-shadow': scrollProgess !== 'end',
+              'ld-table-enabled-left-fixed-shadow': scrollProgess !== 'start',
+            })}
+            style={{width: getCenterTotalSize()}}
+          >
+            <thead className="ld-table-head">
+              {getHeaderGroups().map(function({id, headers}) {
+                return (
+                  <tr key={id}>
+                    {headers.map(header => (
+                      <HeaderTh
+                        key={header.id}
+                        header={header}
+                        disabledSizeChange={disabledSizeChange}
+                        disabledHeadSort={disabledHeadSort}
+                      />
+                    ))}
+                  </tr>
+                );
+              })}
+            </thead>
+          </table>
+        </div>
+        <DragOverlay>
+          {active ? (
+            <table className="width-full">
+              <thead className="width-full">
+                <tr className="width-full">
+                  <HeaderTh
+                    header={active}
+                    preview
+                    isSecondLevel={isSecondLevel}
+                  />
+                </tr>
+              </thead>
+            </table>
+          ) : null}
+        </DragOverlay>
+      </SortableContext>
+    </DndContext>
+  );
+});

packages/app/src/components/table/HeaderTh.tsx

@@ -5,7 +5,7 @@ import {useSortable} from '@dnd-kit/sortable';
 
 type Props = {
   header: Header<Record<string, any>, unknown>;
-  useDiv?: boolean;
+  preview?: boolean;
   isSecondLevel?: boolean;
   disabledSizeChange?: boolean;
   disabledHeadSort?: boolean;
@@ -13,7 +13,7 @@ type Props = {
 
 const HeaderTh: FC<Props> = function({
   header,
-  useDiv,
+  preview,
   isSecondLevel,
   disabledSizeChange,
   disabledHeadSort,
@@ -40,45 +40,32 @@ const HeaderTh: FC<Props> = function({
 
   const style: CSSProperties = {
     cursor: isResizing ? 'col-resize' : disabledSort ? 'auto' : 'move',
-    boxShadow: useDiv
+    boxShadow: preview
       ? '0.5px 0.6px 12.3px rgba(0, 0, 0, 0.059),4px 5px 80px rgba(0, 0, 0, 0.1)'
       : '',
   };
 
-  if (useDiv) {
-    return (
-      <div
-        key={header.id}
-        style={{...style, backgroundColor: '#f5f5f5', width: '100%'}}
-        ref={setNodeRef}
-        {...attributes}
-        {...listeners}
-        className={classNames('ld-table-head-th', {
-          'ld-table-preview-transform': isSecondLevel,
-        })}
-      >
-        {header.isPlaceholder
-          ? null
-          : flexRender(header.column.columnDef.header, header.getContext())}
-      </div>
-    );
-  }
+  if (preview)
+    style.width = '100%';
+  else
+    style.width = `${header.column.getSize()}px`;
 
   return (
     <th
       key={header.id}
-      style={{...style, ...fixedStyle, width: `${header.column.getSize()}px`}}
+      style={{...style, ...fixedStyle}}
       ref={setNodeRef}
       {...attributes}
       {...listeners}
       className={classNames('ld-table-head-th', {
         'ld-table-fixed-right ld-table-right-fixed-shadow': fixed === 'right',
         'ld-table-fixed-left ld-table-left-fixed-shadow': fixed === 'left',
+        'ld-table-preview-transform': isSecondLevel && preview,
       })}
     >
       {flexRender(header.column.columnDef.header, header.getContext())}
 
-      {!fixed && !disabledSizeChange ? (
+      {!fixed && !disabledSizeChange && !preview ? (
         <div
           onMouseDown={header.getResizeHandler()}
           onPointerDown={e => e.stopPropagation()}

packages/app/src/components/table/hooks.tsx

@@ -228,7 +228,7 @@ export function useTableShadow(tableSize: number) {
   const [scrollProgess, setScrollProgess] = useState<'start' | 'process' | 'end'>(
     'start',
   );
-  const scrollTableRef = useRef<HTMLDivElement>(null);
+  const scrollTableRef = useRef<HTMLTableElement>(null);
   const headerTableRef = useRef<HTMLDivElement>(null);
 
   useEffect(

packages/app/src/components/table/index.css

@@ -80,7 +80,8 @@
 
 .ld-table-body-wrapper {
   width: 100%;
-  overflow: auto;
+  overflow-x: auto;
+  overflow-y: hidden;
 
   & .ld-table {
     border-top: 0;

packages/app/src/components/table/index.tsx

@@ -1,4 +1,4 @@
-import {Spin, Pagination, Empty} from 'antd';
+import {Spin, Pagination} from 'antd';
 import {
   createTablePageContext,
   createTableSearchContext,
@@ -10,22 +10,10 @@ import {PAGE_SIZE_LIST, TABLE_CELL_WIDTH} from '@utils';
 import {Dispatch, ReactElement, ReactNode, SetStateAction} from 'react';
 import {useTable, useTableShadow} from './hooks';
 import {RowSelectionState} from '@tanstack/react-table';
-import HeaderTh from './HeaderTh';
-import {
-  DndContext,
-  PointerSensor,
-  useSensor,
-  DragOverlay,
-  closestCenter,
-} from '@dnd-kit/core';
-import {
-  SortableContext,
-  horizontalListSortingStrategy,
-} from '@dnd-kit/sortable';
-import classNames from 'classnames';
 import './index.css';
 import {ModifyData} from '@models';
-import BodyTr from './BodyTr';
+import TableHead from './Header';
+import TableBody from './Body';
 
 export type LDColumnsType<T extends Record<string, unknown>> = {
   dataIndex: keyof T,
@@ -83,7 +71,6 @@ function LDTable<T extends Record<string, any>>(props: Props<T>): ReactElement {
     setRowSelection,
   });
 
-  const sensor = useSensor(PointerSensor);
   const {
     scrollProgess,
     scrollTableRef,
@@ -97,101 +84,29 @@ function LDTable<T extends Record<string, any>>(props: Props<T>): ReactElement {
         id={props['data-testid'] ?? 'ld_table_wrapper'}
         data-testid={props['data-testid']}
       >
-        <DndContext
+        <TableHead
+          ref={headerTableRef}
+          isSecondLevel={isSecondLevel}
+          disabledHeadSort={disabledHeadSort}
+          disabledSizeChange={disabledSizeChange}
+          active={active}
+          getHeaderGroups={getHeaderGroups}
           onDragStart={onDragStart}
           onDragEnd={onDragEnd}
-          sensors={[sensor]}
-          collisionDetection={closestCenter}
-        >
-          <SortableContext
-            items={(columns).map(val => val.dataIndex.toString())}
-            strategy={horizontalListSortingStrategy}
-          >
-            <div className="ld-table-header-sticky" ref={headerTableRef}>
-              <table
-                className={classNames('ld-table', {
-                  'ld-table-enabled-right-fixed-shadow': scrollProgess !== 'end',
-                  'ld-table-enabled-left-fixed-shadow': scrollProgess !== 'start',
-                })}
-                style={{width: getCenterTotalSize()}}
-              >
-                <thead className="ld-table-head">
-                  {getHeaderGroups().map(function({id, headers}) {
-                    return (
-                      <tr key={id}>
-                        {headers.map(header => (
-                          <HeaderTh
-                            key={header.id}
-                            header={header}
-                            disabledSizeChange={disabledSizeChange}
-                            disabledHeadSort={disabledHeadSort}
-                          />
-                        ))}
-                      </tr>
-                    );
-                  })}
-                </thead>
-              </table>
-            </div>
-            <DragOverlay>
-              {active ? (
-                <HeaderTh
-                  header={active}
-                  useDiv
-                  isSecondLevel={isSecondLevel}
-                />
-              ) : null}
-            </DragOverlay>
-          </SortableContext>
-        </DndContext>
-        <div className="ld-table-body-wrapper" ref={scrollTableRef}>
-          <table
-            className={classNames('ld-table', {
-              'ld-table-enabled-right-fixed-shadow': scrollProgess !== 'end',
-              'ld-table-enabled-left-fixed-shadow': scrollProgess !== 'start',
-            })}
-            style={{width: getCenterTotalSize()}}
-          >
-            <tbody className="ld-table-body">
-              {getRowModel().rows.length > 0 ? (
-                getRowModel().rows.map(function({
-                  id,
-                  getVisibleCells,
-                  original,
-                }) {
-                  return (
-                    <BodyTr
-                      getVisibleCells={getVisibleCells}
-                      key={id}
-                      highlight={original[hightlightKey as string ?? 'id'] === highlightValue}
-                    />
-                  );
-                })
-              ) : (
-                <tr>
-                  <td
-                    colSpan={getHeaderGroups()[0].headers.length}
-                    style={{padding: 0}}
-                  >
-                    <Empty
-                      image={Empty.PRESENTED_IMAGE_SIMPLE}
-                      style={{
-                        width: '400px',
-                        position: 'sticky',
-                        left: '50%',
-                        transform: 'translateX(-50%)',
-                        overflow: 'hidden',
-                        margin: 0,
-                        padding: '50px 10px',
-                      }}
-                    />
-                  </td>
-                </tr>
-              )}
-            </tbody>
-          </table>
-        </div>
+          columns={columns}
+          scrollProgess={scrollProgess}
+          getCenterTotalSize={getCenterTotalSize}
+        />
 
+        <TableBody
+          ref={scrollTableRef}
+          scrollProgess={scrollProgess}
+          getCenterTotalSize={getCenterTotalSize}
+          getRowModel={getRowModel}
+          highlightValue={highlightValue}
+          hightlightKey={hightlightKey}
+          getHeaderGroups={getHeaderGroups}
+        />
       </div>
       <Pagination
         className="ld-table-pagination"

packages/app/src/pages/menu-second/table/index.tsx

@@ -37,6 +37,7 @@ const MenuTable: FC = function() {
           pageContext={pageContext}
           settingContext={settingContext}
           searchContext={searchContext}
+          isSecondLevel
         />
       </LDTableWrapper>