用Props实现表格排序和过滤的核心是状态上提：父组件管理sortBy、sortDir、filterText等状态并传给子组件，子组件仅渲染和触发onSort等回调，不维护状态；排序过滤分页顺序为先过滤、再排序、最后分页，逻辑置于父组件或自定义Hook中，子组件只接收displayData和total。
用 Props 实现表格的排序和过滤，核心在于把排序字段、排序方向、搜索关键词等状态“上提”到父组件，再通过 Props 传给表格子组件；子组件只负责渲染和触发事件，不维护状态。这样既保持了组件的可复用性，又让数据流清晰可控。
用 Props 控制排序逻辑
表格子组件接收 sortBy（当前排序字段名）和 sortDir（'asc' 或 'desc'）两个 Props，并提供一个 onSort 回调供用户点击表头时调用：
- 在表头单元格绑定点击事件，触发
onSort('name')，父组件收到后更新自身状态并重新传入 Props - 子组件内部对数据做排序时，仅基于传入的 sortBy 和 sortDir 执行，不自己存排序状态
- 支持多列排序？可在父组件中维护一个排序队列（如
[{key: 'status', dir: 'desc'}, {key: 'createdAt', dir: 'asc'}]），再传给子组件处理
用 Props 驱动过滤行为
过滤通常依赖搜索关键词或筛选条件。子组件接收 filterText（字符串）或更结构化的 filters（如 {status: ['active'], category: 'web'}）：
- 父组件监听输入框变化，更新本地 filter 状态，再透传给表格
- 子组件拿到原始数据 + filters 后，在 render 或 useMemo 中完成过滤，不修改原始数据
- 若需“重置过滤”，父组件只需清空 filter 状态，子组件自动响应——无需暴露 ref 或方法
组合使用：排序 + 过滤 + 分页更稳
当三者共存时，顺序很重要：先过滤 → 再排序 → 最后分页。这个逻辑应放在父组件或自定义 Hook 中，而不是子组件里：
- 子组件只接收最终要展示的 displayData 数组，以及 total 总数（用于分页显示）
- 这样表格组件完全无副作用，测试友好，也方便接入服务端分页（只传当前页数据）
- 父组件可复用同一套数据处理逻辑，同时驱动表格、统计卡片、导出按钮等多个视图
小技巧：让 Props 更易用
避免每次手动传一堆 Props，可以封装一层：
- 用 useTableState 自定义 Hook 统一管理 sort/filter/page 状态和操作函数
- 将表格需要的全部数据与行为打包成一个对象（如
tableProps），解构传入：<datatable></datatable> - 对 filterText 等简单值，加默认值（
filterText = ''）；对函数 Prop 加 PropTypes 或 TypeScript 类型约束，减少运行时错误
数据驱动的关键不是把逻辑塞进组件，而是让组件成为状态的“投影面”。Props 是桥梁，不是负担。
