@canvas-components/list-table 0.2.2 → 0.2.3
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 +54 -36
- package/dist/index.cjs +12 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +15 -1
- package/dist/index.d.ts +15 -1
- package/dist/index.js +12 -0
- package/dist/index.js.map +1 -1
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -86,47 +86,49 @@ table.mount();
|
|
|
86
86
|
|
|
87
87
|
### 列配置 `ListTableColumn`
|
|
88
88
|
|
|
89
|
-
| 属性
|
|
90
|
-
|
|
|
91
|
-
| `key`
|
|
92
|
-
| `title`
|
|
93
|
-
| `dataIndex`
|
|
94
|
-
| `children`
|
|
95
|
-
| `width`
|
|
96
|
-
| `minWidth` / `maxWidth`
|
|
97
|
-
| `align`
|
|
98
|
-
| `headerAlign`
|
|
99
|
-
| `fixed`
|
|
100
|
-
| `hidden`
|
|
101
|
-
| `ellipsis`
|
|
102
|
-
| `editable`
|
|
103
|
-
| `formItemProps`
|
|
104
|
-
| `resizable`
|
|
105
|
-
| `draggable`
|
|
106
|
-
| `allowSort`
|
|
107
|
-
| `allowFilter`
|
|
108
|
-
| `filterOptions`
|
|
109
|
-
| `cellType`
|
|
110
|
-
| `moneyFormat`
|
|
111
|
-
| `dataFormat`
|
|
112
|
-
| `cellStyle.verticalAlign`
|
|
113
|
-
| `headerStyle.verticalAlign` | `"top" \| "middle" \| "bottom"`
|
|
114
|
-
| `render`
|
|
115
|
-
| `onCell`
|
|
116
|
-
| `summary`
|
|
117
|
-
| `summaryTitle`
|
|
89
|
+
| 属性 | 类型 | 说明 |
|
|
90
|
+
| --------------------------- | ----------------------------------------------------------------------------- | --------------------------------------------- |
|
|
91
|
+
| `key` | `string` | 列唯一标识 |
|
|
92
|
+
| `title` | `string` | 列标题 |
|
|
93
|
+
| `dataIndex` | `string \| number \| Array<string \| number>` | 取值路径 |
|
|
94
|
+
| `children` | `ListTableColumn[]` | 子列，用于多级表头 |
|
|
95
|
+
| `width` | `number` | 列宽 |
|
|
96
|
+
| `minWidth` / `maxWidth` | `number` | 允许调整的最小 / 最大列宽 |
|
|
97
|
+
| `align` | `"left" \| "center" \| "right"` | 内容对齐 |
|
|
98
|
+
| `headerAlign` | `"left" \| "center" \| "right"` | 表头水平对齐，未传时回退到 `align` |
|
|
99
|
+
| `fixed` | `"left" \| "right"` | 固定列 |
|
|
100
|
+
| `hidden` | `boolean` | 是否隐藏 |
|
|
101
|
+
| `ellipsis` | `boolean` | 超出是否省略 |
|
|
102
|
+
| `editable` | `boolean \| (text, record, index) => boolean` | 是否允许编辑 |
|
|
103
|
+
| `formItemProps` | `ListTableFormItemPropsConfig` | 编辑器配置 |
|
|
104
|
+
| `resizable` | `boolean` | 单列是否允许调整宽度 |
|
|
105
|
+
| `draggable` | `boolean` | 单列是否允许拖拽 |
|
|
106
|
+
| `allowSort` | `boolean` | 是否开启排序 |
|
|
107
|
+
| `allowFilter` | `boolean` | 是否开启过滤 |
|
|
108
|
+
| `filterOptions` | `ListTableFilterOption[]` | 精确过滤选项 |
|
|
109
|
+
| `cellType` | `ListTableCellContent["type"]` | 内建单元格类型 |
|
|
110
|
+
| `moneyFormat` | `ListTableMoneyFormatOptions` | 金额格式配置，仅在 `cellType: "money"` 时生效 |
|
|
111
|
+
| `dataFormat` | `"default" \| "number" \| "thousands" \| "money"` | 右键菜单设置的数据展示格式 |
|
|
112
|
+
| `cellStyle.verticalAlign` | `"top" \| "middle" \| "bottom"` | 表体垂直对齐 |
|
|
113
|
+
| `headerStyle.verticalAlign` | `"top" \| "middle" \| "bottom"` | 表头垂直对齐 |
|
|
114
|
+
| `render` | `(value, record, rowIndex, column) => ...` | 自定义渲染 |
|
|
115
|
+
| `onCell` | `(value, record, rowIndex, column) => { rowSpan?: number; colSpan?: number }` | 单元格跨度控制 |
|
|
116
|
+
| `summary` | `boolean \| ListTableSummaryConfig` | 汇总配置 |
|
|
117
|
+
| `summaryTitle` | `string` | 汇总标题文本 |
|
|
118
118
|
|
|
119
119
|
### 常见嵌套能力
|
|
120
120
|
|
|
121
|
-
| 配置 | 说明
|
|
122
|
-
| -------------- |
|
|
123
|
-
| `query` | 排序、筛选、远程查询、自动合并单元格
|
|
124
|
-
| `rowSelection` | checkbox / radio 行选择
|
|
125
|
-
| `expandable` | 树形数据、详情展开、展开列
|
|
126
|
-
| `pagination` | 按钮分页或滚动加载
|
|
127
|
-
| `rowDrag` | 行拖拽、跨表拖拽、拖放回调
|
|
121
|
+
| 配置 | 说明 |
|
|
122
|
+
| -------------- | -------------------------------------------------------------- |
|
|
123
|
+
| `query` | 排序、筛选、远程查询、自动合并单元格 |
|
|
124
|
+
| `rowSelection` | checkbox / radio 行选择 |
|
|
125
|
+
| `expandable` | 树形数据、详情展开、展开列 |
|
|
126
|
+
| `pagination` | 按钮分页或滚动加载 |
|
|
127
|
+
| `rowDrag` | 行拖拽、跨表拖拽、拖放回调 |
|
|
128
128
|
| `contextMenu` | 复制、导出、冻结、列显示、对齐、数据格式、密度、缩放等菜单能力 |
|
|
129
129
|
|
|
130
|
+
`rowSelection.selectRowByClick` 控制点击普通表体区域时是否同步切换 checkbox / radio 选择状态，默认关闭。该配置直接复用表格内部选择状态，无需通过外部 `key` 强制重新创建表格；查看详情等业务点击仍使用 `onRow().onClick`。
|
|
131
|
+
|
|
130
132
|
## 方法说明
|
|
131
133
|
|
|
132
134
|
| 方法 | 签名 | 说明 |
|
|
@@ -197,6 +199,22 @@ const columns = [
|
|
|
197
199
|
];
|
|
198
200
|
```
|
|
199
201
|
|
|
202
|
+
## 行点击事件
|
|
203
|
+
|
|
204
|
+
`onRow` 使用 AntD Table 风格的回调结构。由于表格由 Canvas 渲染，目前只支持整行点击事件；行高亮继续由表格内置选区处理。
|
|
205
|
+
|
|
206
|
+
```ts
|
|
207
|
+
const table = new ListTable(container, {
|
|
208
|
+
columns,
|
|
209
|
+
dataSource,
|
|
210
|
+
onRow: (record, rowIndex) => ({
|
|
211
|
+
onClick: (event) => {
|
|
212
|
+
console.log(record, rowIndex, event);
|
|
213
|
+
},
|
|
214
|
+
}),
|
|
215
|
+
});
|
|
216
|
+
```
|
|
217
|
+
|
|
200
218
|
## 推荐搭配
|
|
201
219
|
|
|
202
220
|
- 原生 DOM 场景：直接使用 `ListTable`
|
package/dist/index.cjs
CHANGED
|
@@ -13868,6 +13868,12 @@ var ListTableEventController = class {
|
|
|
13868
13868
|
this.host.suppressNextClick = false;
|
|
13869
13869
|
return;
|
|
13870
13870
|
}
|
|
13871
|
+
if ((result.area === "body" || result.area === "body-content") && typeof result.rowIndex === "number") {
|
|
13872
|
+
const record = this.host.getDisplayData()[result.rowIndex];
|
|
13873
|
+
if (record !== void 0) {
|
|
13874
|
+
this.host.options.onRow?.(record, result.rowIndex)?.onClick?.(event);
|
|
13875
|
+
}
|
|
13876
|
+
}
|
|
13871
13877
|
this.host.summarySelected = result.area === "summary";
|
|
13872
13878
|
if ((result.area === "header" || result.area === "header-selection" || result.area === "sort-trigger" || result.area === "filter-trigger" || result.area === "fixed-trigger" || event.shiftKey && result.area === "column-collapse-trigger") && result.columnKey) {
|
|
13873
13879
|
this.host.clearBodySelection();
|
|
@@ -13971,6 +13977,12 @@ var ListTableEventController = class {
|
|
|
13971
13977
|
}
|
|
13972
13978
|
return;
|
|
13973
13979
|
}
|
|
13980
|
+
if ((result.area === "body" || result.area === "body-content") && typeof result.rowIndex === "number" && this.host.options.rowSelection?.selectRowByClick && result.columnKey !== ROW_SELECTION_COLUMN_KEY && result.columnKey !== EXPAND_COLUMN_KEY) {
|
|
13981
|
+
const record = this.host.getDisplayData()[result.rowIndex];
|
|
13982
|
+
if (record !== void 0) {
|
|
13983
|
+
this.host.toggleRowSelection(record, result.rowIndex);
|
|
13984
|
+
}
|
|
13985
|
+
}
|
|
13974
13986
|
if (result.area === "body" && typeof result.rowIndex === "number" && this.host.options.expandable?.expandRowByClick && result.columnKey !== ROW_SELECTION_COLUMN_KEY && result.columnKey !== EXPAND_COLUMN_KEY && this.host.toggleRowExpand(result.rowIndex)) {
|
|
13975
13987
|
return;
|
|
13976
13988
|
}
|