# 表格 Table

分类：内容 · React：Table

对齐的数据：排序、全选、拖列宽、固定列、页脚合计。

## 示例
```html
<div class="xxd-table-wrap" style="max-width:560px">
<table class="xxd-table" data-interactive>
  <thead><tr>
    <th class="xxd-table__check"><input type="checkbox" class="xxd-check" data-select-all aria-label="全选"></th>
    <th aria-sort="ascending" data-key="name" data-sticky="start"><button class="xxd-th-sort">插件</button><span class="xxd-th-resize"></span></th>
    <th>版本</th>
    <th aria-sort="none" data-key="users" data-align="end"><button class="xxd-th-sort">用户</button></th>
    <th class="xxd-table__actions"><span class="xxd-sr-only">操作</span></th>
  </tr></thead>
  <tbody>
    <tr><td class="xxd-table__check"><input type="checkbox" class="xxd-check" data-select-row aria-label="选择 长文发布"></td><td data-sticky="start">长文发布</td><td>1.8.2</td><td data-align="end">2,410</td><td class="xxd-table__actions"><button class="xxd-btn xxd-reveal" data-variant="ghost" data-size="xs">编辑</button></td></tr>
    <tr><td class="xxd-table__check"><input type="checkbox" class="xxd-check" data-select-row checked aria-label="选择 排序链接"></td><td data-sticky="start">排序链接</td><td>0.9.0</td><td data-align="end">830</td><td class="xxd-table__actions"><button class="xxd-btn xxd-reveal" data-variant="ghost" data-size="xs">编辑</button></td></tr>
    <tr><td class="xxd-table__check"><input type="checkbox" class="xxd-check" data-select-row aria-label="选择 批量存图"></td><td data-sticky="start">批量存图</td><td>2.1.0</td><td data-align="end">5,102</td><td class="xxd-table__actions"><button class="xxd-btn xxd-reveal" data-variant="ghost" data-size="xs">编辑</button></td></tr>
  </tbody>
  <tfoot><tr><td></td><td colspan="2">3 个插件</td><td data-align="end">8,342</td><td></td></tr></tfoot>
</table></div>
```

## 属性与类名
- `data-interactive`：行可悬停
- `data-density`：compact：紧凑
- `data-sticky-head`：表头吸顶
- `data-sticky（th/td）`：start | end：固定首列 / 末列
- `aria-sort（th）`：none | ascending | descending；里面放 .xxd-th-sort
- `[data-select-all] / [data-select-row]`：全选与行选择（半选自动）
- `.xxd-th-resize`：拖动列宽
- 类名：`xxd-table` `xxd-table-wrap` `xxd-table__check` `xxd-th-sort` `xxd-th-resize` `xxd-table__actions`

## JS
```js
table.addEventListener("xxd:sort", (e) => e.detail /* { key, direction } */)
table.addEventListener("xxd:select", (e) => e.detail.count)
```

## 键盘与读屏
- 表头用 <th>，可排序列写 aria-sort 并把表头文字放在按钮里
- 全选框 aria-label，半选是 indeterminate；横向滚动的容器键盘可聚焦