VisActor / VTable

VTable is not just a high-performance multidimensional data analysis table, but also a grid artist that creates art between rows and columns.
https://visactor.io/vtable
MIT License
1.38k stars 95 forks source link

【Bug】React-VTable 使用图元报错:Uncaught TypeError: type is not a function #2041

Open mzhang-eric opened 4 days ago

mzhang-eric commented 4 days ago

版本:1.4.1

复现步骤:

  1. 使用如下官网示例: https://visactor.io/vtable/demo-react/usage/option-record

配置option如下:

const option = {
  columns: [
    {
      field: '0',
      title: 'name'
    },
    {
      field: '1',
      title: 'age',
      customLayout: () =>{
        const container = (
          <ReactVTable.Group
            attribute={{
              width: 80,
              height: 80,
              display: 'flex',
            }}
          >
            <ReactVTable.Text 
              attribute={{
                text: 'test',
                fontSize: 14,
                fontFamily: 'sans-serif',
                fill: 'rgb(51, 101, 238)',
              }}
            />
          </ReactVTable.Group>
        );
        return {
          rootContainer: container,
          renderDefault: false,
        };
      }
    },
    {
      field: '2',
      title: 'gender'
    },
    {
      field: '3',
      title: 'hobby'
    }
  ]
};
  1. 页面报错崩溃:Uncaught TypeError: type is not a function

image

【说明】 使用该示例主要是想实现一下 自定义单元格渲染,类似于 单元格自定义布局(JSX),区别在于我使用的是 react-vtable,想确认一下是当前版本是否支持这种使用方式?

因为我之前也尝试了语义化标签的用法,如示例 单元格自定义组件+dom组件,但是这种用法,看起来没有提供像上面 customLayout 函数中返回的 renderDefault。

因此,能否修复上述bug,或者提供这种使用方式?

Rui-Sun commented 3 days ago

非React环境的函数式写法,可以参考https://www.visactor.io/vtable/demo/custom-render/custom-cell-layout 或 https://www.visactor.io/vtable/demo/custom-render/custom-cell-layout-jsx ,使用相关类或jsx标签,不能使用react-vtable提供的组件

Rui-Sun commented 3 days ago

renderDefault 会作为新需求补充到react-vtable中