[Feature] 透视表性能差，8000条数据就卡

What problem does this feature solve?

可以的话，还请优化一下
https://applink.feishu.cn/client/message/link/open?token=AmU%2FQqHXB0ADaYFiXOBBDtw%3D

测试数据
testdata.ts

性能对比
vtable

https://github.com/user-attachments/assets/280da75b-1804-4cfc-a713-dbd9b485db9b

DevExtreme
开启虚拟渲染

https://github.com/user-attachments/assets/3e13a790-bd27-43cf-89cd-87fbf7b99cea

测试数据
testdata.ts
vtable代码

<script setup lang="ts">
import { onMounted } from 'vue'
import data from './testdata'
import * as VTable from '@visactor/vtable'
import { InputEditor } from '@visactor/vtable-editors'


const VTag = VTable.VTag
const input_editor = new InputEditor({})
VTable.register.editor('input-editor', input_editor)
function statusCellRender(args) {
  const { value, rect, data } = args
  const isOpen = value === 'Open'

  const bgColor = isOpen ? '#FFF3E0' : '#E8F5E9'
  const textColor = isOpen ? '#FB8C00' : '#2E7D32'

  return {
    type: 'group',
    pickable: true,
    cursor: 'pointer',
    children: [
      {
        type: 'rect',
        x: 6,
        y: 6,
        width: rect.width - 12,
        height: rect.height - 12,
        fill: bgColor,
        radius: 6,
      },
      {
        type: 'text',
        text: value,
        x: rect.width / 2,
        y: rect.height / 2,
        textAlign: 'center',
        textBaseline: 'middle',
        fill: textColor,
        fontWeight: 'bold',
      },
    ],
    onClick: () => {
      console.log('点击 Status', data)
    },
  }
}

onMounted(() => {
  const table = new VTable.PivotTable({
    theme: { scrollStyle: {
    width: 10,
    visible: 'always',
  },},
    container: document.getElementById('container'),
    records: data,
    rowHierarchyType: 'grid-tree',
    corner: { titleOnDimension: 'row', },
    rowExpandLevel:5,
       rows: [
          {
            dimensionKey: 'channel',
            title: 'channel',
            hide: false,
            maxWidth: 450,
            showSubTotal: true,
            headerStyle: { textStick: true },
            width: 'auto',
            oibpType: 'string',
          },
          {
            dimensionKey: 'city',
            title: 'city',
            hide: false,
            maxWidth: 450,
            showSubTotal: false,
            headerStyle: { textStick: true },
            width: 'auto',
            oibpType: 'string',
          },
          {
            dimensionKey: 'store',
            title: 'store',
            hide: false,
            maxWidth: 450,
            showSubTotal: false,
            headerStyle: { textStick: true },
            width: 'auto',
            oibpType: 'string',
          },
          {
            dimensionKey: 'product_category',
            title: 'product_category',
            hide: false,
            maxWidth: 450,
            showSubTotal: false,
            headerStyle: { textStick: true },
            width: 'auto',
            oibpType: 'string',
          },
          {
            dimensionKey: 'sku',
            title: 'sku',
            hide: false,
            maxWidth: 450,
            showSubTotal: false,
            headerStyle: { textStick: true },
            width: 'auto',
            oibpType: 'string',
          },
        ],
        columns: [
          {
            dimensionKey: 'year_co',
            title: 'year',
            hide: false,
            showSubTotal: false,
            headerStyle: { textStick: true },
            width: 'auto',
            oibpType: 'string',
          },
          {
            dimensionKey: 'year_mth',
            title: 'month',
            hide: false,
            showSubTotal: false,
            headerStyle: { textStick: true },
            width: 'auto',
            oibpType: 'string',
          },
          {
            dimensionKey: 'day_of_month',
            title: 'day',
            hide: false,
            showSubTotal: false,
            headerStyle: { textStick: true },
            width: 'auto',
            oibpType: 'string',
          },
        ],
        indicators: [
          {
            indicatorKey: 'original_value',
            title: 'original_value',
            maxWidth: 300,
            hide: false,
            oibpFilterStyles: [],
            oibpType: 'number',
            oibpaggregationType: 'sum',
            headerStyle: { fontWeight: 'normal', color: '#737373' },
            editor: function (r) {
              const { row: o, col: a, table: s } = r,
                l = s.getCellInfo(a, o),
                x = context.utils.getIsLock(l);
              return x && x.lock ? null : 'input-editors';
            },
            isModify: true,
            splitStrategy: 'PROPORTIONAL',
            allocationStrategy: 'MAX',
            splitConfig: { precision: 2, minSplitValue: 0.01 },
          },
          {
            indicatorKey: 'original_cost',
            title: 'original_cost',
            maxWidth: 300,
            hide: false,
            oibpFilterStyles: [],
            oibpType: 'number',
            oibpaggregationType: 'sum',
            headerStyle: { fontWeight: 'normal', color: '#737373' },
            editor: function (r) {
              const { row: o, col: a, table: s } = r,
                l = s.getCellInfo(a, o),
                x = context.utils.getIsLock(l);
              return x && x.lock ? null : 'input-editors';
            },
            isModify: true,
            splitStrategy: 'AVERAGE',
            allocationStrategy: 'MAX',
            splitConfig: {
              measureField: 'original_cost',
              precision: 2,
              minSplitValue: 0.01,
            },
          },
          {
            indicatorKey: 'ref_value',
            title: 'ref_value',
            maxWidth: 300,
            hide: false,
            oibpFilterStyles: [],
            oibpType: 'number',
            oibpaggregationType: 'sum',
            headerStyle: { fontWeight: 'normal', color: '#737373' },
            editor: function (r) {
              const { row: o, col: a, table: s } = r,
                l = s.getCellInfo(a, o),
                x = context.utils.getIsLock(l);
              return x && x.lock ? null : 'input-editors';
            },
            isModify: true,
            splitStrategy: 'AVERAGE',
            allocationStrategy: 'MAX',
            splitConfig: {
              measureField: 'ref_value',
              precision: 2,
              minSplitValue: 0.01,
            },
          },
        ],
  })
})
</script>

<template>
  <div id="container" style="width: 1000px; height: 500px"></div>
</template>

devExtreme代码

<template>
  <div>
    <div class="long-title">
      <h3>Sales Amount by Region</h3>
    </div>
    <DxPivotGrid
      id="sales"
      :allow-sorting-by-summary="true"
      :allow-sorting="true"
      :allow-filtering="true"
      :allow-expand-all="true"
      :height="440"
      :show-borders="true"
      :data-source="dataSource"

    >
      <DxFieldChooser :enabled="false"/>
            <DxScrolling mode="virtual"/>
    </DxPivotGrid>
  </div>
</template>
<script setup lang="ts">
import DxPivotGrid, {
  DxFieldChooser,
  DxScrolling,
} from 'devextreme-vue/pivot-grid';
import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
// 引入devextreme相关
import 'devextreme/dist/css/dx.common.css' // devextreme style
import 'devextreme/dist/css/dx.light.compact.css' // devextreme style
import sales from './testdata';
// const c = [...sales, sales.map((item) => {
//   const cd = Object.keys(item)
//   const c = {}
//   cd.map((key) => {
//     c[key] = item[key]+1
//   })
//   return c
// })]
const dataSource = new PivotGridDataSource({
  fields: [
    {
      caption: 'channel',
      width: 120,
      dataField: 'channel',
      area: 'row',
      expanded: true,
    },
    {
      caption: 'city',
      dataField: 'city',
      width: 150,
      area: 'row',
      expanded: true,
    },
    {
      caption: 'store',
      dataField: 'store',
      width: 150,
      area: 'row',
      expanded: true,
    },
    {
      caption: 'city',
      dataField: 'city',
      width: 150,
      area: 'row',
      expanded: true,
    },
    {
      caption: 'product_category',
      dataField: 'product_category',
      width: 150,
      area: 'row',
      expanded: true,
    },

    {
      caption: 'sku',
      dataField: 'sku',
      width: 150,
      area: 'row',
      expanded: true,
    },

    {
      caption: 'year_co',
      dataField: 'year_co',

      area: 'column',
      expanded: true,
    },

    {
      caption: 'year_mth',
      dataField: 'year_mth',
      width: 150,
      area: 'column',
      expanded: true,
    },
    {
      caption: 'day_of_month',
      dataField: 'day_of_month',
      width: 150,
      area: 'column',
      expanded: true,

    },

    {
      caption: 'original_value',
      dataField: 'original_value',
      width: 150,
      area: 'data',
      expanded: true,
          dataType: 'number',
    summaryType: 'sum',
    },
    {
      caption: 'original_cost',
      dataField: 'original_cost',
      width: 150,
      area: 'data',
      expanded: true,
          dataType: 'number',
    summaryType: 'sum',
    },
    {
      caption: 'ref_value',
      dataField: 'ref_value',
      width: 150,
      area: 'data',
    dataType: 'number',
    summaryType: 'sum',
      expanded: true,
    },
  ],
  store: sales,
});
</script>`

### What does the proposed API look like?

见上

Start with the attached testdata.ts and the embedded VTable.PivotTable configuration, then compare its behavior with the DevExtreme example using virtual scrolling. Investigate the lag at around 8,000 records and define completion as a measurable improvement in responsiveness for the supplied pivot-table setup.