@lensui/lens-table 0.1.2 → 0.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +49 -8
- package/dist/index.cjs +875 -152
- package/dist/index.css +134 -9
- package/dist/index.d.cts +38 -6
- package/dist/index.d.ts +38 -6
- package/dist/index.js +875 -152
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -88,16 +88,17 @@ export function Example() {
|
|
|
88
88
|
| `rows` | `Row[]` | 必填 | 表格数据。组件不会直接修改数据，编辑后通过事件通知外部更新。 |
|
|
89
89
|
| `rowKey` | `keyof Row \| ((row, index) => string \| number)` | `id` | 行唯一标识。默认读取每行的`id` 字段；如果数据不是 `id` 主键，请显式传入字段名或函数。 |
|
|
90
90
|
| `width` | `number \| string` | `100%` | 表格宽度。数字按像素处理，字符串可传`100%`、`80vw` 等。 |
|
|
91
|
-
| `height` | `number \| string` | `100%` |
|
|
92
|
-
| `
|
|
93
|
-
| `rowHeight` | `number` | `
|
|
94
|
-
| `headerHeight` | `number` | `
|
|
91
|
+
| `height` | `number \| string` | `100%` | 表格最大高度。默认继承父容器高度；如果父容器没有可计算高度，则回落到`480px`。数据较少时默认按真实内容高度收缩，数据较多时不超过该高度。 |
|
|
92
|
+
| `layout` | `{ rowHeight?: number; headerHeight?: number }` | `{ rowHeight: 36, headerHeight: 40 }` | 表格布局尺寸配置。推荐把行高、表头高度等样式相关参数放在这里；自定义多行表头会以 `headerHeight` 为最小高度自动撑开。 |
|
|
93
|
+
| `rowHeight` | `number` | `36` | 已兼容保留，建议改用 `layout.rowHeight`。 |
|
|
94
|
+
| `headerHeight` | `number` | `40` | 已兼容保留，建议改用 `layout.headerHeight`。 |
|
|
95
95
|
| `fixedHeader` | `boolean` | `true` | 表头是否固定在顶部。 |
|
|
96
96
|
| `locale` | `'zh-CN' \| 'en-US' \| LocaleConfig` | `'zh-CN'` | 国际化配置。传字符串时使用内置中英文文案；传对象时可通过`language` 指定语言，并通过 `labels` 覆盖文案。 |
|
|
97
|
-
| `
|
|
97
|
+
| `borderless` | `boolean` | `false` | 是否弱化竖向边框。开启后隐藏单元格之间的竖线，但保留横向分隔线。 |
|
|
98
|
+
| `verticalBorderless` | `boolean` | `false` | 已兼容保留，建议改用 `borderless`。 |
|
|
98
99
|
| `striped` | `boolean \| string` | `false` | 是否显示斑马纹行背景。传`true` 使用主题变量，传颜色字符串可自定义斑马纹颜色，例如 `'#f6faff'`。 |
|
|
99
100
|
| `highlight` | `{ editedCells?: boolean \| string; insertedRows?: boolean \| string }` | `{}` | 高亮反馈配置。`editedCells` 控制编辑过的单元格底色，`insertedRows` 控制乐观插入行底色；传 `true` 使用默认色，传颜色字符串可自定义。 |
|
|
100
|
-
| `cellSpans` | `
|
|
101
|
+
| `cellSpans` | `TableCellSpan[] \| ((ctx) => TableCellSpan \| { rowSpan?: number; colSpan?: number } \| null)` | `[]` | 合并主体单元格配置。可传数组，也可传函数按单元格生成规则。推荐使用 `rowKey` 定位；横向合并会限制在同一个固定列分区内，工具列不会参与合并。 |
|
|
101
102
|
| `loading` | `boolean` | `false` | 显示加载态。 |
|
|
102
103
|
| `loadingContent` | `ReactNode` | - | 自定义加载内容。传入后，首次加载和刷新加载不再区分，都会统一展示这个内容。 |
|
|
103
104
|
| `virtualized` | `boolean \| { enabled?: boolean; overscan?: number }` | `true` | 虚拟渲染配置。传`false` 时渲染全部行列；传对象时可通过 `enabled` 开关，并用 `overscan` 配置可见范围外的缓冲行列数量，默认 `4`。 |
|
|
@@ -119,7 +120,7 @@ export function Example() {
|
|
|
119
120
|
| `columnDraggable` | `boolean` | `true` | 是否允许拖拽调整列顺序。默认开启，普通列默认显示表头拖拽入口，传`false` 可关闭。 |
|
|
120
121
|
| `columnResizable` | `boolean` | `false` | 是否允许拖拽调整列宽。 |
|
|
121
122
|
| `onColumnOrderChange` | `(sourceIndex, targetIndex) => void` | - | 列拖拽排序回调。需要在外部更新`columns`。 |
|
|
122
|
-
| `onColumnResize` | `(columnKey, width) => void` | - |
|
|
123
|
+
| `onColumnResize` | `(columnKey, width) => void` | - | 列宽变化回调。未传时组件会在内部维护列宽；传入后可用于持久化或受控同步。 |
|
|
123
124
|
| `rowDraggable` | `boolean` | `false` | 是否允许拖拽调整行顺序。开启后组件自动生成左侧拖拽手柄列，不需要在`columns` 中配置。 |
|
|
124
125
|
| `onRowOrderChange` | `(sourceIndex, targetIndex) => void` | - | 行拖拽排序回调。需要在外部更新`rows`。 |
|
|
125
126
|
| `onInsertRows` | `(event) => void` | - | 右键菜单插入行回调。 |
|
|
@@ -169,6 +170,19 @@ export function Example() {
|
|
|
169
170
|
/>
|
|
170
171
|
```
|
|
171
172
|
|
|
173
|
+
也可以传函数按单元格声明规则。函数返回值会默认使用当前单元格作为锚点，因此只需要返回跨度：
|
|
174
|
+
|
|
175
|
+
```tsx
|
|
176
|
+
<Table
|
|
177
|
+
columns={columns}
|
|
178
|
+
rows={rows}
|
|
179
|
+
cellSpans={({ rowIndex, column }) => {
|
|
180
|
+
if (column.key === 'department' && rowIndex % 3 === 0) return { rowSpan: 2 };
|
|
181
|
+
return null;
|
|
182
|
+
}}
|
|
183
|
+
/>
|
|
184
|
+
```
|
|
185
|
+
|
|
172
186
|
`rowKey` 优先于 `rowIndex`，在排序、过滤或插入删除行后更稳定。被合并覆盖的单元格不会单独绘制或命中，点击覆盖区域会选中合并区域的锚点单元格。横向合并不会跨越固定左列、滚动列、固定右列这三个区域；如果声明跨区，组件会自动收缩到当前区域内。
|
|
173
187
|
|
|
174
188
|
## Column 参数
|
|
@@ -177,6 +191,8 @@ export function Example() {
|
|
|
177
191
|
| -------------- | -------------------------------------------------------------------------- | -------------------- | ------------------------------------------------------------------------------------------- |
|
|
178
192
|
| `key` | `string` | 必填 | 列唯一标识。排序、筛选、选择、编辑回调都使用它。 |
|
|
179
193
|
| `title` | `string` | 必填 | 表头展示文本。 |
|
|
194
|
+
| `renderHeader` | `(column) => ReactNode` | - | 自定义表头 React 内容。多行内容会自动撑开表头高度；`title` 仍用于 tooltip、拖拽预览和回退文本。 |
|
|
195
|
+
| `children` | `GridColumn<Row>[]` | - | 子列配置。传入后该列作为多级表头分组，只有叶子列渲染数据单元格。 |
|
|
180
196
|
| `dataIndex` | `keyof Row` | - | 从行数据中读取和写入的字段。工具列可不传。 |
|
|
181
197
|
| `width` | `number` | `140` | 列宽，单位 px。最小宽度由内部布局保护。 |
|
|
182
198
|
| `fixed` | `'left' \| 'right'` | - | 固定列位置。左/右固定列会覆盖滚动列并显示阴影。 |
|
|
@@ -190,6 +206,31 @@ export function Example() {
|
|
|
190
206
|
| `summary` | `boolean \| ((rows, column) => ReactNode)` | `false` | 是否在合计行显示该列合计。传`true` 自动累加数字值；传函数可自定义合计内容。 |
|
|
191
207
|
| `cellStyle` | `(value, row, rowIndex) => { color?: string; backgroundColor?: string }` | - | 自定义单元格绘制样式。支持文本颜色和背景色，适合金额、状态等条件高亮。 |
|
|
192
208
|
|
|
209
|
+
### 多级表头
|
|
210
|
+
|
|
211
|
+
列可以通过 `children` 组成多级表头。分组列只负责展示表头，数据、排序、筛选、编辑等能力由叶子列承载：
|
|
212
|
+
|
|
213
|
+
```tsx
|
|
214
|
+
const columns: GridColumn<Person>[] = [
|
|
215
|
+
{
|
|
216
|
+
key: 'basic',
|
|
217
|
+
title: '基础信息',
|
|
218
|
+
children: [
|
|
219
|
+
{ key: 'name', title: '姓名', dataIndex: 'name', fixed: 'left' },
|
|
220
|
+
{ key: 'department', title: '部门', dataIndex: 'department' },
|
|
221
|
+
],
|
|
222
|
+
},
|
|
223
|
+
{
|
|
224
|
+
key: 'work',
|
|
225
|
+
title: '工作信息',
|
|
226
|
+
children: [
|
|
227
|
+
{ key: 'role', title: '岗位', dataIndex: 'role' },
|
|
228
|
+
{ key: 'amount', title: '金额', dataIndex: 'amount', align: 'right' },
|
|
229
|
+
],
|
|
230
|
+
},
|
|
231
|
+
];
|
|
232
|
+
```
|
|
233
|
+
|
|
193
234
|
## 列合计
|
|
194
235
|
|
|
195
236
|
合计行由表格级 `summary` 和列级 `columns[].summary` 共同控制：表格级 `summary` 控制是否显示、位置、内部竖线和空白填充；列级 `summary` 控制这一列显示什么合计内容。默认不显示合计行；传 `summary={true}` 或对象即开启合计行。合计行不参与虚拟滚动、排序、筛选、选择和编辑。
|
|
@@ -451,7 +492,7 @@ const visibleRows = useMemo(() => {
|
|
|
451
492
|
|
|
452
493
|
## 拖拽和列宽
|
|
453
494
|
|
|
454
|
-
|
|
495
|
+
拖拽排序采用外部受控数据模式：组件告诉你发生了什么，真正的 `rows` 或 `columns` 更新由你完成。列宽调整支持非受控使用，只传 `columnResizable` 即可拖动；如果需要持久化宽度，可以监听 `onColumnResize` 并同步到你的列配置。
|
|
455
496
|
|
|
456
497
|
`columnDraggable` 默认开启，普通列会自动显示表头拖拽入口。行选择和行拖拽是表格级配置：开启 `rowSelection` 后自动生成左侧选择列，开启 `rowDraggable` 后自动生成左侧拖拽手柄列，不需要在 `columns` 里配置 `rowSelection` 或 `rowDragHandle`。
|
|
457
498
|
|