ld-admin-template/packages/app/src/components/table/Header.tsx

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={classNames('width-full', {
                'ld-table-preview-transform': isSecondLevel,
              })}
            >
              <thead className="width-full">
                <tr className="width-full">
                  <HeaderTh
                    header={active}
                    preview
                  />
                </tr>
              </thead>
            </table>
          ) : null}
        </DragOverlay>
      </SortableContext>
    </DndContext>
  );
});