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 sticky based 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

Documentation

Stk Table Vue Official

Stk Table React Official

Stk Table Svelte Official

Stk Table Solid Official

Repo:

• Github
• Gitee

Demo

Online Demo in stackblitz

Usage

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>

Vue2.7 Usage

Vue2.7 Usage

API

• Props

• Emits

• Slots

• Expose

• StkTableColumn: Define column type

• Highlight: setHighlightDimCell & setHighlightDimRow

Example

<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

Compare performance with other vue table vue-virtual-table-benchmark

Benchmark Result Page

Changelog

CHANGELOG

License

MIT