@lensui/lens-table 0.1.3 → 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 +28 -2
- package/dist/index.cjs +784 -176
- package/dist/index.css +109 -2
- package/dist/index.d.cts +9 -1
- package/dist/index.d.ts +9 -1
- package/dist/index.js +784 -176
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -120,7 +120,7 @@ export function Example() {
|
|
|
120
120
|
| `columnDraggable` | `boolean` | `true` | 是否允许拖拽调整列顺序。默认开启，普通列默认显示表头拖拽入口，传`false` 可关闭。 |
|
|
121
121
|
| `columnResizable` | `boolean` | `false` | 是否允许拖拽调整列宽。 |
|
|
122
122
|
| `onColumnOrderChange` | `(sourceIndex, targetIndex) => void` | - | 列拖拽排序回调。需要在外部更新`columns`。 |
|
|
123
|
-
| `onColumnResize` | `(columnKey, width) => void` | - |
|
|
123
|
+
| `onColumnResize` | `(columnKey, width) => void` | - | 列宽变化回调。未传时组件会在内部维护列宽；传入后可用于持久化或受控同步。 |
|
|
124
124
|
| `rowDraggable` | `boolean` | `false` | 是否允许拖拽调整行顺序。开启后组件自动生成左侧拖拽手柄列，不需要在`columns` 中配置。 |
|
|
125
125
|
| `onRowOrderChange` | `(sourceIndex, targetIndex) => void` | - | 行拖拽排序回调。需要在外部更新`rows`。 |
|
|
126
126
|
| `onInsertRows` | `(event) => void` | - | 右键菜单插入行回调。 |
|
|
@@ -192,6 +192,7 @@ export function Example() {
|
|
|
192
192
|
| `key` | `string` | 必填 | 列唯一标识。排序、筛选、选择、编辑回调都使用它。 |
|
|
193
193
|
| `title` | `string` | 必填 | 表头展示文本。 |
|
|
194
194
|
| `renderHeader` | `(column) => ReactNode` | - | 自定义表头 React 内容。多行内容会自动撑开表头高度；`title` 仍用于 tooltip、拖拽预览和回退文本。 |
|
|
195
|
+
| `children` | `GridColumn<Row>[]` | - | 子列配置。传入后该列作为多级表头分组，只有叶子列渲染数据单元格。 |
|
|
195
196
|
| `dataIndex` | `keyof Row` | - | 从行数据中读取和写入的字段。工具列可不传。 |
|
|
196
197
|
| `width` | `number` | `140` | 列宽，单位 px。最小宽度由内部布局保护。 |
|
|
197
198
|
| `fixed` | `'left' \| 'right'` | - | 固定列位置。左/右固定列会覆盖滚动列并显示阴影。 |
|
|
@@ -205,6 +206,31 @@ export function Example() {
|
|
|
205
206
|
| `summary` | `boolean \| ((rows, column) => ReactNode)` | `false` | 是否在合计行显示该列合计。传`true` 自动累加数字值；传函数可自定义合计内容。 |
|
|
206
207
|
| `cellStyle` | `(value, row, rowIndex) => { color?: string; backgroundColor?: string }` | - | 自定义单元格绘制样式。支持文本颜色和背景色，适合金额、状态等条件高亮。 |
|
|
207
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
|
+
|
|
208
234
|
## 列合计
|
|
209
235
|
|
|
210
236
|
合计行由表格级 `summary` 和列级 `columns[].summary` 共同控制：表格级 `summary` 控制是否显示、位置、内部竖线和空白填充；列级 `summary` 控制这一列显示什么合计内容。默认不显示合计行；传 `summary={true}` 或对象即开启合计行。合计行不参与虚拟滚动、排序、筛选、选择和编辑。
|
|
@@ -466,7 +492,7 @@ const visibleRows = useMemo(() => {
|
|
|
466
492
|
|
|
467
493
|
## 拖拽和列宽
|
|
468
494
|
|
|
469
|
-
|
|
495
|
+
拖拽排序采用外部受控数据模式：组件告诉你发生了什么，真正的 `rows` 或 `columns` 更新由你完成。列宽调整支持非受控使用，只传 `columnResizable` 即可拖动；如果需要持久化宽度，可以监听 `onColumnResize` 并同步到你的列配置。
|
|
470
496
|
|
|
471
497
|
`columnDraggable` 默认开启，普通列会自动显示表头拖拽入口。行选择和行拖拽是表格级配置：开启 `rowSelection` 后自动生成左侧选择列，开启 `rowDraggable` 后自动生成左侧拖拽手柄列，不需要在 `columns` 里配置 `rowSelection` 或 `rowDragHandle`。
|
|
472
498
|
|