table icon indicating copy to clipboard operation
table copied to clipboard

docs: example sortable columns

Open FatahChan opened this issue 2 months ago • 5 comments

This pull request introduces a new column sorting demo using drag-and-drop, refactors the column resizing demo to use React hooks, and adds the necessary dependencies for drag-and-drop functionality. The main focus is on improving demo interactivity and modernizing the codebase.

New Features:

  • Added a drag-and-drop sortable columns demo in docs/examples/column-sortable.tsx, using the @dnd-kit library for interactive column reordering.
  • Created a documentation page for the column sorting demo at docs/demo/column-sortable.md.

Refactoring and Improvements:

  • Refactored the column resizing demo in docs/examples/column-resize.tsx from a class component to a functional component using React hooks, improving readability and maintainability. [1] [2]

Dependency Updates:

  • Added @dnd-kit/core, @dnd-kit/modifiers, and @dnd-kit/sortable to package.json to support drag-and-drop functionality in demos.

Summary by CodeRabbit

发布说明

  • 新功能

    • 新增表格列可拖拽排序示例,支持通过拖放改变列显示顺序。
  • 文档

    • 新增列可排序示例的演示页面与示例引用,便于快速查看与复现。
  • 优化 / 重构

    • 将列调整示例重构为函数式组件,使用 React hooks 与 memo 化优化渲染与状态管理。
  • 杂项

    • 增加用于实现拖拽交互的开发依赖以支持示例。

✏️ Tip: You can customize this high-level summary in your review settings.

FatahChan avatar Nov 20 '25 07:11 FatahChan