ElemeFE / ElemeFE/element-react

Table too slow with 1000 data

Open
#758 3 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
2.8k
Forks
435
PR merge metrics
No merged PRs in 30d

Description

Hi Guys,

I ❤️ element component with `element-theme-chalk`, It's really great works, I plan to use `Table` component for a dataset in my project, so I just wrap the example from [Rlement react website](https://eleme.github.io/element-react/#/en-US/table), but I got the issue please see below and please give me a solution.

### Description

I tested table with 1000 records It's too slow on moving the mouse and hovers style changes

### Reproduce Steps

1. Used Table with fixed column example component and data also
2. Add 1000 records to the data before render
3. Render

### Error Trace

Operations column only have render method but it triggers when each cell renders (other columns renders)

### Solution

Please make every action configurable, mean It's may disable

### Additional Information

Prepare columns
```
columns: [
{
label: 'Date',
prop: 'date',
width: 150,
fixed: 'left',
index: 1,
},
...otherColumns,
{
label: 'Operations',
fixed: 'right',
width: 120,
index: 6,
render: (data, column) => {
if (column.index !== 6) return;
return (

Detail
Edit

);
},
},
],
data: [],
```

Prepare data
```
for (let i = 0; i < 100; i++) {
state.data.push({
date: '2016-05-03',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
});
}
```

Render Component
```

```

Thank you 👍

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.