VTable - English Documentation and Examples

🚀 Introduction to VTable

VTable is a powerful, high-performance table component for handling large datasets with advanced features like pivoting, charting, and extensive customization options.

⚡

Extreme Performance

Handle millions of data points with smooth scrolling and fast rendering using canvas-based architecture.

📊

Multidimensional Analysis

Built-in pivot table functionality with automatic data analysis and presentation capabilities.

🎨

Rich Customization

Extensive styling options, themes, and seamless integration with VChart for embedded visualizations.

🔄

Interactive Features

Built-in sorting, filtering, editing, and selection capabilities with extensive event handling.

📝 Basic Examples

Learn the fundamentals with simple, practical examples that you can use as starting points for your own tables.

Simple List Table

Create a basic data table with columns and rows. This is the most common use case for displaying tabular data.

// Sample data
const data = [
    { id: 1, name: 'John Doe', age: 30, city: 'New York', salary: 75000 },
    { id: 2, name: 'Jane Smith', age: 25, city: 'Los Angeles', salary: 80000 },
    { id: 3, name: 'Bob Johnson', age: 35, city: 'Chicago', salary: 70000 },
    { id: 4, name: 'Alice Brown', age: 28, city: 'Houston', salary: 85000 }
];

// Table configuration
const option = {
    container: document.getElementById('basic-list-table'),
    records: data,
    columns: [
        { field: 'id', title: 'ID', width: 80 },
        { field: 'name', title: 'Name', width: 150 },
        { field: 'age', title: 'Age', width: 80 },
        { field: 'city', title: 'City', width: 120 },
        { field: 'salary', title: 'Salary', width: 100 }
    ]
};

// Create the table
const table = new VTable.ListTable(option);

Basic Pivot Table

Create a pivot table to analyze and summarize your data with automatic grouping and aggregation.

// Pivot table data
const pivotData = [
    { region: 'North', product: 'A', sales: 1000, quarter: 'Q1' },
    { region: 'North', product: 'B', sales: 1200, quarter: 'Q1' },
    { region: 'South', product: 'A', sales: 800, quarter: 'Q1' },
    { region: 'South', product: 'B', sales: 900, quarter: 'Q1' },
    { region: 'North', product: 'A', sales: 1100, quarter: 'Q2' },
    { region: 'North', product: 'B', sales: 1300, quarter: 'Q2' }
];

const pivotOption = {
    container: document.getElementById('basic-pivot-table'),
    records: pivotData,
    rows: ['region'],
    columns: ['quarter'],
    indicators: [
        { field: 'sales', title: 'Total Sales', aggregationType: VTable.TYPES.AggregationType.SUM }
    ]
};

const pivotTable = new VTable.PivotTable(pivotOption);

🎨 Styling & Colors

Customize the appearance of your tables with colors, fonts, borders, and themes to match your brand or design requirements.

Custom Colors and Styling

Apply custom colors, backgrounds, and text styles to create visually appealing tables.

const styledOption = {
    container: document.getElementById('styled-table'),
    records: data,
    columns: [
        { 
            field: 'id', 
            title: 'ID', 
            width: 80,
            style: {
                bgColor: '#f0f8ff',
                color: '#0066cc',
                fontWeight: 'bold'
            }
        },
        { 
            field: 'name', 
            title: 'Name', 
            width: 150,
            style: {
                bgColor: '#fff5f5',
                color: '#cc0000'
            }
        },
        { 
            field: 'age', 
            title: 'Age', 
            width: 80,
            style: {
                bgColor: '#f0fff0',
                color: '#008000'
            }
        },
        { 
            field: 'city', 
            title: 'City', 
            width: 120 
        },
        { 
            field: 'salary', 
            title: 'Salary', 
            width: 100,
            style: {
                bgColor: '#fffacd',
                color: '#ff8c00',
                fontWeight: 'bold'
            }
        }
    ],
    theme: {
        headerStyle: {
            bgColor: '#4a90e2',
            color: '#ffffff',
            fontWeight: 'bold'
        },
        bodyStyle: {
            hover: {
                bgColor: '#e6f3ff'
            }
        }
    }
};

const styledTable = new VTable.ListTable(styledOption);

Conditional Styling

Apply different styles based on data values to highlight important information.

const conditionalOption = {
    container: document.getElementById('conditional-table'),
    records: data,
    columns: [
        { field: 'id', title: 'ID', width: 80 },
        { field: 'name', title: 'Name', width: 150 },
        { field: 'age', title: 'Age', width: 80 },
        { field: 'city', title: 'City', width: 120 },
        { 
            field: 'salary', 
            title: 'Salary', 
            width: 100,
            style: {
                bgColor(args) {
                    const { row, col, dataValue } = args;
                    if (dataValue >= 80000) return '#d4edda'; // Green for high salary
                    if (dataValue >= 75000) return '#fff3cd'; // Yellow for medium salary
                    return '#f8d7da'; // Red for low salary
                },
                color(args) {
                    const { dataValue } = args;
                    if (dataValue >= 80000) return '#155724';
                    if (dataValue >= 75000) return '#856404';
                    return '#721c24';
                }
            }
        }
    ]
};

const conditionalTable = new VTable.ListTable(conditionalOption);

⚙️ Behavior Customization

Add interactive features like sorting, filtering, editing, and selection to make your tables more functional.

Sortable Columns

Enable sorting on columns to allow users to organize data as needed.

const sortableOption = {
    container: document.getElementById('sortable-table'),
    records: data,
    columns: [
        { field: 'id', title: 'ID', width: 80, sort: true },
        { field: 'name', title: 'Name', width: 150, sort: true },
        { field: 'age', title: 'Age', width: 80, sort: true },
        { field: 'city', title: 'City', width: 120, sort: true },
        { field: 'salary', title: 'Salary', width: 100, sort: true }
    ]
};

const sortableTable = new VTable.ListTable(sortableOption);

Row Selection

Enable row selection with checkboxes for batch operations.

const selectableOption = {
    container: document.getElementById('selectable-table'),
    records: data,
    columns: [
        { 
            field: '',
            title: '',
            width: 50,
            cellType: 'checkbox',
            checked: false
        },
        { field: 'id', title: 'ID', width: 80 },
        { field: 'name', title: 'Name', width: 150 },
        { field: 'age', title: 'Age', width: 80 },
        { field: 'city', title: 'City', width: 120 },
        { field: 'salary', title: 'Salary', width: 100 }
    ]
};

const selectableTable = new VTable.ListTable(selectableOption);

// Handle selection events
selectableTable.on('checkbox_state_change', (args) => {
    console.log('Selection changed:', args);
});

🚀 NEW: Comprehensive Table Operations

Master advanced table features with our interactive demo covering frozen columns, multi-column sorting, search & filtering, and group operations.

🔒

Frozen Columns & Rows

Keep important data visible while scrolling

🔄

Advanced Sorting

Multi-column sorting with custom functions

🔍

Search & Filter

Real-time filtering with multiple criteria

📊

Group Operations

Hierarchical grouping with aggregations

✨ Explore Interactive Table Operations Demo

⭐ Advanced Features

Explore powerful features like embedded charts, custom cell types, and complex layouts.

Progress Bars and Indicators

Add visual indicators like progress bars to make data more intuitive.

const progressData = [
    { name: 'Project A', progress: 85, status: 'On Track' },
    { name: 'Project B', progress: 65, status: 'At Risk' },
    { name: 'Project C', progress: 95, status: 'Complete' },
    { name: 'Project D', progress: 45, status: 'Behind' }
];

const progressOption = {
    container: document.getElementById('progress-table'),
    records: progressData,
    columns: [
        { field: 'name', title: 'Project Name', width: 150 },
        { 
            field: 'progress', 
            title: 'Progress', 
            width: 200,
            cellType: 'progressbar',
            style: {
                barColor: '#4CAF50',
                barBgColor: '#e0e0e0',
                textColor: '#333'
            }
        },
        { 
            field: 'status', 
            title: 'Status', 
            width: 120,
            style: {
                bgColor(args) {
                    const status = args.dataValue;
                    switch(status) {
                        case 'Complete': return '#d4edda';
                        case 'On Track': return '#cce5ff';
                        case 'At Risk': return '#fff3cd';
                        case 'Behind': return '#f8d7da';
                        default: return '#fff';
                    }
                }
            }
        }
    ]
};

const progressTable = new VTable.ListTable(progressOption);

Responsive Table

Create tables that adapt to different screen sizes and layouts.

const responsiveOption = {
    container: document.getElementById('responsive-table'),
    records: data,
    columns: [
        { field: 'id', title: 'ID', width: 'auto', minWidth: 60 },
        { field: 'name', title: 'Name', width: 'auto', minWidth: 120 },
        { field: 'age', title: 'Age', width: 'auto', minWidth: 60 },
        { field: 'city', title: 'City', width: 'auto', minWidth: 100 },
        { field: 'salary', title: 'Salary', width: 'auto', minWidth: 80 }
    ],
    widthMode: 'adaptive', // Automatically adjust column widths
    autoFillWidth: true    // Fill the container width
};

const responsiveTable = new VTable.ListTable(responsiveOption);

🔧 Complete Customization Guide

Learn how to fully customize every aspect of your VTable to meet specific requirements.

Complete Custom Theme

Create a completely custom theme with your own colors, fonts, and styling.

const customThemeOption = {
    container: document.getElementById('custom-theme-table'),
    records: data,
    columns: [
        { field: 'id', title: 'ID', width: 80 },
        { field: 'name', title: 'Name', width: 150 },
        { field: 'age', title: 'Age', width: 80 },
        { field: 'city', title: 'City', width: 120 },
        { field: 'salary', title: 'Salary', width: 100 }
    ],
    theme: {
        defaultStyle: {
            color: '#2c3e50',
            bgColor: '#ffffff',
            borderColor: '#bdc3c7',
            fontSize: 14,
            fontFamily: 'Arial, sans-serif'
        },
        headerStyle: {
            color: '#ffffff',
            bgColor: '#34495e',
            fontSize: 16,
            fontWeight: 'bold',
            borderColor: '#2c3e50'
        },
        rowHeaderStyle: {
            color: '#2c3e50',
            bgColor: '#ecf0f1',
            borderColor: '#bdc3c7'
        },
        cornerHeaderStyle: {
            color: '#ffffff',
            bgColor: '#2c3e50',
            borderColor: '#34495e'
        },
        bodyStyle: {
            hover: {
                bgColor: '#e8f4fd',
                inlineColumnBgColor: '#f0f9ff'
            },
            selected: {
                bgColor: '#3498db',
                color: '#ffffff'
            }
        }
    }
};

const customThemeTable = new VTable.ListTable(customThemeOption);

Event Handling

Add interactivity with comprehensive event handling for clicks, selections, and data changes.

const eventsOption = {
    container: document.getElementById('events-table'),
    records: data,
    columns: [
        { field: 'id', title: 'ID', width: 80 },
        { field: 'name', title: 'Name', width: 150 },
        { field: 'age', title: 'Age', width: 80 },
        { field: 'city', title: 'City', width: 120 },
        { field: 'salary', title: 'Salary', width: 100 }
    ]
};

const eventsTable = new VTable.ListTable(eventsOption);
const logElement = document.getElementById('events-log');

function logEvent(message) {
    const timestamp = new Date().toLocaleTimeString();
    logElement.innerHTML += `[${timestamp}] ${message}\n`;
    logElement.scrollTop = logElement.scrollHeight;
}

// Cell click event
eventsTable.on('click_cell', (args) => {
    logEvent(`Cell clicked: row ${args.row}, col ${args.col}, value: ${args.value}`);
});

// Selection change
eventsTable.on('selected_cell', (args) => {
    logEvent(`Cell selected: row ${args.row}, col ${args.col}`);
});

// Mouse hover
eventsTable.on('mouseenter_cell', (args) => {
    logEvent(`Mouse entered cell: row ${args.row}, col ${args.col}`);
});