Demos improve [Suggestion]

[Amaranthusss]

Hello, if can I suggest, you should not use handleSelector as just 'a'. I think it can generate a bug on query selector for multiple component calls. Instead using 'a' I suggest generate a unique component ID (for example with useId for React 18+) and then query HTML element with that ID.

Example fragment:

const DragColumn = ({ tableId }: IDragColumnProps): JSX.Element => {
  const onClick = useCallback((e: IMouseEvent<HTMLElement>) => {
    e.preventDefault()
  }, [])

  return (
    <span className={styles.dragColumn}>
      <a href={'/'} onClick={onClick} id={`drag-${tableId}`}>
        <Button
          type={'text'}
          className={styles.button}
          icon={<MdDragHandle className={styles.icon} />}
          aria-label={'drag-column'}
        />
      </a>
    </span>
  )
}

  const dragListViewProps = useMemo((): IDragListViewProps => {
    return {
      onDragEnd,
      lineClassName: styles.dragColumnLine,
      nodeSelector: 'th',
      handleSelector: `a[id="drag-${tableId}"]`,
    }
  }, [onDragEnd])

Otherwise drag listener can detect event at a wrong component. It is just free suggestion :).