嗨,我是小华同学,专注解锁高效工作与前沿AI工具!每日精选开源技术、实战技巧,助你省时50%、领先他人一步。👉免费订阅,与10万+技术人共享升级秘籍!
VTable 已在 GitHub 上获得 2.7k+ ⭐,由字节跳动团队主导开发,是一款基于 Canvas 的高性能多维分析表格组件库。企业级数据分析系统里,每天要处理成百上千万条记录,传统 DOM 表格越来越跟不上处理速度,总是卡顿、加载慢、响应差。VTable 的诞生就是为了应对这种痛点:真·百万级数据毫秒级渲染,交互丝滑不卡顿。
VTable 的出现,就是为了解决这些痛点:渲染快、交互流畅、表达丰富!
功能 | 描述 |
---|---|
极致性能 | 基于 VRender 引擎,支持百万级数据毫秒渲染 |
多表格形态 | ListTable(基础列表)、PivotTable(透视表)、PivotChart(表格+图)、Gantt(甘特图) |
丰富单元格展示 | 支持 text/link/image/video/sparkline/progressbar/chart,轻松做数据可视化 |
强交互能力 | 支持选择、框选、列拖拽、排序、冻结列、列宽调整、hover 高亮、tooltip 与 dropdown 等 |
自定义渲染灵活性 | 支持 customRender 与列级 columns.customRender,可渲染复杂布局、图标、列表 |
多种主题 & 样式 | ARCO、LIGHT、DARK、SIMPLY 可选,支持按列/按单元格 style 配置 |
按需加载 | 提供轻量版组件(ListTableSimple / PivotTableSimple),支持注册插件按需加载单元格类型 |
React / Vue 生态支持 | 提供 react-vtable 和 vue-vtable 封装,更易集成现代前端框架 |
编辑扩展 | 支持内联编辑、drop handle 批量填充,结合 @visactor/vtable-editors 可扩展输入组件 |
技术优势:
npm install @visactor/vtable
# 或
yarn add @visactor/vtable
<div id="tableContainer" style="width: 800px; height: 600px;"></div>
<script src="https://unpkg.com/@visactor/vtable/dist/vtable.min.js"></script>
<script>
const data = [
{ name: '订单 A', sales: 123, profit: 45, trend: [1,2,3,4] },
// …
];
const table = new VTable.ListTable({
container: document.getElementById('tableContainer'),
columns: [
{ field: 'name', title: '订单名称', cellType: 'text' },
{
field: 'trend',
title: '趋势',
cellType: 'sparkline',
cellStyle: { lineColor: '#1890ff' }
}
],
records: data,
hover: { highlightMode: 'cross' },
select: { headerSelectMode: 'row' }
});
</script>
import { PivotChart } from '@visactor/vtable';
new PivotChart({
container: ...,
data: rawData,
rows: ['region', 'category'],
columns: ['month'],
indicators: [{ field: 'sales', title: '销售额', aggMode: 'sum' }],
cellTypes: { sales: 'sparkline' }
});
new VTable.ListTable({
customRender: {
important: ({x,y,w,h,record}) => [
{ type: 'text', text: record.title, x, y },
{ type: 'circle', x: x+10, y: y+20, r: 5, fill: 'red' }
]
},
columns: [ /* ... */ ],
records: records
});
项目 | 渲染方式 | 支持数据量 | 图表嵌入 | 透视表 | 编辑支持 | React/Vue |
---|---|---|---|---|---|---|
VTable | Canvas | 百万级 | ✅ | ✅ | ✅ | ✅ |
AG-Grid | DOM/Canvas | 十万级 | 部分 | ✅ | ✅ | ✅ |
Handsontable | DOM | 数万 | ❌ | ❌ | ✅ | ✅ |
Tabulator | DOM | 数万 | 部分 | ❌ | ✅ | ✅ |
优势:渲染性能领先,图表支持丰富,编辑扩展能力强。
VTable 是一款由字节跳动团队打造的 高性能、功能全面、灵活扩展、跨框架适配 的可视化表格组件库。无论是海量数据渲染,还是交互式串联图表、进度条、Sparkline,VTable 都能胜任,更关键的是开发成本低,扩展组件丰富,React/Vue 双生态支持。
https://github.com/VisActor/VTable
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。