Stk Table Vue(Sticky Table) is a high-performance virtual scrolling table component based on Vue 3 / Vue 2.7.
Smooth performance with tens of thousands of rows. Designed for real-time data display with built-in highlighting and animation effects.
- Vue 3 & Vue 2.7 support
- Virtual scrolling (X & Y axis)
- CSS
stickybased fixed columns & fixed header - Multi-level header with horizontal virtual scroll
- Tree table & expandable rows
- Area selection with keyboard navigation
- Cell highlighting with Animation API
- Built-in custom cells: Filter, Editable, Checkbox, Number, Change
- Column resize, header drag, row drag
- Merge cells (virtual mode, huge rowspan / colspan supported)
- Custom scrollbar
- Sortable & filterable
- Theme support (dark / light)
- CSS variables for easy customization
- Based on native
<table>element - Zero third-party runtime dependencies
npm install stk-table-vue
<script setup>
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'},
]
</script>
<template>
<StkTable ref='stkTableRef' row-key="id" :data-source="dataSource" :columns="columns"></StkTable>
</template><template>
<StkTable
ref="stkTable"
row-key="name"
v-model:columns="columns"
:style="{height:props.height}"
theme='dark'
height='200px'
bordered="h"
:row-height="28"
:show-overflow="false"
:show-header-overflow="false"
:sort-remote="false"
col-resizable
header-drag
virtual
virtual-x
no-data-full
col-resizable
auto-resize
fixed-col-shadow
:col-min-width="10"
:headless="false"
:data-source="dataSource"
@current-change="onCurrentChange"
@row-menu="onRowMenu"
@header-row-menu="onHeaderRowMenu"
@row-click="onRowClick"
@row-dblclick="onRowDblclick"
@sort-change="handleSortChange"
@cell-click="onCellClick"
@header-cell-click="onHeaderCellClick"
@scroll="onTableScroll"
@scroll-x="onTableScrollX"
@col-order-change="onColOrderChange"
/>
</template>
<script setup>
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
}
})
},
]
</script>Compare performance with other vue table vue-virtual-table-benchmark
