https://github.com/aimerthyr/virtual-table
基于 Vue 3、TanStack Table 和 TanStack Virtual 的高性能虚拟滚动表格
https://github.com/aimerthyr/virtual-table
table tanstack-table virtual-scroll virtualization vue3
Last synced: 1 day ago
JSON representation
基于 Vue 3、TanStack Table 和 TanStack Virtual 的高性能虚拟滚动表格
- Host: GitHub
- URL: https://github.com/aimerthyr/virtual-table
- Owner: aimerthyr
- Created: 2026-02-28T15:02:34.000Z (about 2 months ago)
- Default Branch: master
- Last Pushed: 2026-04-26T04:01:30.000Z (1 day ago)
- Last Synced: 2026-04-26T05:29:18.698Z (1 day ago)
- Topics: table, tanstack-table, virtual-scroll, virtualization, vue3
- Language: Vue
- Homepage: https://aimerthyr.github.io/virtual-table/
- Size: 915 KB
- Stars: 23
- Watchers: 0
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.en.md
Awesome Lists containing this project
README
# @aimerthyr/virtual-table
English | [简体中文](./README.md)
A high-performance virtualized table component for Vue 3, built on TanStack Table and TanStack Virtual.
## Overview
`@aimerthyr/virtual-table` is designed for medium-to-large datasets. It provides virtual scrolling, sorting state, filtering state, pagination, tree data, expandable rows, row selection, sticky headers, pinned columns, column resizing, and TypeScript-friendly extension points.
## Features
- Virtual scrolling for large datasets
- Sorting / filtering / pagination
- Tree data / expandable rows / row selection
- Sticky header / pinned columns / column resizing
- Custom cell / filter / pagination / theme via slots and props
- Built with Vue 3 Composition API + TypeScript
- Powered by TanStack Table + TanStack Virtual
## Website
Online demo:
[https://aimerthyr.github.io/virtual-table/](https://aimerthyr.github.io/virtual-table/)
## Install
```bash
# pnpm
pnpm add @aimerthyr/virtual-table
# npm
npm install @aimerthyr/virtual-table
# yarn
yarn add @aimerthyr/virtual-table
```
## Requirements
- `vue >= 3.5.0`
## Quick Start
```ts
// Import styles in main.ts
import '@aimerthyr/virtual-table/virtual-table.css'
```
```vue
import { ref } from 'vue'
import VTable, { type VTableColumn } from '@aimerthyr/virtual-table'
import '@aimerthyr/virtual-table/virtual-table.css'
const data = ref([
{ id: 1, name: 'Alice', age: 28, address: 'Beijing' },
{ id: 2, name: 'Bob', age: 32, address: 'Shanghai' },
{ id: 3, name: 'Carol', age: 25, address: 'Guangzhou' },
])
const columns: VTableColumn[] = [
{ columnKey: 'id', columnHeader: 'ID', columnWidth: 80 },
{ columnKey: 'name', columnHeader: 'Name', columnWidth: 120, columnEnableFilter: true },
{ columnKey: 'age', columnHeader: 'Age', columnWidth: 100, columnEnableSort: true },
{ columnKey: 'address', columnHeader: 'Address' },
]
```
## Import
```ts
import VTable from '@aimerthyr/virtual-table'
```
Or:
```ts
import { VTable } from '@aimerthyr/virtual-table'
```
## CDN Usage
```html
const VTable = window.VirtualTable.default || window.VirtualTable
```
## Documentation
- Website: [https://aimerthyr.github.io/virtual-table/](https://aimerthyr.github.io/virtual-table/)
- Chinese README: [./README.md](./README.md)