@aimerthyr/virtual-table 1.3.2 → 1.3.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/CHANGELOG.md +8 -1
- package/README.en.md +92 -0
- package/README.md +2 -0
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +4 -1
- package/dist/index.js +1 -1
- package/dist/virtual-table.css +1 -1
- package/package.json +2 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [1.3.3] - 2026-03-19
|
|
4
|
+
|
|
5
|
+
### Changed
|
|
6
|
+
|
|
7
|
+
- 列宽自适应优化&函数调用优化
|
|
8
|
+
- 官网支持国际化
|
|
9
|
+
|
|
3
10
|
## [1.3.2] - 2026-03-17
|
|
4
11
|
|
|
5
12
|
### Features
|
|
@@ -18,7 +25,7 @@
|
|
|
18
25
|
### Changed
|
|
19
26
|
|
|
20
27
|
- 表格单元格性能优化
|
|
21
|
-
-
|
|
28
|
+
- 列宽自适应逻辑调整
|
|
22
29
|
|
|
23
30
|
## [1.2.0] - 2026-03-11
|
|
24
31
|
|
package/README.en.md
ADDED
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
# @aimerthyr/virtual-table
|
|
2
|
+
|
|
3
|
+
English | [简体中文](./README.md)
|
|
4
|
+
|
|
5
|
+
A high-performance virtualized table component for Vue 3, built on TanStack Table and TanStack Virtual.
|
|
6
|
+
|
|
7
|
+
## Overview
|
|
8
|
+
|
|
9
|
+
`@aimerthyr/virtual-table` is a Vue 3 table component designed for medium-to-large datasets. It provides virtual scrolling, sorting, filtering, pagination, tree data, expandable rows, row selection, sticky header, pinned columns, column resizing, and rich TypeScript types & slots for extensibility.
|
|
10
|
+
|
|
11
|
+
## Features
|
|
12
|
+
|
|
13
|
+
- Virtual scrolling for large datasets
|
|
14
|
+
- Sorting / filtering / pagination
|
|
15
|
+
- Tree data / expandable rows / row selection
|
|
16
|
+
- Sticky header / pinned columns / column resizing
|
|
17
|
+
- Custom cell / filter / pagination / theme via slots and props
|
|
18
|
+
- Built with Vue 3 Composition API + TypeScript
|
|
19
|
+
- Powered by TanStack Table + TanStack Virtual
|
|
20
|
+
|
|
21
|
+
## Website
|
|
22
|
+
|
|
23
|
+
Online demo: [https://aimerthyr.github.io/virtual-table/](https://aimerthyr.github.io/virtual-table/)
|
|
24
|
+
|
|
25
|
+
## Install
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
# pnpm
|
|
29
|
+
pnpm add @aimerthyr/virtual-table
|
|
30
|
+
|
|
31
|
+
# npm
|
|
32
|
+
npm install @aimerthyr/virtual-table
|
|
33
|
+
|
|
34
|
+
# yarn
|
|
35
|
+
yarn add @aimerthyr/virtual-table
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## Requirements
|
|
39
|
+
|
|
40
|
+
- `vue >= 3.5.0`
|
|
41
|
+
|
|
42
|
+
## Quick Start
|
|
43
|
+
|
|
44
|
+
```ts
|
|
45
|
+
// Import styles in main.ts
|
|
46
|
+
import '@aimerthyr/virtual-table/virtual-table.css'
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
```vue
|
|
50
|
+
<script setup lang="ts">
|
|
51
|
+
import { ref } from 'vue'
|
|
52
|
+
import VTable, { type VTableColumn } from '@aimerthyr/virtual-table'
|
|
53
|
+
import '@aimerthyr/virtual-table/virtual-table.css'
|
|
54
|
+
|
|
55
|
+
const data = ref([
|
|
56
|
+
{ id: 1, name: 'Alice', age: 28, address: 'Beijing' },
|
|
57
|
+
{ id: 2, name: 'Bob', age: 32, address: 'Shanghai' },
|
|
58
|
+
{ id: 3, name: 'Carol', age: 25, address: 'Guangzhou' },
|
|
59
|
+
])
|
|
60
|
+
|
|
61
|
+
const columns: VTableColumn[] = [
|
|
62
|
+
{ columnKey: 'id', columnHeader: 'ID', columnWidth: 80 },
|
|
63
|
+
{ columnKey: 'name', columnHeader: 'Name', columnWidth: 120 },
|
|
64
|
+
{ columnKey: 'age', columnHeader: 'Age', columnWidth: 100, columnAlign: 'center' },
|
|
65
|
+
{ columnKey: 'address', columnHeader: 'Address' },
|
|
66
|
+
]
|
|
67
|
+
</script>
|
|
68
|
+
|
|
69
|
+
<template>
|
|
70
|
+
<!-- Recommended: set row-height for more stable virtualization -->
|
|
71
|
+
<VTable :data="data" :columns="columns" :row-height="44" bordered />
|
|
72
|
+
</template>
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## Import
|
|
76
|
+
|
|
77
|
+
```ts
|
|
78
|
+
import VTable from '@aimerthyr/virtual-table'
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
Or:
|
|
82
|
+
|
|
83
|
+
```ts
|
|
84
|
+
import { VTable } from '@aimerthyr/virtual-table'
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
## Documentation
|
|
88
|
+
|
|
89
|
+
For the complete API (props / slots / examples), please refer to:
|
|
90
|
+
|
|
91
|
+
- Website: `https://aimerthyr.github.io/virtual-table/`
|
|
92
|
+
- Chinese README: [`./README.md`](./README.md)
|