# useTableRowIndex

## 使用方法

返回一个 `TablePlugin`，在表格最前面加一列右对齐、等宽的序号。序号跟着当前渲染的数据顺序走（排序、过滤、分页之后的结果），默认从 1 开始。`renderCell` 只拿到一行数据，所以插件需要你传入当前渲染的数据数组，用它算出每一行的序号。

```ts
import { useTableRowIndex } from '@astryx-vue/core/Table'
```

## 示例

### useTableRowIndex —— 行号列

在最前面加了一列序号的表格。序号是等宽字体、右对齐，顺序跟着渲染后的数据。

```vue
<script setup lang="ts">
import type { TableColumn } from '@astryx-vue/core/Table'
import { proportional, Table, useTableRowIndex } from '@astryx-vue/core/Table'

interface Track extends Record<string, unknown> {
  id: string
  title: string
  artist: string
  plays: number
}

const tracks: Track[] = [
  { id: 'nightfall', title: 'Nightfall', artist: 'Ava Chen', plays: 1820 },
  { id: 'ember', title: 'Ember', artist: 'Liam Park', plays: 942 },
  { id: 'tidal', title: 'Tidal', artist: 'Zoe Vega', plays: 3310 },
  { id: 'cinder', title: 'Cinder', artist: 'Max Ross', plays: 604 },
  { id: 'halcyon', title: 'Halcyon', artist: 'Mia Cole', plays: 2075 },
]

const columns: TableColumn<Track>[] = [
  { key: 'title', header: 'Title', width: proportional(2) },
  { key: 'artist', header: 'Artist', width: proportional(2) },
  { key: 'plays', header: 'Plays', width: proportional(1), align: 'end' },
]

const rowIndex = useTableRowIndex<Track>({
  data: tracks,
  getRowKey: track => track.id,
})
</script>

<template>
  <Table
    :data="tracks"
    :columns="columns"
    id-key="id"
    :plugins="{ rowIndex }"
  />
</template>
```

## 属性

配置对象是 `MaybeRefOrGetter`：传一个 getter 或 ref，插件才会跟着最新值走。

## 参数

| 参数 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `data` | `readonly T[]` | — | 表格当前渲染的数据数组（排序、过滤、分页之后）。序号按这个顺序走。 |
| `getRowKey` | `(item: T) => string` | — | 可选的行键提取函数，给每一行返回唯一字符串。传了就用这个字符串查序号，不传就按引用相等来认行。放在 getter 里的普通函数本身是稳定的，不需要额外缓存。 |
| `label` | `string` | `'#'` | 序号列的表头文字。 |
| `startFrom` | `number` | `1` | 第一个序号的值。 |

## 返回值

| 字段 | 类型 | 说明 |
| --- | --- | --- |
| `transformColumns` | `(columns: TableColumn[]) => TableColumn[]` | 在最前面加序号列。列键是 `__rowIndex`，宽 `pixel(48)`，靠末尾对齐，不能拖宽。分组头那一行的单元格是空的。数字放在 `span.astryx-table__row-index` 里，等宽字体、右对齐。 |