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 2 months 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-03-30T02:43:57.000Z (2 months ago)
- Last Synced: 2026-03-30T03:38:17.082Z (2 months ago)
- Topics: realtime, table, virtual, vue
- Language: Vue
- Homepage: https://ja-plus.github.io/stk-table-vue/
- Size: 4.61 MB
- Stars: 165
- Watchers: 1
- Forks: 19
- Open Issues: 2
-
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.
>
> Used for real-time data display, with data highlighting and dynamic effects
>
> Support Vue3 and Vue2.7
## Documentation
### [Stk Table Vue Official en](https://ja-plus.github.io/stk-table-vue/en/)
### [Stk Table Vue Official zh-CN](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', // 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', // method css。
keyframe: [{backgroundColor:'#aaa'}, {backgroundColor: '#222'}], // 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
* `$*$`