Показать сообщение отдельно
  #1 (permalink)  
Старый 13.09.2016, 18:07
Новичок на форуме
Отправить личное сообщение для d.alexandr Посмотреть профиль Найти все сообщения от d.alexandr
 
Регистрация: 06.03.2016
Сообщений: 1

React: Работа с fixed-data-table
Сделал таблицу (1000 строк, 12 колонок), вертикальный скроллинг очень подтормаживает, при этом сделал точно как в примере фейсбука, может кто то подскажет в чем может быть проблема?
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>
        )
    }

}
Ответить с цитированием