Surely Vue Table

Surely Vue Table is a high-performance table component designed to handle complex, high-frequency data scenarios such as large-scale data rendering and chart integration. It is optimized for smooth scrolling with datasets up to 100,000 rows and 100,000 columns using virtual scrolling.

Key Characteristics:

• Virtual Scrolling: Enabled by default for rows and columns. It supports advanced features like tree data, expanded content, nested sub-tables, row/column merging, automatic row height, and fixed headers/columns while maintaining performance.
• Framework Agnostic: Although developed by the Ant Design Vue team, it can be used with any Vue-based component library.
• Commercial Model: This is a commercial component. It can be used for free, but the watermark cannot be removed or hidden.

When you purchase a license, you receive permanent usage rights for the version you purchased, but 'update rights' are time-limited (typically one year).

• Permanent Usage: You can use the version you purchased indefinitely.
• Update Rights: This allows you to upgrade to newer versions released within your update period. For example, if you purchase one-year update rights on Nov 11, 2021, you can upgrade to any version released up to Nov 11, 2022. Versions released after that date require a new authorization or a renewal of update rights.

All versions of Surely Vue Table provide the same features. The differences lie solely in the domain authorization rules:

• Standard Edition (标准版): Authorizes a specific, strictly formatted domain (e.g., admin.baidu.com). The license cannot be used on any other site.
• Professional Edition (专业版): Authorizes a parent domain and all its subdomains (e.g., any domain under baidu.com).
• Flagship Edition (旗舰版): No domain restrictions.

Important Note on Domains: Once a domain is authorized, it cannot be changed. If you need to use a different domain, you must purchase a new license. If you realize you need a higher tier, you can pay the price difference to upgrade to Professional or Flagship within three months of purchase.

The library supports advanced drag-and-drop interactions:

• Column Dragging: Supported since version 2.1.1.
• Row Dragging (Sorting): Supported since version 2.1.0, including support for tree structures and sub-tables.

All editions provide the same functional features. The primary difference lies in the domain name authorization limits:

• Standard Edition: Authorizes a specific domain name in a standard format (e.g., admin.baidu.com). The license key is restricted to that exact domain.
• Professional Edition: Authorizes all subdomains under a specific domain (e.g., any domain under baidu.com).
• Max Edition: Does not limit domain names; the license can be used across any domain.

Important: Once a domain name is authorized, it cannot be changed. If you need to change the domain for Standard or Professional editions, you must repurchase a new authorization certificate. You can upgrade from Standard to Professional or Max by paying the price difference within three months of purchase.

Purchasing a license grants you permanent usage rights for the version you purchased, but Update Rights are limited by time:

• Update Rights: This determines which new versions you can upgrade to. For example, if you purchase a 1-year update right on 2021-11-11, you can upgrade to any version released before 2022-11-11. Versions released after that date require a new purchase or a renewal of update rights.
• New Components: As long as you have active Update Rights, you can use any new components or features released during that period without additional fees.

Register the STable component globally in your Vue application entry point. Registering STable will automatically register its sub-components: STableColumn, STableColumnGroup, STableSummary, STableSummaryRow, and STableSummaryCell.

In your templates, components use kebab-case naming (e.g., STable becomes <s-table>).

import { createApp } from 'vue';
import STable from '@surely-vue/table';
import App from './App.vue';

const app = createApp(App);
app.use(STable);

<s-table :columns="columns" :data-source="dataSource"></s-table>

Technical support is provided for one year following purchase via:

• Ticket system (工单)
• DingTalk technical group (钉钉技术群)

In the Table component, every object in the dataSource and every column definition in columns must have a unique identifier. By default, the component looks for a key property on each data object to use as its unique ID.

If your data uses a different property name for its primary key (e.g., uid), you must use the rowKey prop to specify it. Failing to do so will result in console warnings and unpredictable component behavior.

// If your data primary key is 'uid'
return <Table rowKey="uid" />;

// Or using a function to resolve the key
return <Table rowKey={record => record.uid} />;

Global configurations must be set at the application entry point and only need to be configured once. You can set the license key for authorization and general table settings like theme, animation, and primary color.

import { setLicenseKey, setConfig } from '@surely-vue/table';

// Set authorization license
setLicenseKey('YOUR_LICENSE_KEY');

// Set global table configuration
setConfig({
  animateRows: true,      // Enable/disable row animations
  theme: 'light',         // 'light' | 'dark'
  primaryColor: '#1890ff', // Theme primary color
  prefixCls: 'surely-table' // CSS class prefix
});