DOCSEARCHbyAlgolia
Submit Docs

VTable Documentation

repository·develop·Indexed 25 days ago

https://github.com/visactor/vtable

A high-performance multidimensional data analysis table and grid rendering engine built on VRender. VTable supports millions of data points and integrates with VChart. The ecosystem includes specialized packages such as @visactor/react-vtable, @visactor/vtable-sheet for workbook functionality, @visactor/vtable-calendar, @visactor/vtable-gantt, and various plugins for search, history (undo/redo), and data export to CSV or Excel.

Tokens
273.4K
Snippets
611
Records
1.2K
Agent score
85%

What's inside VTable

  3. VTable Package Ecosystem Overview

    develop

    The VTable repository contains several specialized packages for different use cases:

    • @visactor/vtable: The core engine.
    • @visactor/vtable-gantt: Gantt chart component.
    • @visactor/vtable-editors: Table editor component.
    • @visactor/vtable-plugins: Table plugin functionality.
    • @visactor/vtable-export: Export tools.
    • @visactor/vtable-search: Search tools.
    • @visactor/react-vtable: React component wrapper.
    • @visactor/vue-vtable: Vue component wrapper.

  4. Understand Pivot Table concepts in VTable

    develop

    VTable Pivot Tables (multidimensional analysis tables) allow you to display relationships between multiple Dimensions by placing them in rows and columns to analyze Metrics (indicators).

    Key concepts include:

    • Dimensions: Perspectives used to classify data (e.g., country, category).
    • Dimension hierarchy: Levels within a dimension (e.g., a Date dimension having year -> month -> day levels).
    • Dimension members: The specific values within a dimension (e.g., January, February).
    • Metric (Indicator): The quantitative data being measured (e.g., sales, costs, profits).
    • Row Tree: A hierarchical tree structure representing row dimensions.
    • Column Tree: A hierarchical tree structure representing column dimensions.
    • Corner: The intersection cell of the row and column headers, typically used for metric headers.

  5. Understand Master-Detail rendering principles

    develop

    The Master-Detail plugin uses several technical strategies to ensure performance and visual consistency:

    1. ViewBox Positioning: Uses VTable's ViewBox mechanism for precise positioning of detail grids within expanded rows.
    2. Canvas Shared Rendering: Detail grids share the same Canvas surface as the master table to avoid multi-canvas overhead.
    3. Dynamic Row Height: Expanded rows have their height adjusted dynamically to create space for the detail grid, while keeping the original height of CellGroups unchanged.
    4. Scroll Optimization: Automatically sets scrollEventAlwaysTrigger to true to ensure detail grids scroll correctly when reaching table boundaries.

    Important Concept: Sub-tables do not have true independent row numbers. Visually, they appear as separate rows, but they are actually part of the expanded rows of the master table. The master table's row numbers remain continuous.

  6. Features of VTable-Sheet

    develop

    VTable-Sheet provides several advanced spreadsheet capabilities:

    • Multi-sheet Management: Create and manage multiple sheets to organize large datasets.
    • Formula Calculation: Supports Excel-like formulas including SUM, AVERAGE, MAX, MIN, and COUNT.
    • Data Filtering: Filter data by specific conditions or value lists.
    • Table Editing: Direct cell content editing.
    • Data Import/Export: Support for CSV and XLSX formats.
    • Data Persistence: Save and restore table states.
    • Cell Merging: Merge cells for flexible presentation.
    • Frozen Rows and Columns: Freeze headers for easier navigation of large datasets.
    • Custom Menus: Extend functionality via a customizable top menu bar.

  7. VTable-Gantt Overview

    develop

    VTable-Gantt is a Gantt chart component library within the VisActor visualization ecosystem. It is built on top of the VTable component and the VRender visualization engine. It is designed for project management and task tracking, offering:

    • High Performance: Fast computation and rendering for large-scale project data.
    • Flexible Layout: Customizable timelines, task bar styles, and layouts.
    • Powerful Interaction: Support for dragging, scaling, and editing tasks.
    • Rich Visualization: Custom rendering for information cells and task bars, including tree structure support.

  8. Enable Smart Zoom in Gantt Charts

    develop

    The Gantt chart smart zoom feature allows for multi-level timeline displays that automatically switch time scale combinations based on the current zoom level. This provides an optimal viewing experience across different time granularities.

    To enable this, configure the timelineHeader.zoomScale.enabled property and define the desired scale levels using timelineHeader.zoomScale.levels.

  9. Dynamically set min and max values for progressBar cell type

    develop

    When using the progressbar cell type in VTable, you can set the min and max configuration options as functions instead of static values. This allows you to derive the minimum and maximum bounds for the progress bar from the specific data record of the current row.

    To implement this, use the args parameter provided to the function. You can access the current row's data using args.table.getCellOriginRecord(args.col, args.row).

  10. Configure Undo/Redo UI and history depth

    develop

    VTable-Sheet provides workbook-level undo/redo for cell edits, sheet management, and more.

    • Enable/Disable UI: Use undoRedo: { show: boolean } in the configuration. If mainMenu.show is true, buttons appear in the menu bar; otherwise, they appear at the top-left.
    • Shortcuts: Use Ctrl/Cmd + Z for undo and Ctrl/Cmd + Shift + Z or Ctrl/Cmd + Y for redo.
    • Customizing History: To change the history depth, pass HistoryPlugin via VTablePluginModules and configure maxHistory and enableCompression in moduleOptions.
    import { HistoryPlugin } from '@visactor/vtable-plugins';

// Example: Customizing history depth
const sheetInstance = new VTableSheet(document.getElementById('container'), {
  undoRedo: { show: true },
  VTablePluginModules: [
    {
      module: HistoryPlugin,
      moduleOptions: {
        maxHistory: 200,
        enableCompression: false
      }
    }
  ],
  sheets: [/* ... */]
});

  11. Quick Start with VTable-Search

    develop

    To use SearchComponent, first initialize a VTable.ListTable instance with your data and columns, then pass that instance to the SearchComponent constructor. You can enable autoJump to automatically move the selection when searching.

    const option = {
  container: document.getElementById(CONTAINER_ID),
  records,
  columns,
};
const tableInstance = new VTable.ListTable(option);
window.tableInstance = tableInstance;

const search = new SearchComponent({
  table: tableInstance,
  autoJump: true
});
window.search = search;

  12. Fix missing React 19 HostConfig callbacks

    develop

    If you encounter TypeError: resolveEventTimeStamp is not a function or TypeError: trackSchedulerEvent is not a function in a React 19 environment, your HostConfig is missing required React 19 callbacks.

    Required Callbacks:

    • trackSchedulerEvent
    • resolveEventType
    • resolveEventTimeStamp
    • shouldAttemptEagerTransition

    Fix: Ensure you are using a version of @visactor/react-vtable that includes the patch for these callbacks in its HostConfig implementation.