gridforge-table

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-table

Quick Start

⚠️ Important: Don't forget to import the styles!

You need to import the CSS file in your project. Choose one of the following methods:

Method 1: Import in your main entry file (Recommended)

// main.ts or main.js
import { createApp } from 'vue';
import App from './App.vue';
import 'gridforge-table/style.css';

createApp(App).mount('#app');

Method 2: Import in your component

<script setup lang="ts">
import { ConfigProvider, BaseTable } from 'gridforge-table';
import 'gridforge-table/style.css'; // Import styles
import { ref } from 'vue';
// ... rest of your code
</script>

Method 3: Import in your CSS file

/* styles.css or main.css */
@import 'gridforge-table/style.css';

Example Component

<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-table';
import 'gridforge-table/style.css'; // Don't forget this!
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>

Props

BaseTable

| Prop | Type | Default | Description | | ------------------ | ------------------- | -------- | ----------------------------------------- | | columns | Column[] | required | Array of column definitions | | data | TableRow[] | 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

type TableRow = Record<string, unknown>;

interface Column<T = TableRow> {
  key?: string;
  header: string;
  width?: number | string;
  pin?: 'left' | 'right'; // Pin column to left or right side
  hidden?: boolean;
  wrapText?: boolean; // Per-column text wrapping control
  columns?: Column<T>[]; // For nested column groups
}

Pinning Columns

You can pin columns to the left or right side of the table by adding the pin property to your column definition:

<script setup lang="ts">
import { ConfigProvider, BaseTable } from 'gridforge-table';
import { ref } from 'vue';

const columns = ref([
  { key: 'id', header: 'ID', width: 50, pin: 'left' }, // Pinned to left
  { key: 'name', header: 'Name', width: 150 },
  { key: 'email', header: 'Email', width: 200 },
  { key: 'actions', header: 'Actions', width: 100, pin: 'right' }, // Pinned to right
]);

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

Examples

See the playground directory for more examples.

License

MIT