# @visactor/vtable > canvas table width high performance Latest version **1.26.8** (published 2026-09-11) · MIT license · 0 weekly downloads ## Install ```sh npm install @visactor/vtable pnpm add @visactor/vtable yarn add @visactor/vtable bun add @visactor/vtable ``` ## Health **Score 75/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score. Warnings: low downloads; large bundle. ## Facts | | | |---|---| | Version | 1.26.8 | | Published | 2026-09-11 | | First published | 2023-06-06 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 13 | | Unpacked size | 25.4 MB | | Known vulnerabilities | 0 (+2 in 1 direct dependencies) | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 3682 | | Author | VisActor | | Maintainers | liufangfang, visactorowner, xuanhun, zamhown, chensiji.0517, youngwinds, purpose233, ssfxz, lixuefei.1313, ray_sun, xiaoluohe, simaq, xile611, da730, zhouxinyu66888, zexian_chen | | Keywords | grid, table, pivottable, visualization, VTable, VisActor, spreadsheet, canvas, datagrid, datatable | ## Links - npm: https://www.npmjs.com/package/@visactor/vtable - Repository: https://github.com/VisActor/VTable - Homepage: https://visactor.io/vtable - Issues: https://github.com/VisActor/VTable/issues - npm.io page: https://npm.io/package/@visactor/vtable ## Dependencies (13) - [lodash](https://npm.io/package/lodash.md) 4.17.21 - [gifuct-js](https://npm.io/package/gifuct-js.md) 2.1.2 - [cssfontparser](https://npm.io/package/cssfontparser.md) ^1.2.1 - [@visactor/vscale](https://npm.io/package/@visactor/vscale.md) ~1.0.17 - [@visactor/vutils](https://npm.io/package/@visactor/vutils.md) ~1.0.17 - [@visactor/vrender](https://npm.io/package/@visactor/vrender.md) ~1.1.8 - [@visactor/vdataset](https://npm.io/package/@visactor/vdataset.md) ~1.0.17 - [@visactor/vrender-core](https://npm.io/package/@visactor/vrender-core.md) ~1.1.8 - [@visactor/vrender-kits](https://npm.io/package/@visactor/vrender-kits.md) ~1.1.8 - [@visactor/vtable-editors](https://npm.io/package/@visactor/vtable-editors.md) 1.26.8 - [@visactor/vrender-animate](https://npm.io/package/@visactor/vrender-animate.md) ~1.1.8 - [@visactor/vutils-extension](https://npm.io/package/@visactor/vutils-extension.md) ~2.0.12 - [@visactor/vrender-components](https://npm.io/package/@visactor/vrender-components.md) ~1.1.8 ## Alternatives - [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads - [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads - [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads - [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads - [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads ## Recent versions - 1.26.8 (latest) — 2026-09-11 - 1.26.4-alpha.0 (alpha) — 2026-06-30 - 1.18.12 (beta) — 2026-04-17 - 0.9.1-alpha.3 (alpha.3) — 2023-06-15 - 1.26.7 — 2026-08-20 - 1.26.6 — 2026-08-03 - 1.26.5 — 2026-07-15 - 1.26.4 — 2026-07-06 - 1.26.3 — 2026-06-25 - 1.26.3-alpha.0 — 2026-06-23 - 1.26.2 — 2026-06-16 - 1.26.2-none — 2026-06-16 - 1.27.0-alpha.3 — 2026-05-19 - 1.27.0-alpha.2 — 2026-05-18 - 1.27.0-alpha.1 — 2026-05-18 - … 751 more at https://npm.io/package/@visactor/vtable/versions ## README
VisActor Logo

VTable

VTable is not just a high-performance multidimensional data analysis table, but also a grid artist that creates art between rows and columns.

Introduction • demo • Tutorial • API•

[![npm Version](https://img.shields.io/npm/v/@visactor/vtable.svg)](https://www.npmjs.com/package/@visactor/vtable) [![npm Download](https://img.shields.io/npm/dm/@visactor/vtable.svg)](https://www.npmjs.com/package/@visactor/vtable) [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/visactor/vtable/blob/main/LICENSE)
English| [简体中文](./README.zh-CN.md)
（video）
# Introduction VTable is a canvas table library based on visual rendering engine [VRender](https://github.com/VisActor/VRender). The core capabilities are as follows: 1. Extreme performance: Supports fast computation and rendering of millions of data points. 2. Multidimensional analysis: Automatically analyzes and presents multidimensional data. 3. Strong expressiveness: Provides flexible and powerful graphic capabilities, seamlessly integrating with charts of [VChart](https://github.com/VisActor/VChart). # Repo Intro This repository includes the following packages: 1. vtable: VTable components 2. vtable-docs: VTable documentation # Usage ## Installation [npm package](https://www.npmjs.com/package/@visactor/vtable) ```bash // npm npm install @visactor/vtable // yarn yarn add @visactor/vtable ``` ## Quick Start ```javascript import * as VTable from '@visactor/vtable'; const columns =[ { "field": "Order ID", "caption": "Order ID", }, { "field": "Customer ID", "caption": "Customer ID", }, { "field": "Product Name", "caption": "Product Name", }, { "field": "Sales", "caption": "Sales", }, { "field": "Profit", "caption": "Profit", } ]; const option = { records:[ { "Order ID": "CA-2018-156720", "Customer ID": "JM-15580", "Product Name": "Bagged Rubber Bands", "Sales": "3.024", "Profit": "-0.605" }, { "Order ID": "CA-2018-115427", "Customer ID": "EB-13975", "Product Name": "GBC Binding covers", "Sales": "20.72", "Profit": "6.475" }, ... ], columns, widthMode:'standard' }; const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option); ``` ## Component Layout Priority The `componentLayoutOrder` option allows you to control the layout priority of `title` and `legend`. This affects the order in which they occupy space in the drawing area. By default, the order is `['legend', 'title']`. To place the title above the legend, you can configure it as follows: ```javascript const option = { // ...other options title: { text: 'Sales Analysis', orient: 'top', align: 'center' }, legends: { orient: 'top', // ...other legend options }, componentLayoutOrder: ['title', 'legend'] }; const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option); ``` ## [More demos and detailed tutorials](https://visactor.io/vtable) # Related Links - [Official website](https://visactor.io/vtable) # Ecosystem | Project | Description | | ----------------------------------------------------------- | -------------------------------------------------------------------------------------- | | [AI-generated Components](https://visactor.io/ai-vtable) | AI-generated table component. | # Contribution If you would like to contribute, please read the [Code of Conduct ](./CODE_OF_CONDUCT.md) 和 [ Guide](./CONTRIBUTING.zh-CN.md) first。 Small streams converge to make great rivers and seas! # License [MIT License](./LICENSE) --- _Source: https://npm.io/package/@visactor/vtable · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._