@gridforge/vue

A powerful and flexible Vue 3 table component library built on top of TanStack Table. Features column reordering, resizing, visibility controls, and a customizable sidebar for managing columns.

Features

• 📊 Powerful Table Component - Built with TanStack Table for maximum flexibility
• 🔄 Column Reordering - Drag and drop columns to reorder them
• 📏 Column Resizing - Resize columns with auto-sizing support
• 👁️ Column Visibility - Show/hide columns with a convenient sidebar
• 🎨 Customizable Theme - Theme support via ConfigProvider
• 📱 Responsive - Horizontal scrolling support
• 💪 TypeScript - Full TypeScript support
• 🎯 Vue 3 - Built for Vue 3 with Composition API

Installation

npm install @gridforge/vue

Quick Start

<template>
  <ConfigProvider :theme="theme">
    <BaseTable
      v-model:columns="columns"
      :data="rows"
      :horizontal-scroll="true"
      :wrap-text="true"
      :reorderable="true"
      sidebar-position="right"
    />
  </ConfigProvider>
</template>

<script setup lang="ts">
import { ConfigProvider, BaseTable } from '@gridforge/vue'
import { ref } from 'vue'

const columns = ref([
  { key: 'id', header: 'ID', width: 50 },
  { key: 'name', header: 'Name', width: 150 },
  { key: 'email', header: 'Email', width: 200 },
])

const rows = [
  { id: 1, name: 'John Doe', email: '[email protected]' },
  { id: 2, name: 'Jane Smith', email: '[email protected]' },
]

const theme = {
  // Your theme configuration
}
</script>

<style>
@import '@gridforge/vue/style.css';
</style>

Props

BaseTable

| Prop | Type | Default | Description | |------|------|---------|-------------| | columns | Column[] | required | Array of column definitions | | data | any[] | required | Array of data rows | | hiddenColumns | string[] | [] | Array of column keys to hide | | horizontalScroll | boolean | false | Enable horizontal scrolling | | wrapText | boolean | false | Enable text wrapping in cells | | reorderable | boolean | false | Enable column reordering | | sidebarPosition | 'left' \| 'right' | 'left' | Position of the column management sidebar |

Column Definition

interface Column {
  key: string
  header: string
  width?: number | string
  // ... other TanStack Table column options
}

Examples

See the playground directory for more examples.

License

MIT