stk-table-vue 1.2.5 → 1.2.6
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 +194 -194
- package/lib/{Dropdown-C4c7Nmgf.js → Dropdown-BAANgg_5.js} +2 -2
- package/lib/{StkTable-CzktjLlV.js → StkTable-CGcxwpdb.js} +2 -1
- package/lib/stk-table-vue.js +3 -3
- package/lib/style.css +1 -1
- package/package.json +93 -93
- package/src/StkTable/StkTable.vue +2362 -2359
- package/src/StkTable/components/DragHandle.vue +9 -9
- package/src/StkTable/components/SortIcon.vue +6 -6
- package/src/StkTable/components/TreeNodeCell.vue +19 -19
- package/src/StkTable/components/TriangleIcon.vue +3 -3
- package/src/StkTable/const.ts +50 -50
- package/src/StkTable/custom-cells/ChangeCell/ChangeCell.less +34 -34
- package/src/StkTable/custom-cells/ChangeCell/createChangeCell.ts +90 -90
- package/src/StkTable/custom-cells/ChangeCell/index.ts +4 -4
- package/src/StkTable/custom-cells/CheckboxCell/CheckboxCell.less +14 -14
- package/src/StkTable/custom-cells/CheckboxCell/CheckboxCell.vue +56 -56
- package/src/StkTable/custom-cells/CheckboxCell/createCheckboxCell.ts +146 -146
- package/src/StkTable/custom-cells/CheckboxCell/index.ts +5 -5
- package/src/StkTable/custom-cells/FilterCell/Dropdown/index.ts +16 -16
- package/src/StkTable/custom-cells/FilterCell/Dropdown/index.vue +186 -186
- package/src/StkTable/custom-cells/FilterCell/Filter.less +118 -118
- package/src/StkTable/custom-cells/FilterCell/Filter.vue +66 -66
- package/src/StkTable/custom-cells/FilterCell/createFilterCell.ts +120 -120
- package/src/StkTable/custom-cells/FilterCell/index.ts +6 -6
- package/src/StkTable/custom-cells/FilterCell/types.ts +43 -43
- package/src/StkTable/custom-cells/NumberCell/createNumberCell.ts +43 -43
- package/src/StkTable/custom-cells/NumberCell/index.ts +2 -2
- package/src/StkTable/custom-cells/utils/formatNumber.ts +137 -137
- package/src/StkTable/features/const.ts +1 -1
- package/src/StkTable/features/index.ts +1 -1
- package/src/StkTable/features/useAreaSelection.ts +1240 -1240
- package/src/StkTable/index.ts +20 -20
- package/src/StkTable/mergeCellsCache.ts +69 -69
- package/src/StkTable/registerFeature.ts +40 -40
- package/src/StkTable/style.less +791 -791
- package/src/StkTable/types/highlightDimOptions.ts +28 -28
- package/src/StkTable/types/index.ts +503 -503
- package/src/StkTable/useAutoResize.ts +87 -87
- package/src/StkTable/useColResize.ts +202 -202
- package/src/StkTable/useFixedCol.ts +168 -168
- package/src/StkTable/useFixedStyle.ts +75 -75
- package/src/StkTable/useGetFixedColPosition.ts +63 -63
- package/src/StkTable/useHighlight.ts +270 -270
- package/src/StkTable/useIndexResolver.ts +29 -29
- package/src/StkTable/useKeyboardArrowScroll.ts +114 -114
- package/src/StkTable/useMaxRowSpan.ts +60 -60
- package/src/StkTable/useMergeCells.ts +541 -541
- package/src/StkTable/useRowExpand.ts +81 -81
- package/src/StkTable/useScrollRowByRow.ts +96 -96
- package/src/StkTable/useScrollbar.ts +177 -177
- package/src/StkTable/useSorter.ts +267 -267
- package/src/StkTable/useTableColumns.ts +142 -142
- package/src/StkTable/useThDrag.ts +94 -94
- package/src/StkTable/useTrDrag.ts +100 -100
- package/src/StkTable/useTree.ts +253 -253
- package/src/StkTable/useVirtualScroll.ts +1032 -1032
- package/src/StkTable/useWheeling.ts +23 -23
- package/src/StkTable/utils/constRefUtils.ts +29 -29
- package/src/StkTable/utils/index.ts +331 -331
- package/src/StkTable/utils/rowHeightFenwickTree.ts +74 -74
- package/src/StkTable/utils/useTriggerRef.ts +33 -33
- package/src/VirtualTree.vue +622 -622
- package/src/VirtualTreeSelect.vue +367 -367
- package/src/vite-env.d.ts +10 -10
package/README.md
CHANGED
|
@@ -1,194 +1,194 @@
|
|
|
1
|
-
<p align="center">
|
|
2
|
-
<a href="https://ja-plus.github.io/stk-table-vue/">
|
|
3
|
-
<img src="./docs-src/public/assets/logo.svg" width="152">
|
|
4
|
-
</a>
|
|
5
|
-
<h3 align='center'>Stk Table Vue</h3>
|
|
6
|
-
<p align="center">
|
|
7
|
-
<a href="https://www.npmjs.com/package/stk-table-vue"><img src="https://img.shields.io/npm/v/stk-table-vue"></a>
|
|
8
|
-
<a href="https://www.npmjs.com/package/stk-table-vue"><img src="https://img.shields.io/npm/dw/stk-table-vue"></a>
|
|
9
|
-
<a href="https://github.com/ja-plus/stk-table-vue/stargazers"><img src="https://img.shields.io/github/stars/ja-plus/stk-table-vue.svg"></a>
|
|
10
|
-
<a href="https://raw.githubusercontent.com/ja-plus/stk-table-vue/master/LICENSE"><img src="https://img.shields.io/npm/l/stk-table-vue"></a>
|
|
11
|
-
<a href="https://github.com/ja-plus/stk-table-vue"><img src="https://img.shields.io/npm/types/stk-table-vue"></a>
|
|
12
|
-
</p>
|
|
13
|
-
</p>
|
|
14
|
-
|
|
15
|
-
Stk Table Vue(Sticky Table) is a high-performance virtual scrolling table component based on Vue 3 / Vue 2.7.
|
|
16
|
-
|
|
17
|
-
Smooth performance with tens of thousands of rows. Designed for real-time data display with built-in highlighting and animation effects.
|
|
18
|
-
|
|
19
|
-
- Vue 3 & Vue 2.7 support
|
|
20
|
-
- Virtual scrolling (X & Y axis)
|
|
21
|
-
- CSS `sticky` based fixed columns & fixed header
|
|
22
|
-
- Multi-level header with horizontal virtual scroll
|
|
23
|
-
- Tree table & expandable rows
|
|
24
|
-
- Area selection with keyboard navigation
|
|
25
|
-
- Cell highlighting with Animation API
|
|
26
|
-
- Built-in custom cells: Filter, Editable, Checkbox, Number, Change
|
|
27
|
-
- Column resize, header drag, row drag
|
|
28
|
-
- Merge cells (virtual mode, huge rowspan / colspan supported)
|
|
29
|
-
- Custom scrollbar
|
|
30
|
-
- Sortable & filterable
|
|
31
|
-
- Theme support (dark / light)
|
|
32
|
-
- CSS variables for easy customization
|
|
33
|
-
- Based on native `<table>` element
|
|
34
|
-
- Zero third-party runtime dependencies
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
## Documentation
|
|
38
|
-
### [Stk Table Vue Official](https://ja-plus.github.io/stk-table-vue/)
|
|
39
|
-
### [Stk Table React Official](https://ja-plus.github.io/stk-table-react/)
|
|
40
|
-
### [Stk Table Svelte Official](https://ja-plus.github.io/stk-table-svelte/)
|
|
41
|
-
### [Stk Table Solid Official](https://ja-plus.github.io/stk-table-solid/)
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
## Repo:
|
|
45
|
-
- [Github](https://github.com/ja-plus/stk-table-vue)
|
|
46
|
-
- [Gitee](https://gitee.com/japlus/stk-table-vue)
|
|
47
|
-
|
|
48
|
-
## Demo
|
|
49
|
-
[<span style="font-size: 16px;font-weight: bold;">Online Demo in stackblitz</span>](https://stackblitz.com/edit/vitejs-vite-ad91hh?file=src%2FDemo%2Findex.vue)
|
|
50
|
-
|
|
51
|
-
## Usage
|
|
52
|
-
> npm install stk-table-vue
|
|
53
|
-
|
|
54
|
-
```html
|
|
55
|
-
<script setup>
|
|
56
|
-
import { StkTable } from 'stk-table-vue'
|
|
57
|
-
import { ref, useTemplateRef } from 'vue'
|
|
58
|
-
const stkTableRef = ref<InstanceType<typeof StkTable>>();
|
|
59
|
-
// or Vue 3.5 useTemplateRef
|
|
60
|
-
const stkTableRef = useTemplateRef('stkTableRef');
|
|
61
|
-
|
|
62
|
-
// highlight row
|
|
63
|
-
stkTableRef.value.setHighlightDimRow([rowKey], {
|
|
64
|
-
method: 'css' | 'animation', // default animation
|
|
65
|
-
className: 'custom-class-name', // for method 'css'
|
|
66
|
-
keyframe: [{ backgroundColor: '#aaa' }, { backgroundColor: '#222' }], // same as https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Animations_API/Keyframe_Formats
|
|
67
|
-
duration: 2000,
|
|
68
|
-
});
|
|
69
|
-
// highlight cell
|
|
70
|
-
stkTableRef.value.setHighlightDimCell(rowKey, colDataIndex, {
|
|
71
|
-
method: 'css' | 'animation',
|
|
72
|
-
className: 'custom-class-name', // for method 'css'
|
|
73
|
-
keyframe: [{ backgroundColor: '#aaa' }, { backgroundColor: '#222' }], // for method 'animation'
|
|
74
|
-
duration: 2000,
|
|
75
|
-
});
|
|
76
|
-
|
|
77
|
-
const columns = [
|
|
78
|
-
{title: 'name', dataIndex: 'name'},
|
|
79
|
-
{title: 'age', dataIndex: 'age'},
|
|
80
|
-
{title: 'address', dataIndex: 'address'},
|
|
81
|
-
];
|
|
82
|
-
|
|
83
|
-
const dataSource = [
|
|
84
|
-
{id: 1, name: 'John', age: 32, address: 'New York'},
|
|
85
|
-
{id: 2, name: 'Jim', age: 42, address: 'London'},
|
|
86
|
-
{id: 3, name: 'Joe', age: 52, address: 'Tokyo'},
|
|
87
|
-
{id: 4, name: 'Jack', age: 62, address: 'Sydney'},
|
|
88
|
-
{id: 5, name: 'Jill', age: 72, address: 'Paris'},
|
|
89
|
-
]
|
|
90
|
-
|
|
91
|
-
</script>
|
|
92
|
-
|
|
93
|
-
<template>
|
|
94
|
-
<StkTable ref='stkTableRef' row-key="id" :data-source="dataSource" :columns="columns"></StkTable>
|
|
95
|
-
</template>
|
|
96
|
-
|
|
97
|
-
```
|
|
98
|
-
|
|
99
|
-
### Vue2.7 Usage
|
|
100
|
-
[Vue2.7 Usage](https://ja-plus.github.io/stk-table-vue/main/start/vue2-usage.html)
|
|
101
|
-
|
|
102
|
-
## API
|
|
103
|
-
* [Props](https://ja-plus.github.io/stk-table-vue/main/api/table-props.html)
|
|
104
|
-
|
|
105
|
-
* [Emits](https://ja-plus.github.io/stk-table-vue/main/api/emits.html)
|
|
106
|
-
|
|
107
|
-
* [Slots](https://ja-plus.github.io/stk-table-vue/main/api/slots.html)
|
|
108
|
-
|
|
109
|
-
* [Expose](https://ja-plus.github.io/stk-table-vue/main/api/expose.html)
|
|
110
|
-
|
|
111
|
-
* [StkTableColumn: Define column type](https://ja-plus.github.io/stk-table-vue/main/api/stk-table-column.html)
|
|
112
|
-
|
|
113
|
-
* [Highlight: setHighlightDimCell & setHighlightDimRow](https://ja-plus.github.io/stk-table-vue/main/api/expose.html#sethighlightdimcell)
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
### Example
|
|
117
|
-
```vue
|
|
118
|
-
<template>
|
|
119
|
-
<StkTable
|
|
120
|
-
ref="stkTable"
|
|
121
|
-
row-key="name"
|
|
122
|
-
v-model:columns="columns"
|
|
123
|
-
:style="{height:props.height}"
|
|
124
|
-
theme='dark'
|
|
125
|
-
height='200px'
|
|
126
|
-
bordered="h"
|
|
127
|
-
:row-height="28"
|
|
128
|
-
:show-overflow="false"
|
|
129
|
-
:show-header-overflow="false"
|
|
130
|
-
:sort-remote="false"
|
|
131
|
-
col-resizable
|
|
132
|
-
header-drag
|
|
133
|
-
virtual
|
|
134
|
-
virtual-x
|
|
135
|
-
no-data-full
|
|
136
|
-
col-resizable
|
|
137
|
-
auto-resize
|
|
138
|
-
fixed-col-shadow
|
|
139
|
-
:col-min-width="10"
|
|
140
|
-
:headless="false"
|
|
141
|
-
:data-source="dataSource"
|
|
142
|
-
@current-change="onCurrentChange"
|
|
143
|
-
@row-menu="onRowMenu"
|
|
144
|
-
@header-row-menu="onHeaderRowMenu"
|
|
145
|
-
@row-click="onRowClick"
|
|
146
|
-
@row-dblclick="onRowDblclick"
|
|
147
|
-
@sort-change="handleSortChange"
|
|
148
|
-
@cell-click="onCellClick"
|
|
149
|
-
@header-cell-click="onHeaderCellClick"
|
|
150
|
-
@scroll="onTableScroll"
|
|
151
|
-
@scroll-x="onTableScrollX"
|
|
152
|
-
@col-order-change="onColOrderChange"
|
|
153
|
-
/>
|
|
154
|
-
</template>
|
|
155
|
-
<script setup>
|
|
156
|
-
import { h, defineComponent } from 'vue';
|
|
157
|
-
const columns = [
|
|
158
|
-
{
|
|
159
|
-
title: 'Name',
|
|
160
|
-
dataIndex: 'name',
|
|
161
|
-
fixed: 'left',
|
|
162
|
-
width: '200px',
|
|
163
|
-
headerClassName: 'my-th',
|
|
164
|
-
className: 'my-td',
|
|
165
|
-
sorter: true,
|
|
166
|
-
customHeaderCell: function FunctionalComponent(props){
|
|
167
|
-
return h(
|
|
168
|
-
'span',
|
|
169
|
-
{ style: 'overflow:hidden;text-overflow:ellipsis;white-space:nowrap' },
|
|
170
|
-
props.col.title + '(render) text-overflow,',
|
|
171
|
-
);
|
|
172
|
-
},
|
|
173
|
-
customCell: defineComponent({
|
|
174
|
-
setup(){
|
|
175
|
-
//...
|
|
176
|
-
return () => <div></div> // vue jsx
|
|
177
|
-
}
|
|
178
|
-
})
|
|
179
|
-
},
|
|
180
|
-
]
|
|
181
|
-
</script>
|
|
182
|
-
```
|
|
183
|
-
|
|
184
|
-
## Compare
|
|
185
|
-
Compare performance with other vue table [vue-virtual-table-benchmark](https://github.com/ja-plus/vue-virtual-table-benchmark)
|
|
186
|
-
|
|
187
|
-
[Benchmark Result Page](https://ja-plus.github.io/vue-virtual-table-benchmark/perf-report.html)
|
|
188
|
-
|
|
189
|
-
## Changelog
|
|
190
|
-
[CHANGELOG](CHANGELOG.md)
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
## License
|
|
194
|
-
[MIT](LICENSE)
|
|
1
|
+
<p align="center">
|
|
2
|
+
<a href="https://ja-plus.github.io/stk-table-vue/">
|
|
3
|
+
<img src="./docs-src/public/assets/logo.svg" width="152">
|
|
4
|
+
</a>
|
|
5
|
+
<h3 align='center'>Stk Table Vue</h3>
|
|
6
|
+
<p align="center">
|
|
7
|
+
<a href="https://www.npmjs.com/package/stk-table-vue"><img src="https://img.shields.io/npm/v/stk-table-vue"></a>
|
|
8
|
+
<a href="https://www.npmjs.com/package/stk-table-vue"><img src="https://img.shields.io/npm/dw/stk-table-vue"></a>
|
|
9
|
+
<a href="https://github.com/ja-plus/stk-table-vue/stargazers"><img src="https://img.shields.io/github/stars/ja-plus/stk-table-vue.svg"></a>
|
|
10
|
+
<a href="https://raw.githubusercontent.com/ja-plus/stk-table-vue/master/LICENSE"><img src="https://img.shields.io/npm/l/stk-table-vue"></a>
|
|
11
|
+
<a href="https://github.com/ja-plus/stk-table-vue"><img src="https://img.shields.io/npm/types/stk-table-vue"></a>
|
|
12
|
+
</p>
|
|
13
|
+
</p>
|
|
14
|
+
|
|
15
|
+
Stk Table Vue(Sticky Table) is a high-performance virtual scrolling table component based on Vue 3 / Vue 2.7.
|
|
16
|
+
|
|
17
|
+
Smooth performance with tens of thousands of rows. Designed for real-time data display with built-in highlighting and animation effects.
|
|
18
|
+
|
|
19
|
+
- Vue 3 & Vue 2.7 support
|
|
20
|
+
- Virtual scrolling (X & Y axis)
|
|
21
|
+
- CSS `sticky` based fixed columns & fixed header
|
|
22
|
+
- Multi-level header with horizontal virtual scroll
|
|
23
|
+
- Tree table & expandable rows
|
|
24
|
+
- Area selection with keyboard navigation
|
|
25
|
+
- Cell highlighting with Animation API
|
|
26
|
+
- Built-in custom cells: Filter, Editable, Checkbox, Number, Change
|
|
27
|
+
- Column resize, header drag, row drag
|
|
28
|
+
- Merge cells (virtual mode, huge rowspan / colspan supported)
|
|
29
|
+
- Custom scrollbar
|
|
30
|
+
- Sortable & filterable
|
|
31
|
+
- Theme support (dark / light)
|
|
32
|
+
- CSS variables for easy customization
|
|
33
|
+
- Based on native `<table>` element
|
|
34
|
+
- Zero third-party runtime dependencies
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
## Documentation
|
|
38
|
+
### [Stk Table Vue Official](https://ja-plus.github.io/stk-table-vue/)
|
|
39
|
+
### [Stk Table React Official](https://ja-plus.github.io/stk-table-react/)
|
|
40
|
+
### [Stk Table Svelte Official](https://ja-plus.github.io/stk-table-svelte/)
|
|
41
|
+
### [Stk Table Solid Official](https://ja-plus.github.io/stk-table-solid/)
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
## Repo:
|
|
45
|
+
- [Github](https://github.com/ja-plus/stk-table-vue)
|
|
46
|
+
- [Gitee](https://gitee.com/japlus/stk-table-vue)
|
|
47
|
+
|
|
48
|
+
## Demo
|
|
49
|
+
[<span style="font-size: 16px;font-weight: bold;">Online Demo in stackblitz</span>](https://stackblitz.com/edit/vitejs-vite-ad91hh?file=src%2FDemo%2Findex.vue)
|
|
50
|
+
|
|
51
|
+
## Usage
|
|
52
|
+
> npm install stk-table-vue
|
|
53
|
+
|
|
54
|
+
```html
|
|
55
|
+
<script setup>
|
|
56
|
+
import { StkTable } from 'stk-table-vue'
|
|
57
|
+
import { ref, useTemplateRef } from 'vue'
|
|
58
|
+
const stkTableRef = ref<InstanceType<typeof StkTable>>();
|
|
59
|
+
// or Vue 3.5 useTemplateRef
|
|
60
|
+
const stkTableRef = useTemplateRef('stkTableRef');
|
|
61
|
+
|
|
62
|
+
// highlight row
|
|
63
|
+
stkTableRef.value.setHighlightDimRow([rowKey], {
|
|
64
|
+
method: 'css' | 'animation', // default animation
|
|
65
|
+
className: 'custom-class-name', // for method 'css'
|
|
66
|
+
keyframe: [{ backgroundColor: '#aaa' }, { backgroundColor: '#222' }], // same as https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Animations_API/Keyframe_Formats
|
|
67
|
+
duration: 2000,
|
|
68
|
+
});
|
|
69
|
+
// highlight cell
|
|
70
|
+
stkTableRef.value.setHighlightDimCell(rowKey, colDataIndex, {
|
|
71
|
+
method: 'css' | 'animation',
|
|
72
|
+
className: 'custom-class-name', // for method 'css'
|
|
73
|
+
keyframe: [{ backgroundColor: '#aaa' }, { backgroundColor: '#222' }], // for method 'animation'
|
|
74
|
+
duration: 2000,
|
|
75
|
+
});
|
|
76
|
+
|
|
77
|
+
const columns = [
|
|
78
|
+
{title: 'name', dataIndex: 'name'},
|
|
79
|
+
{title: 'age', dataIndex: 'age'},
|
|
80
|
+
{title: 'address', dataIndex: 'address'},
|
|
81
|
+
];
|
|
82
|
+
|
|
83
|
+
const dataSource = [
|
|
84
|
+
{id: 1, name: 'John', age: 32, address: 'New York'},
|
|
85
|
+
{id: 2, name: 'Jim', age: 42, address: 'London'},
|
|
86
|
+
{id: 3, name: 'Joe', age: 52, address: 'Tokyo'},
|
|
87
|
+
{id: 4, name: 'Jack', age: 62, address: 'Sydney'},
|
|
88
|
+
{id: 5, name: 'Jill', age: 72, address: 'Paris'},
|
|
89
|
+
]
|
|
90
|
+
|
|
91
|
+
</script>
|
|
92
|
+
|
|
93
|
+
<template>
|
|
94
|
+
<StkTable ref='stkTableRef' row-key="id" :data-source="dataSource" :columns="columns"></StkTable>
|
|
95
|
+
</template>
|
|
96
|
+
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
### Vue2.7 Usage
|
|
100
|
+
[Vue2.7 Usage](https://ja-plus.github.io/stk-table-vue/main/start/vue2-usage.html)
|
|
101
|
+
|
|
102
|
+
## API
|
|
103
|
+
* [Props](https://ja-plus.github.io/stk-table-vue/main/api/table-props.html)
|
|
104
|
+
|
|
105
|
+
* [Emits](https://ja-plus.github.io/stk-table-vue/main/api/emits.html)
|
|
106
|
+
|
|
107
|
+
* [Slots](https://ja-plus.github.io/stk-table-vue/main/api/slots.html)
|
|
108
|
+
|
|
109
|
+
* [Expose](https://ja-plus.github.io/stk-table-vue/main/api/expose.html)
|
|
110
|
+
|
|
111
|
+
* [StkTableColumn: Define column type](https://ja-plus.github.io/stk-table-vue/main/api/stk-table-column.html)
|
|
112
|
+
|
|
113
|
+
* [Highlight: setHighlightDimCell & setHighlightDimRow](https://ja-plus.github.io/stk-table-vue/main/api/expose.html#sethighlightdimcell)
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
### Example
|
|
117
|
+
```vue
|
|
118
|
+
<template>
|
|
119
|
+
<StkTable
|
|
120
|
+
ref="stkTable"
|
|
121
|
+
row-key="name"
|
|
122
|
+
v-model:columns="columns"
|
|
123
|
+
:style="{height:props.height}"
|
|
124
|
+
theme='dark'
|
|
125
|
+
height='200px'
|
|
126
|
+
bordered="h"
|
|
127
|
+
:row-height="28"
|
|
128
|
+
:show-overflow="false"
|
|
129
|
+
:show-header-overflow="false"
|
|
130
|
+
:sort-remote="false"
|
|
131
|
+
col-resizable
|
|
132
|
+
header-drag
|
|
133
|
+
virtual
|
|
134
|
+
virtual-x
|
|
135
|
+
no-data-full
|
|
136
|
+
col-resizable
|
|
137
|
+
auto-resize
|
|
138
|
+
fixed-col-shadow
|
|
139
|
+
:col-min-width="10"
|
|
140
|
+
:headless="false"
|
|
141
|
+
:data-source="dataSource"
|
|
142
|
+
@current-change="onCurrentChange"
|
|
143
|
+
@row-menu="onRowMenu"
|
|
144
|
+
@header-row-menu="onHeaderRowMenu"
|
|
145
|
+
@row-click="onRowClick"
|
|
146
|
+
@row-dblclick="onRowDblclick"
|
|
147
|
+
@sort-change="handleSortChange"
|
|
148
|
+
@cell-click="onCellClick"
|
|
149
|
+
@header-cell-click="onHeaderCellClick"
|
|
150
|
+
@scroll="onTableScroll"
|
|
151
|
+
@scroll-x="onTableScrollX"
|
|
152
|
+
@col-order-change="onColOrderChange"
|
|
153
|
+
/>
|
|
154
|
+
</template>
|
|
155
|
+
<script setup>
|
|
156
|
+
import { h, defineComponent } from 'vue';
|
|
157
|
+
const columns = [
|
|
158
|
+
{
|
|
159
|
+
title: 'Name',
|
|
160
|
+
dataIndex: 'name',
|
|
161
|
+
fixed: 'left',
|
|
162
|
+
width: '200px',
|
|
163
|
+
headerClassName: 'my-th',
|
|
164
|
+
className: 'my-td',
|
|
165
|
+
sorter: true,
|
|
166
|
+
customHeaderCell: function FunctionalComponent(props){
|
|
167
|
+
return h(
|
|
168
|
+
'span',
|
|
169
|
+
{ style: 'overflow:hidden;text-overflow:ellipsis;white-space:nowrap' },
|
|
170
|
+
props.col.title + '(render) text-overflow,',
|
|
171
|
+
);
|
|
172
|
+
},
|
|
173
|
+
customCell: defineComponent({
|
|
174
|
+
setup(){
|
|
175
|
+
//...
|
|
176
|
+
return () => <div></div> // vue jsx
|
|
177
|
+
}
|
|
178
|
+
})
|
|
179
|
+
},
|
|
180
|
+
]
|
|
181
|
+
</script>
|
|
182
|
+
```
|
|
183
|
+
|
|
184
|
+
## Compare
|
|
185
|
+
Compare performance with other vue table [vue-virtual-table-benchmark](https://github.com/ja-plus/vue-virtual-table-benchmark)
|
|
186
|
+
|
|
187
|
+
[Benchmark Result Page](https://ja-plus.github.io/vue-virtual-table-benchmark/perf-report.html)
|
|
188
|
+
|
|
189
|
+
## Changelog
|
|
190
|
+
[CHANGELOG](CHANGELOG.md)
|
|
191
|
+
|
|
192
|
+
|
|
193
|
+
## License
|
|
194
|
+
[MIT](LICENSE)
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* name: stk-table-vue
|
|
3
|
-
* version: v1.2.
|
|
3
|
+
* version: v1.2.6
|
|
4
4
|
* description: High performance realtime virtual table for vue3 and vue2.7
|
|
5
5
|
* author: japlus
|
|
6
6
|
* homepage: https://ja-plus.github.io/stk-table-vue/
|
|
7
7
|
* license: MIT
|
|
8
8
|
*/
|
|
9
|
-
import { t as StkTable_default } from "./StkTable-
|
|
9
|
+
import { t as StkTable_default } from "./StkTable-CGcxwpdb.js";
|
|
10
10
|
import { createElementBlock, createElementVNode, createVNode, defineComponent, h, nextTick, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, reactive, ref, withModifiers } from "vue";
|
|
11
11
|
//#region src/StkTable/custom-cells/FilterCell/Dropdown/index.vue?vue&type=script&setup=true&lang.ts
|
|
12
12
|
var DROPDOWN_DEFAULT_WIDTH = 300;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* name: stk-table-vue
|
|
3
|
-
* version: v1.2.
|
|
3
|
+
* version: v1.2.6
|
|
4
4
|
* description: High performance realtime virtual table for vue3 and vue2.7
|
|
5
5
|
* author: japlus
|
|
6
6
|
* homepage: https://ja-plus.github.io/stk-table-vue/
|
|
@@ -4876,6 +4876,7 @@ var StkTable_default = /* @__PURE__ */ defineComponent({
|
|
|
4876
4876
|
if (props.autoResize) useAutoResize(tableContainerRef, () => {
|
|
4877
4877
|
initVirtualScroll();
|
|
4878
4878
|
updateFixedShadow();
|
|
4879
|
+
updateCustomScrollbar();
|
|
4879
4880
|
}, props, 200);
|
|
4880
4881
|
const [colResizeOn, isColResizing, onThResizeMouseDown] = useColResize(props, emits, tableContainerRef, tableHeaderLast, colResizeIndicatorRef, colKeyGen, fixedCols, clearColWidthCache);
|
|
4881
4882
|
const [toggleExpandRow, setRowExpand] = useRowExpand(emits, dataSourceCopy, rowKeyGen, onDataSourceChange);
|
package/lib/stk-table-vue.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* name: stk-table-vue
|
|
3
|
-
* version: v1.2.
|
|
3
|
+
* version: v1.2.6
|
|
4
4
|
* description: High performance realtime virtual table for vue3 and vue2.7
|
|
5
5
|
* author: japlus
|
|
6
6
|
* homepage: https://ja-plus.github.io/stk-table-vue/
|
|
7
7
|
* license: MIT
|
|
8
8
|
*/
|
|
9
|
-
import { a as insertToOrderedArray, i as binarySearch, n as registerFeature, o as strCompare, r as useAreaSelection, s as tableSort, t as StkTable_default } from "./StkTable-
|
|
9
|
+
import { a as insertToOrderedArray, i as binarySearch, n as registerFeature, o as strCompare, r as useAreaSelection, s as tableSort, t as StkTable_default } from "./StkTable-CGcxwpdb.js";
|
|
10
10
|
import { Fragment, computed, createApp, createBlock, createElementBlock, createElementVNode, createTextVNode, defineComponent, getCurrentInstance, h, markRaw, nextTick, normalizeClass, openBlock, ref, renderSlot, resolveDynamicComponent, toDisplayString, watch, withModifiers } from "vue";
|
|
11
11
|
//#region src/StkTable/custom-cells/FilterCell/Dropdown/index.ts
|
|
12
12
|
var DropdownIns = null;
|
|
@@ -15,7 +15,7 @@ async function getDropdownIns() {
|
|
|
15
15
|
const div = document.createElement("div");
|
|
16
16
|
div.classList.add("stk-filter-dropdown-wrapper");
|
|
17
17
|
document.body.appendChild(div);
|
|
18
|
-
DropdownIns = createApp(await import("./Dropdown-
|
|
18
|
+
DropdownIns = createApp(await import("./Dropdown-BAANgg_5.js").then((module) => module.default)).mount(div);
|
|
19
19
|
}
|
|
20
20
|
return DropdownIns;
|
|
21
21
|
}
|
package/lib/style.css
CHANGED
package/package.json
CHANGED
|
@@ -1,93 +1,93 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "stk-table-vue",
|
|
3
|
-
"version": "1.2.
|
|
4
|
-
"description": "High performance realtime virtual table for vue3 and vue2.7",
|
|
5
|
-
"main": "./lib/stk-table-vue.js",
|
|
6
|
-
"types": "./lib/src/StkTable/index.d.ts",
|
|
7
|
-
"homepage": "https://ja-plus.github.io/stk-table-vue/",
|
|
8
|
-
"author": "japlus",
|
|
9
|
-
"license": "MIT",
|
|
10
|
-
"repository": {
|
|
11
|
-
"type": "git",
|
|
12
|
-
"url": "https://github.com/ja-plus/stk-table-vue"
|
|
13
|
-
},
|
|
14
|
-
"bugs": {
|
|
15
|
-
"url": "https://github.com/ja-plus/stk-table-vue/issues"
|
|
16
|
-
},
|
|
17
|
-
"packageManager": "pnpm@10.7.0",
|
|
18
|
-
"directories": {
|
|
19
|
-
"test": "test"
|
|
20
|
-
},
|
|
21
|
-
"type": "module",
|
|
22
|
-
"sideEffects": ["./src/**", "./lib/**/*.css"],
|
|
23
|
-
"scripts": {
|
|
24
|
-
"dev": "vite",
|
|
25
|
-
"build": "vite build",
|
|
26
|
-
"test": "vitest",
|
|
27
|
-
"test:types": "tsc --noEmit -p tsconfig.json && tsc --noEmit -p type-tests",
|
|
28
|
-
"docs:dev": "vitepress dev docs-src",
|
|
29
|
-
"docs:build": "vitepress build docs-src",
|
|
30
|
-
"docs:preview": "vitepress preview docs-src",
|
|
31
|
-
"docs:update": "cp -rf ./docs-src/.vitepress/dist/* ./docs",
|
|
32
|
-
"perf": "node test/perf/run-perf-benchmark.mjs",
|
|
33
|
-
"perf:test": "vitest run test/perf/scrollPerf.test.js"
|
|
34
|
-
},
|
|
35
|
-
"keywords": [
|
|
36
|
-
"vue",
|
|
37
|
-
"table",
|
|
38
|
-
"vue-table",
|
|
39
|
-
"virtual table",
|
|
40
|
-
"virtual-scroll",
|
|
41
|
-
"data-table",
|
|
42
|
-
"vue-component",
|
|
43
|
-
"grid",
|
|
44
|
-
"vue2",
|
|
45
|
-
"vue3",
|
|
46
|
-
"highlight",
|
|
47
|
-
"sticky",
|
|
48
|
-
"virtual",
|
|
49
|
-
"list"
|
|
50
|
-
],
|
|
51
|
-
"files": [
|
|
52
|
-
"lib",
|
|
53
|
-
"src"
|
|
54
|
-
],
|
|
55
|
-
"devDependencies": {
|
|
56
|
-
"@arco-design/web-vue": "^2.58.0",
|
|
57
|
-
"@chenglou/pretext": "^0.0.8",
|
|
58
|
-
"@types/mockjs": "^1.0.10",
|
|
59
|
-
"@types/node": "^22.18.10",
|
|
60
|
-
"@typescript-eslint/eslint-plugin": "^7.7.0",
|
|
61
|
-
"@typescript-eslint/parser": "^7.7.0",
|
|
62
|
-
"@vitejs/plugin-vue": "^6.0.5",
|
|
63
|
-
"@vue/test-utils": "^2.4.6",
|
|
64
|
-
"ant-design-vue": "4",
|
|
65
|
-
"element-plus": "^2.14.3",
|
|
66
|
-
"eslint": "^8.57.0",
|
|
67
|
-
"eslint-config-prettier": "^9.1.0",
|
|
68
|
-
"eslint-plugin-html": "^8.1.0",
|
|
69
|
-
"eslint-plugin-prettier": "^5.1.3",
|
|
70
|
-
"eslint-plugin-vue": "^9.25.0",
|
|
71
|
-
"happy-dom": "^18.0.1",
|
|
72
|
-
"ja-contextmenu": "^1.11.0",
|
|
73
|
-
"less": "^4.2.0",
|
|
74
|
-
"mitt": "^3.0.1",
|
|
75
|
-
"mockjs": "^1.1.0",
|
|
76
|
-
"naive-ui": "2",
|
|
77
|
-
"postcss": "^8.4.47",
|
|
78
|
-
"postcss-discard-comments": "^6.0.2",
|
|
79
|
-
"postcss-preset-env": "^9.5.11",
|
|
80
|
-
"prettier": "^3.2.5",
|
|
81
|
-
"stk-table-vue": "^0.11.15",
|
|
82
|
-
"typescript": "^5.8.3",
|
|
83
|
-
"vite": "^8.1.2",
|
|
84
|
-
"vite-plugin-banner": "^0.8.1",
|
|
85
|
-
"vite-plugin-dts": "3.9.1",
|
|
86
|
-
"vitepress": "^1.6.4",
|
|
87
|
-
"vitepress-demo-plugin": "^1.5.1",
|
|
88
|
-
"vitepress-plugin-llms": "^1.13.2",
|
|
89
|
-
"vitest": "^4.1.9",
|
|
90
|
-
"vue": "^3.5.39",
|
|
91
|
-
"vue-eslint-parser": "^9.4.2"
|
|
92
|
-
}
|
|
93
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "stk-table-vue",
|
|
3
|
+
"version": "1.2.6",
|
|
4
|
+
"description": "High performance realtime virtual table for vue3 and vue2.7",
|
|
5
|
+
"main": "./lib/stk-table-vue.js",
|
|
6
|
+
"types": "./lib/src/StkTable/index.d.ts",
|
|
7
|
+
"homepage": "https://ja-plus.github.io/stk-table-vue/",
|
|
8
|
+
"author": "japlus",
|
|
9
|
+
"license": "MIT",
|
|
10
|
+
"repository": {
|
|
11
|
+
"type": "git",
|
|
12
|
+
"url": "https://github.com/ja-plus/stk-table-vue"
|
|
13
|
+
},
|
|
14
|
+
"bugs": {
|
|
15
|
+
"url": "https://github.com/ja-plus/stk-table-vue/issues"
|
|
16
|
+
},
|
|
17
|
+
"packageManager": "pnpm@10.7.0",
|
|
18
|
+
"directories": {
|
|
19
|
+
"test": "test"
|
|
20
|
+
},
|
|
21
|
+
"type": "module",
|
|
22
|
+
"sideEffects": ["./src/**", "./lib/**/*.css"],
|
|
23
|
+
"scripts": {
|
|
24
|
+
"dev": "vite",
|
|
25
|
+
"build": "vite build",
|
|
26
|
+
"test": "vitest",
|
|
27
|
+
"test:types": "tsc --noEmit -p tsconfig.json && tsc --noEmit -p type-tests",
|
|
28
|
+
"docs:dev": "vitepress dev docs-src",
|
|
29
|
+
"docs:build": "vitepress build docs-src",
|
|
30
|
+
"docs:preview": "vitepress preview docs-src",
|
|
31
|
+
"docs:update": "cp -rf ./docs-src/.vitepress/dist/* ./docs",
|
|
32
|
+
"perf": "node test/perf/run-perf-benchmark.mjs",
|
|
33
|
+
"perf:test": "vitest run test/perf/scrollPerf.test.js"
|
|
34
|
+
},
|
|
35
|
+
"keywords": [
|
|
36
|
+
"vue",
|
|
37
|
+
"table",
|
|
38
|
+
"vue-table",
|
|
39
|
+
"virtual table",
|
|
40
|
+
"virtual-scroll",
|
|
41
|
+
"data-table",
|
|
42
|
+
"vue-component",
|
|
43
|
+
"grid",
|
|
44
|
+
"vue2",
|
|
45
|
+
"vue3",
|
|
46
|
+
"highlight",
|
|
47
|
+
"sticky",
|
|
48
|
+
"virtual",
|
|
49
|
+
"list"
|
|
50
|
+
],
|
|
51
|
+
"files": [
|
|
52
|
+
"lib",
|
|
53
|
+
"src"
|
|
54
|
+
],
|
|
55
|
+
"devDependencies": {
|
|
56
|
+
"@arco-design/web-vue": "^2.58.0",
|
|
57
|
+
"@chenglou/pretext": "^0.0.8",
|
|
58
|
+
"@types/mockjs": "^1.0.10",
|
|
59
|
+
"@types/node": "^22.18.10",
|
|
60
|
+
"@typescript-eslint/eslint-plugin": "^7.7.0",
|
|
61
|
+
"@typescript-eslint/parser": "^7.7.0",
|
|
62
|
+
"@vitejs/plugin-vue": "^6.0.5",
|
|
63
|
+
"@vue/test-utils": "^2.4.6",
|
|
64
|
+
"ant-design-vue": "4",
|
|
65
|
+
"element-plus": "^2.14.3",
|
|
66
|
+
"eslint": "^8.57.0",
|
|
67
|
+
"eslint-config-prettier": "^9.1.0",
|
|
68
|
+
"eslint-plugin-html": "^8.1.0",
|
|
69
|
+
"eslint-plugin-prettier": "^5.1.3",
|
|
70
|
+
"eslint-plugin-vue": "^9.25.0",
|
|
71
|
+
"happy-dom": "^18.0.1",
|
|
72
|
+
"ja-contextmenu": "^1.11.0",
|
|
73
|
+
"less": "^4.2.0",
|
|
74
|
+
"mitt": "^3.0.1",
|
|
75
|
+
"mockjs": "^1.1.0",
|
|
76
|
+
"naive-ui": "2",
|
|
77
|
+
"postcss": "^8.4.47",
|
|
78
|
+
"postcss-discard-comments": "^6.0.2",
|
|
79
|
+
"postcss-preset-env": "^9.5.11",
|
|
80
|
+
"prettier": "^3.2.5",
|
|
81
|
+
"stk-table-vue": "^0.11.15",
|
|
82
|
+
"typescript": "^5.8.3",
|
|
83
|
+
"vite": "^8.1.2",
|
|
84
|
+
"vite-plugin-banner": "^0.8.1",
|
|
85
|
+
"vite-plugin-dts": "3.9.1",
|
|
86
|
+
"vitepress": "^1.6.4",
|
|
87
|
+
"vitepress-demo-plugin": "^1.5.1",
|
|
88
|
+
"vitepress-plugin-llms": "^1.13.2",
|
|
89
|
+
"vitest": "^4.1.9",
|
|
90
|
+
"vue": "^3.5.39",
|
|
91
|
+
"vue-eslint-parser": "^9.4.2"
|
|
92
|
+
}
|
|
93
|
+
}
|