docs: add drag column sorting demo

[GeorgeHcc]

[中文版模板 / Chinese template]

🤔 This is a ...

• New feature
• Bug fix
• Site / documentation update
• Demo update
• Component style update
• TypeScript definition update
• Bundle size optimization
• Performance optimization
• Enhancement feature
• Internationalization
• Refactoring
• Code style optimization
• Test Case
• Branch merge
• Workflow
• Other (about what?)

🔗 Related issue link

#48306

💡 Background and solution

📝 Changelog

Language	Changelog
🇺🇸 English	add drag column sorting demo
🇨🇳 Chinese	添加表格列拖拽排序demo

☑️ Self-Check before Merge

⚠️ Please check all items below before requesting a reviewing. ⚠️

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• TypeScript definition is updated/provided or not needed
• Changelog is provided or not needed

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[github-actions]

👁 Visual Regression Report for PR #48434 Passed ✅

🎯 Target branch: master (0bc2e3a)
📖 View Full Report ↗︎

🎊 Congrats! No visual-regression diff found.

[github-actions]

[socket-security]

No dependency changes detected. Learn more about Socket for GitHub ↗︎

👍 No dependency changes detected in pull request

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (0bc2e3a) to head (fa0bfdf).

Additional details and impacted files

@@            Coverage Diff            @@
##            master    #48434   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          744       744           
  Lines        12887     12887           
  Branches      3371      3371           
=========================================
  Hits         12887     12887           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[afc163]

Address 列有点太宽了，反而不适合演示，多加一些等宽列？

[GeorgeHcc]

👌添加了两列

[afc163]

交互效果改成 https://juejin.cn/post/7118266614339862559 这样如何？

拖拽列原地占位，待拖拽位置出现竖线。

[GeorgeHcc]

可以，黑色的拖拽状态感觉有点难看,选一个颜色淡一点的token怎么样

[GeorgeHcc]

尝试了一下，拖拽叠加的单元格不太容易拿到对应列的宽高

[afc163]

可以，黑色的拖拽状态感觉有点难看,选一个颜色淡一点的token怎么样

可以的。

[linxianxi]

不建议将 columns 放在 useState 里，这样会引导用户写同样的代码。columns 里的函数(onCell、 render 等)包含外部变量时，外部变量改变，函数是不会执行的。比如 render: () => stateA，stateA 变化了，表格里不会改变。

[Shen120]

分组列拖拽有问题啊，因为ID的重复导致的问题@GeorgeHcc

[Shen120]

而且定位的虚线位置也有问题

[Shen120]

SortableContext items={columns.map((i) => i.key)}
这句代码中的items中的元素是第一级，而要实现限制在当前分组类拖拽需要动态处理这个地方 @GeorgeHcc