DATA TABLE
列排序Sortable Columns
点击表头按该列排序，当前排序列显示方向箭头。数据表最基本也最常用的交互。
效果预览
客户 ▼套餐金额 ▼
Aurora Labs团队版¥ 1,299
Bright Studio专业版¥ 599
Codecraft免费版¥ 0
适合用在哪
任何可排序列表。默认排序要选业务上最有意义的列（通常是时间倒序），不要默认按 ID。
容易踩的坑
- 只在前端对当前页排序，分页数据量大时结果与全量排序不一致。
- 非当前列完全隐藏箭头，用户不知道哪些列可点，排序功能被忽略。
- 排序后整表重渲染没有 aria-live 提示，读屏用户不知道顺序已变化。
设计提示词 · Prompt
列排序（Sortable Columns）：表头单元格里加一个可点击的排序指示：一小段文字 + 一个箭头图标，箭头在当前排序列显示并随升降序翻转方向（↑/↓），其他列箭头为低透明度或不显示。给表头加 cursor:pointer 与 hover 变色。排序方向变化时用 0.2s 过渡旋转箭头。无障碍上给 <th> 加 aria-sort="ascending|descending|none"，并保证表头可用键盘触发（Enter/Space）。三态循环（升序→降序→取消）在列很多时更好用。
Sortable Columns: add a clickable sort indicator inside header cells: a short label + an arrow icon. The arrow shows on the currently sorted column and flips direction with ascending/descending order (↑/↓); other columns show the arrow at low opacity or not at all. Give headers cursor:pointer and a hover color change. When the sort direction changes, rotate the arrow with a 0.2s transition. For accessibility, add aria-sort="ascending|descending|none" to <th> and make headers keyboard-triggerable (Enter/Space). A three-state cycle (ascending → descending → off) works better when there are many columns.
常见搭配
同一页面里经常和「列排序」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s" style="width:100%">
<div class="tb">
<div class="tb__row tb__row--hd" style="grid-template-columns:1.6fr 1fr .8fr"><span class="tb__sort">客户 <i>▼</i></span><span class="tb__sort">套餐</span><span class="tb__sort tb__num">金额 <i style="opacity:.35">▼</i></span></div>
<div class="tb__row" style="grid-template-columns:1.6fr 1fr .8fr"><span class="tb__c">Aurora Labs</span><span class="tb__c">团队版</span><span class="tb__num">¥ 1,299</span></div>
<div class="tb__row" style="grid-template-columns:1.6fr 1fr .8fr"><span class="tb__c">Bright Studio</span><span class="tb__c">专业版</span><span class="tb__num">¥ 599</span></div>
<div class="tb__row" style="grid-template-columns:1.6fr 1fr .8fr"><span class="tb__c">Codecraft</span><span class="tb__c">免费版</span><span class="tb__num">¥ 0</span></div>
</div>
</div>