VisActor / VisActor/VTable

[Bug] 打开1千万行的数据,将表格进行转置类渲染,将滚动条拖动至底部,发现表格存在空白的渲染

Open
#3,327 1 comment 0 reactions 1 assignee View on GitHub

@Rui-Sun is already working on this.

Since Jan 17, 2025.

bug
Dominant language
TypeScript
Stars
3.7k
Forks
486
Avg merge
1d 19h
Merged PRs (30d)
16

Description

Version

1.15.0

Link to Minimal Reproduction

https://visactor.io/vtable/demo/performance/100W

Steps to Reproduce

1、执行以下代码
function generateRandomString(length) {
let result = '';
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
for (let i = 0; i < length; i++) {
result += characters.charAt(Math.floor(Math.random() * characters.length));
}
return result;
}
function generateRandomHobbies() {
const hobbies = [
'Reading books',
'Playing video games',
'Watching movies',
'Cooking',
'Hiking',
'Traveling',
'Photography',
'Playing musical instruments',
'Gardening',
'Painting',
'Writing',
'Swimming'
];

const numHobbies = Math.floor(Math.random() * 3) + 1; // 生成 1-3 之间的随机整数
const selectedHobbies = [];

for (let i = 0; i < numHobbies; i++) {
const randomIndex = Math.floor(Math.random() * hobbies.length);
const hobby = hobbies[randomIndex];
selectedHobbies.push(hobby);
hobbies.splice(randomIndex, 1); // 确保每个爱好只选一次
}

return selectedHobbies.join(', ');
}
function generateRandomBirthday() {
const start = new Date('1970-01-01');
const end = new Date('2000-12-31');
const randomDate = new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
const year = randomDate.getFullYear();
const month = randomDate.getMonth() + 1;
const day = randomDate.getDate();
return ${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day};
}

function generateRandomPhoneNumber() {
const areaCode = ['130', '131', '132', '133', '134', '135', '136', '137', '138', '139', '150', '151', '152', '153', '155', '156', '157', '158', '159', '170', '176', '177', '178', '180', '181', '182', '183', '184', '185', '186', '187', '188', '189'];
const prefix = areaCode[Math.floor(Math.random() * areaCode.length)];
const suffix = String(Math.random()).substr(2, 8);
return prefix + suffix;
}

const generatePersons = (count) => {
return Array.from(new Array(count)).map((_, i) => {
const first=generateRandomString(10);
const last=generateRandomString(4);
return {
id: i+1,
email1: ${first}_${last}@xxx.com,
name: first,
lastName: last,
hobbies: generateRandomHobbies(),
birthday: generateRandomBirthday(),
tel: generateRandomPhoneNumber(),
sex: i % 2 === 0 ? 'boy' : 'girl',
work: i % 2 === 0 ? 'back-end engineer' : 'front-end engineer',
city: 'beijing',
}});
};

const records = generatePersons(10000000);
const columns = [
{
field: 'id',
title: 'ID',
width: 80,
sort: true,
},
{
field: 'email1',
title: 'email',
width: 250,
sort: false,
},
{
field: 'full name',
title: 'Full name',
columns: [
{
field: 'name',
title: 'First Name',
width: 120,
},
{
field: 'lastName',
title: 'Last Name',
width: 100,
},
],
},
{
field: 'hobbies',
title: 'hobbies',
width: 200,
},
{
field: 'birthday',
title: 'birthday',
width: 120,
},
{
field: 'sex',
title: 'sex',
width: 100,
},
{
field: 'tel',
title: 'telephone',
width: 150,
},
{
field: 'work',
title: 'job',
width: 200,
},
{
field: 'city',
title: 'city',
width: 150,
},
];
const option = {
records,
columns,
transpose: true
};
const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option);
window['tableInstance'] = tableInstance;
2、把表格滚动至底部,发现有空白
Image

Image

Current Behavior

存在空白渲染

Expected Behavior

无空白

Environment
- OS:
- Browser:
- Framework:
Any additional comments?

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.