facebookarchive / fixed-data-table

A React table component designed to allow presenting thousands of rows of data.
http://facebook.github.io/fixed-data-table/
Other
4.3k stars 553 forks source link

Slow scrolling (horizontal and vertical) #451

Closed rayozerets closed 7 years ago

rayozerets commented 8 years ago

Why so slow working scrolling (horizontal and vertical)? I have 12 columns and 1000 rows. Maybe I'm doing something wrong? My component:

import React, { Component } from 'react';

import Paper from 'material-ui/Paper';

import {Table, Column, Cell} from 'fixed-data-table';

import './styles/fixed-data-table.css';

import './styles/fixedTable.less';

const TextCell = ({rowIndex, data, columnKey, ...props}) => (
    <Cell className='cellBody' {...props}>
        {data[rowIndex][columnKey]}
    </Cell>
);

export default class FixedTable extends Component {

    constructor(props) {
        super(props);
        this.state = {
            dataList: this.props.dataList,
            columnWidths: this.props.columnWidths
        };
    }

    renderColumns() {
        return this.props.col.map((col) => {
            return (
                <Column
                    key={col.name}
                    columnKey={col.name}
                    header={<Cell className='cellHeader'>{col.nameRu}</Cell>}
                    cell={<TextCell data={this.state.dataList} />}
                    width={this.state.columnWidths[col.name]}/>
            )
        })

    }

    render() {
        var {dataList, columnWidths} = this.state;
        return (
            <Paper zDepth={2}>
                <Table
                    rowHeight={50}
                    headerHeight={50}
                    rowsCount={dataList.length}
                    isColumnResizing={false}
                    width={1500}
                    height={800}>
                    {this.renderColumns()}
                </Table>
            </Paper>
        )
    }

}
KamranAsif commented 7 years ago

You should try and implement shouldComponentUpdate in your functions. FDT doesn't make the assumption of whether your component is pure or not, so it attempts to re-render the cell every scroll.

Heres an example: https://github.com/schrodinger/fixed-data-table-2/blob/master/examples/ReorderExample.js#L15

Also, check our our fork: https://github.com/schrodinger/fixed-data-table-2 We have bug fixes, new features, more documentation, testing, etc.

rayozerets commented 7 years ago

thank.