arthub-table

High-performance canvas-based table/grid component for Vue 3 with TypeScript support.

Features

• 🚀 Canvas Rendering: High-performance rendering engine using HTML5 Canvas
• 📊 Virtual Scrolling: Efficiently handles large datasets with smooth scrolling
• 🎨 20+ Built-in Cell Viewers: Text, Select, Image, Person, Progress, Status, DateTime, Boolean, and more
• 🔌 Extensible Viewer System: Register custom cell viewers through the Viewer Registry
• 📦 Grouped Tables: Multi-level collapsible group headers
• 📐 Nested Grids: Support for nested table within cells
• 📋 Clipboard: Copy, paste, and clear cell content
• ✏️ Cell Editing: Inline editing with validation support
• 🔒 Fixed Columns: Pin columns to left or right
• 📏 Resizable Columns: Drag to resize column widths
• 🔄 Drag & Drop: Reorder rows and columns via drag and drop
• 🎯 Cell Selection: Single and multi-cell selection with keyboard navigation
• ✅ Validation: Built-in cell validation with custom rules
• 🌗 Theming: Light/dark theme support with custom style registration
• 📱 TypeScript: Full TypeScript type definitions

Installation

npm install arthub-table

Quick Start

<template>
  <DataGrid
    :columns="columns"
    :data="data"
    :width="800"
    :height="400"
    @after-edit-cell="handleEdit"
  />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { DataGrid } from "arthub-table";
import type { ColumnConfig } from "arthub-table";

const columns = ref<ColumnConfig[]>([
  { title: "Name", key: "name", width: 200, type: "text" },
  { title: "Age", key: "age", width: 100, type: "number" },
  { title: "Email", key: "email", width: 300, type: "text" },
]);

const data = ref([
  { id: 1, name: "Alice", age: 28, email: "[email protected]" },
  { id: 2, name: "Bob", age: 32, email: "[email protected]" },
]);

const handleEdit = (editData: any) => {
  console.log("Cell edited:", editData);
};
</script>

Using Cell Viewers

Cell viewers provide rich data rendering within cells:

<script setup lang="ts">
import { DataGrid, registerDefaultViewers } from "arthub-table";
import type { ColumnConfig } from "arthub-table";

// Register all built-in viewers (call once at app startup)
registerDefaultViewers();

const columns = ref<ColumnConfig[]>([
  { title: "Task", key: "task", width: 200, type: "text", useViewer: true },
  {
    title: "Status",
    key: "status",
    width: 120,
    type: "status",
    useViewer: true,
    options: [
      { label: "To Do", value: "todo", color: "#909399" },
      { label: "Done", value: "done", color: "#67C23A" },
    ],
  },
  {
    title: "Progress",
    key: "progress",
    width: 180,
    type: "progress",
    useViewer: true,
  },
  {
    title: "Assignee",
    key: "assignee",
    width: 150,
    type: "person",
    useViewer: true,
  },
]);
</script>

Available Viewer Types

| Type | Description | Data Type | | --------------------- | ------------------------- | ----------------------------- | | text | Plain text display | TextViewerData | | select | Dropdown select with tags | SelectViewerData | | image | Image display | ImageViewerData | | person | User avatar and name | PersonViewerData | | progress | Progress bar (draggable) | ProgressViewerData | | datetime | Date/time display | DatetimeViewerData | | boolean | Checkbox toggle | BooleanViewerData | | status | Status badge | StatusViewerData | | hyperlink | Clickable link | HyperlinkTextViewerData | | file | File preview | FileViewerData | | module | Module tags | ModuleViewerData | | table-action-button | Action buttons | TableActionButtonViewerData | | nested | Nested grid | NestedGridViewerData | | group-header | Group header row | GroupHeaderViewerData |

API

DataGrid Props

| Prop | Type | Default | Description | | ---------------- | ---------------- | ----------------- | --------------------------- | | rowKey | string | 'id' | Row unique identifier field | | width | number | - | Table width in pixels | | height | number | - | Table height in pixels | | columns | ColumnConfig[] | [] | Column definitions | | data | any[] | [] | Table data array | | datePattern | string | 'absolute_date' | Date display type | | customAutofill | Function | - | Custom autofill handler |

DataGrid Events

| Event | Payload | Description | | ------------------------ | ------------------------------------------ | ------------------------------- | | after-edit-cell | data | Fired after a cell is edited | | after-autofill | data | Fired after autofill | | after-paste | data | Fired after paste | | after-clear | data | Fired after clear | | on-load | - | Fired when grid is loaded | | on-cell-text-click | rowData, colId | Fired when cell text is clicked | | on-group-toggle | groupRow, expanded | Fired when group is toggled | | on-row-drag-reorder | draggedRows, targetIndex | Fired after row drag reorder | | on-column-drag-reorder | draggedColIds, targetColId, insertBefore | Fired after column reorder |

DataGrid Methods (via ref)

| Method | Description | | ------------------------------ | ------------------------------ | | reload() | Resize and redraw | | loadData(data) | Load new data | | getData() | Get current data | | getCheckedRows() | Get checked rows | | getChangedRows() | Get changed rows | | validate(callback) | Validate all cells | | setTheme(theme) | Set theme ('light' or 'dark') | | setStriped(enabled) | Enable/disable striped rows | | showLoading(rowIds, colKeys) | Show loading on specific cells | | hideLoading(rowIds, colKeys) | Hide loading on specific cells | | setSelectedRows(rowIds) | Set selected rows |

TypeScript Types

arthub-table exports comprehensive TypeScript types:

import type {
  ColumnConfig,
  CellData,
  RowData,
  HeaderConfig,
  // Viewer types
  CellViewer,
  CellViewerData,
  TextViewerData,
  SelectViewerData,
  ProgressViewerData,
  // Group types
  GroupRowData,
  GroupedTableRowData,
} from "arthub-table";

Local Development (with AssetMatrix)

Using webpack alias

1. Create .env.local in AssetMatrix project root:

USE_LOCAL_CANVAS_TABLE=true
LOCAL_CANVAS_TABLE_PATH=../arthub-table

2. Start arthub-table dev server:

cd arthub-table
npm run serve

3. Start AssetMatrix with local arthub-table:

cd AssetMatrix
npm run dev:local-canvas

Using npm link

# In arthub-table directory
npm link

# In AssetMatrix directory
npm link arthub-table

Building

# Build library (CommonJS + UMD + types)
npm run build

# Build demo site
npm run build:demo

# Build only type declarations
npm run build:types

Publishing

# Bump version and publish
npm version patch  # or minor, or major
npm publish

Or push a version tag to trigger CI/CD:

git tag v1.0.1
git push origin v1.0.1

License

MIT