https://github.com/ja-plus/stk-table-vue
High performance realtime virtual table for vue3&vue2.7
https://github.com/ja-plus/stk-table-vue
realtime table virtual vue
Last synced: about 1 month ago
JSON representation
High performance realtime virtual table for vue3&vue2.7
- Host: GitHub
- URL: https://github.com/ja-plus/stk-table-vue
- Owner: ja-plus
- License: mit
- Created: 2024-02-24T14:07:12.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2026-06-03T02:51:57.000Z (about 1 month ago)
- Last Synced: 2026-06-03T04:24:59.053Z (about 1 month ago)
- Topics: realtime, table, virtual, vue
- Language: Vue
- Homepage: https://ja-plus.github.io/stk-table-vue/
- Size: 5.9 MB
- Stars: 176
- Watchers: 2
- Forks: 23
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
Stk Table Vue
Stk Table Vue(Sticky Table) is a high-performance virtual list component based on Vue.
Smooth performance with tens of thousands of rows
Used for real-time data display, with data highlighting and dynamic effects.
Support Vue3 and Vue2.7
## Documentation
### [Stk Table Vue Official](https://ja-plus.github.io/stk-table-vue/)
## Repo:
- [Github](https://github.com/ja-plus/stk-table-vue)
- [Gitee](https://gitee.com/japlus/stk-table-vue)
## Demo
[Online Demo in stackblitz](https://stackblitz.com/edit/vitejs-vite-ad91hh?file=src%2FDemo%2Findex.vue)
## Usage
> npm install stk-table-vue
```html
import { StkTable } from 'stk-table-vue'
import { ref, useTemplateRef } from 'vue'
const stkTableRef = ref<InstanceType<typeof StkTable>>();
// or Vue 3.5 useTemplateRef
const stkTableRef = useTemplateRef('stkTableRef');
// highlight row
stkTableRef.value.setHighlightDimRow([rowKey], {
method: 'css' | 'animation', // default animation
className: 'custom-class-name', // for method 'css'
keyframe: [{ backgroundColor: '#aaa' }, { backgroundColor: '#222' }], // same as https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Animations_API/Keyframe_Formats
duration: 2000,
});
// highlight cell
stkTableRef.value.setHighlightDimCell(rowKey, colDataIndex, {
method: 'css' | 'animation',
className: 'custom-class-name', // for method 'css'
keyframe: [{ backgroundColor: '#aaa' }, { backgroundColor: '#222' }], // for method 'animation'
duration: 2000,
});
const columns = [
{title: 'name', dataIndex: 'name'},
{title: 'age', dataIndex: 'age'},
{title: 'address', dataIndex: 'address'},
];
const dataSource = [
{id: 1, name: 'John', age: 32, address: 'New York'},
{id: 2, name: 'Jim', age: 42, address: 'London'},
{id: 3, name: 'Joe', age: 52, address: 'Tokyo'},
{id: 4, name: 'Jack', age: 62, address: 'Sydney'},
{id: 5, name: 'Jill', age: 72, address: 'Paris'},
]
```
### Vue2.7 Usage
[Vue2.7 Usage](https://ja-plus.github.io/stk-table-vue/main/start/vue2-usage.html)
## API
* [Props](https://ja-plus.github.io/stk-table-vue/main/api/table-props.html)
* [Emits](https://ja-plus.github.io/stk-table-vue/main/api/emits.html)
* [Slots](https://ja-plus.github.io/stk-table-vue/main/api/slots.html)
* [Expose](https://ja-plus.github.io/stk-table-vue/main/api/expose.html)
* [StkTableColumn: Define column type](https://ja-plus.github.io/stk-table-vue/main/api/stk-table-column.html)
* [Highlight: setHighlightDimCell & setHighlightDimRow](https://ja-plus.github.io/stk-table-vue/main/api/expose.html#sethighlightdimcell)
### Example
```vue
import { h, defineComponent } from 'vue';
const columns = [
{
title: 'Name',
dataIndex: 'name',
fixed: 'left',
width: '200px',
headerClassName: 'my-th',
className: 'my-td',
sorter: true,
customHeaderCell: function FunctionalComponent(props){
return h(
'span',
{ style: 'overflow:hidden;text-overflow:ellipsis;white-space:nowrap' },
props.col.title + '(render) text-overflow,',
);
},
customCell: defineComponent({
setup(){
//...
return () => <div></div> // vue jsx
}
})
},
]
```
## Compare
Compare performance with other vue table [vue-table-compare](https://github.com/ja-plus/vue-table-compare)
## Other
* `$*$`