VTable Virtual Table

A high-performance virtual scrolling table component built with TanStack Table and TanStack Virtual, supporting large data volume rendering, sorting, filtering, pagination, column resizing by drag, tree structure, expandable, and selectable features.

Features

🚀 Virtual scrolling - Support million-level data smooth rendering
📊 Rich features - Sorting, filtering, pagination, row selection, column fixed
🌲 Tree structure - Support tree data display and custom expandable rows
🎨 Highly customizable - Support custom cells, headers, theme configuration, and built-in checkboxes, paginators can be replaced
📱 Responsive - Adaptive column width, support column drag adjustment
🔧 TypeScript - Complete type definition

Installation

First step

npm install @aimerthyr/virtual-table

Second step

// Import the style file in main.ts
import '@aimerthyr/virtual-table/virtual-table.css'

Quick Start

<template>
  <VTable :data="data" :columns="columns" />
</template>

<script setup lang="ts">
import VTable from '@aimerthyr/virtual-table'

const data = ref([
  { id: 1, name: 'John Doe', age: 28, address: 'Beijing Chaoyang District' },
  { id: 2, name: 'Jane Smith', age: 32, address: 'Shanghai Pudong New Area' },
  { id: 3, name: 'Mike Johnson', age: 25, address: 'Guangzhou Tianhe District' },
])

const columns: VTableColumn[] = [
  { columnKey: 'id', columnHeader: 'ID', columnWidth: 80 },
  { columnKey: 'name', columnHeader: 'Name', columnWidth: 120 },
  { columnKey: 'age', columnHeader: 'Age', columnWidth: 100, columnAlign: 'center' },
  { columnKey: 'address', columnHeader: 'Address' },
]
</script>

Register global components

First way (recommended)

npm install -D unplugin-vue-components

// vite.config.ts
import Components from 'unplugin-vue-components/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    Components({
      // ...other configurations
      resolvers: [
        (name: string) => {
          if (name === 'VTable') {
            return {
              name: 'VTable',
              from: '@aimerthyr/virtual-table',
            }
          }
        },
      ],
    }),
  ],
})

Second way

// main.ts
import VTable from '@aimerthyr/virtual-table'

const app = createApp(App)
app.component('VTable', VTable)

// Create a components.d.ts file in the root directory
export {}
declare module 'vue' {
  export interface GlobalComponents {
    // ...other global components
    VTable: (typeof import('@aimerthyr/virtual-table'))['VTable']
  }
}