table
table copied to clipboard
docs: example sortable columns
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-kitlibrary 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.tsxfrom 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/sortabletopackage.jsonto 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.