vTable实现多维表格

介绍

vTable是字节开发的一款能用来渲染表格的库,是用canvas渲染,避免了传统用dom组件表格的一些问题,能很快的渲染出上万格子的表格。

接下来我将使用vTable构建类似下面的多维表格,其中quantity、sales等是指标。

使用

官网地址:Getting_Started------VisActor/VTable tutorial documents

1、首先下载npm,或者cdn引入vtable,并且准备一个div作为容器。vTable有ListTable(普通表格)和PivotTable(透视表)的区别,我们现在用PivotTable来构建表格。

html 复制代码
<script src="https://unpkg.com/@visactor/vtable/dist/vtable.min.js"></script>

<div id="tableContainer" style="width: 100vw;height:100vh;"></div>

<script>
 // 创建 VTable 实例
      const tableInstance = new VTable.PivotTable(document.getElementById('tableContainer'), option);
</script>

2、准备表格数据

html 复制代码
[
  {
    "city": "重庆",
    "exist": 1,
    "sold": 2,
    "column1": "家具"
  },
  {
    "city": "武汉",
    "column1": "家具",
    "exist": 7,
    "sold": 8
  },
  {
    "city": "重庆",
    "column1": "家具",
    "exist": 2,
    "sold": 3
  },
  {
    "city": "武汉",
    "column1": "家具",
    "exist": 8,
    "sold": 9
  },
  {
    "city": "重庆",
    "column1": "体育器材",
    "exist": 4,
    "sold": 5
  },
  {
    "city": "武汉",
    "column1": "体育器材",
    "exist": 10,
    "sold": 11
  },
  {
    "city": "重庆",
    "column1": "体育器材",
    "exist": 6,
    "sold": 7
  },

  {
    "city": "武汉",
    "column1": "体育器材",
    "exist": 11,
    "sold": 12
  }
]

3、构建option。

row和column用来指定行和列,

indicators用来指定指标,

dataConfig用来设置合计、平均值等一些计算,

hideIndicatorName用来设置是否隐藏指标

更多配置请看官网

javascript 复制代码
      const records = content
      const option = {
        records,
        rows: [
          {
            dimensionKey: 'city',
            title: '城市',
          }
        ],
        columns: [{
          dimensionKey: 'column1',
          title: '类别',
        }
        ],
        indicators: [{
          indicatorKey: 'exist',
          title: '现存'
        },
        {
          indicatorKey: 'sold',
          title: '已售',
        }
        ],
        // 设置左上角
        corner: {
          titleOnDimension: 'all',//row   column  all
        },
        // hideIndicatorName: true,//隐藏指标名
        // 设置合计
        dataConfig: {
          totals: {
            row: {
              showGrandTotals: true,
              subTotalsDimensions: ['exist'],
              grandTotalLabel: '合计',
            },
          }
        },
        widthMode: 'standard'
      };

完整代码

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- <script src="https://unpkg.com/@visactor/vtable/dist/vtable.min.js"></script> -->
  <script src="./vtable.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

  </style>
</head>

<body>
  <div id="tableContainer" style="width: 99vw;height:99vh;"></div>
  <script>
    fetch('./data4.txt').then(res => res.json()).then(res => {

      console.log(res);
      let content = res
      const records = content
      const option = {
        records,
        rows: [
          {
            dimensionKey: 'city',
            title: '城市',
          }
        ],
        columns: [{
          dimensionKey: 'column1',
          title: '类别',
        }
        ],
        indicators: [{
          indicatorKey: 'exist',
          title: '现存'
        },
        {
          indicatorKey: 'sold',
          title: '已售',
        }
        ],
        // 设置左上角
        corner: {
          titleOnDimension: 'all',//row   column  all
        },
        // hideIndicatorName: true,//隐藏指标名
        // 设置合计
        dataConfig: {
          totals: {
            row: {
              showGrandTotals: true,
              subTotalsDimensions: ['exist'],
              grandTotalLabel: '合计',
            },
          }
        },
        widthMode: 'standard'
      };
      // 创建 VTable 实例
      const tableInstance = new VTable.PivotTable(document.getElementById('tableContainer'), option);

    })

  </script>
</body>

</html>

效果

现存和已售是指标。

最后附上效果:

END

相关推荐
京东零售技术11 分钟前
京东小程序JS API仓颉改造实践
前端
老A技术联盟21 分钟前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
风铃喵游24 分钟前
构建引擎: 打造小程序编译器
前端·小程序·架构
sunbyte29 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
小飞悟38 分钟前
🎯 什么是模块化?CommonJS 和 ES6 Modules 到底有什么区别?小白也能看懂
前端·javascript·设计
浏览器API调用工程师_Taylor38 分钟前
AOP魔法:一招实现登录弹窗的全局拦截与动态处理
前端·javascript·vue.js
FogLetter39 分钟前
初识图片懒加载:让网页像"懒人"一样聪明加载
前端·javascript
微客鸟窝40 分钟前
一文搞懂NVM管理Node.js:从安装到实战全攻略
前端
归于尽41 分钟前
Cookie、Session、JWT 的前世今生
前端
程序员辉哥42 分钟前
学会在Cursor中使用Rules生成代码后可以躺平了吗?
前端·后端