экспорт таблицы antd в csv с помощью response-csv сделать таблицу медленной

Question

Я использую antd table, и я хотел бы экспортировать данные в csv, поэтому я использовал react-csv, и это сработало. Но после добавления react-csv моя таблица antd слишком медленная, чтобы выбрать строку, прокрутите. Если я уберу react-csv, таблица будет достаточно быстрой.

Вот как я использовал:

import React from 'react';
import {Modal,Button} from 'react-bootstrap';
import {Table} from 'antd';
import * as ts_api from '../../api/ts/ts_api';
import 'antd/dist/antd.css';
import moment from 'moment';
import { CSVLink } from "react-csv";
const { Column, ColumnGroup } = Table;

export default class Monthly_Viewer extends React.Component{
    constructor(props){
        super(props);
        this.state={
            showmodel : true,
            timesheetlist : [],       
        }
        this.handleModelShow = this.handleModelShow.bind(this);
    }

    componentDidMount(){

        ts_api.getallby_datefromto_empfromto_cscfromto(fromdate,todate,fromemp,toemp,fromcsc,tocsc).then((res)=>{  

          console.log("here");
            this.setState({              
                timesheetlist : res,
                exporttimesheetlist : res
               });   
          })
    }

    handleModelShow = event => {      
       if(event && event.target.id === "close"){
        this.setState({
            showmodel : !this.state.showmodel
        })
       }        
    }    

    render(){    
        return(
            <div>
                <Modal show={this.state.showmodel}
                       onHide={this.handleModelShow}
                       dialogClassName="mtd-viewdialog"
                       >
                    <Modal.Header closeButton>

                    </Modal.Header>
                    <Modal.Body >

                    <Table  dataSource={this.state.timesheetlist} 
                            rowKey="id" 
                            size="small" 
                            bordered
                            scroll={{ x: 'max-content' , y:450}}
                            pagination = {{pageSizeOptions : ['10','30','60','100'], showSizeChanger:true}}
                            >
                      <Column title="Employee ID" dataIndex="empid" key="empid" width={120} defaultSortOrder="descend" sorter={(a,b)=> a.empid - b.empid} fixed="left"/>
                      <Column title="Employee Name" dataIndex="empname" key="empname" width={250} defaultSortOrder="descend" sorter={(a,b)=> a.empname?a.empname.localeCompare(b.empname):1} fixed="left"/>
                      <Column title="Date" dataIndex="tdate" key="tdate" width={100}
                      render={date=>(
                        moment(date).format("DD/MM/YYYY")
                      )}
                      sorter={(a,b)=>a.tdate.localeCompare(b.tdate)}
                      fixed="left"
                      />

                    </Table>

                    </Modal.Body>
                    <Modal.Footer>
                    <Button variant="secondary" onClick={this.handleModelShow} id="close" >
                        Close
                      </Button>
                      <CSVLink filename={"Time Detail Report.csv"} data={this.state.timesheetlist} className="btn btn-primary">Download me</CSVLink>

                    </Modal.Footer>
                </Modal>
            </div>
        )
    }
}

И я получил предупреждение:

Предупреждение: componentWillReceiveProps был переименован и не рекомендуется для использования. ............

Пожалуйста, обновите следующие компоненты: CSVLink

Есть ли какие-либо ошибки в моем рендере? почему react-csv делает стол медленным?

Answer 1

На самом деле, это проблема , которая еще не исправлена. Я бы порекомендовал использовать другую библиотеку или что-то еще, если вы хотите сделать большой список.

Я установил кодовую песочницу . В моем случае antd table становится медленным, если я выбираю 1000 / page, иначе все в порядке. Это зависит от машины.

class App extends Component {
  state = {
    showmodel: true,
    columns: [],
    timesheetlist: []
  };

  componentDidMount = () => {
    let data = [];

    for (var i = 0; i < 10000; i++) {
      data.push({
        empid: `${i}`,
        empname: `empname ${i}`,
        tdate: `05/09/${i > 2019 ? "2019" : i}`
      });
    }

    const columns = [
      {
        title: "Employee ID",
        dataIndex: "empid",
        key: "empid",
        width: 120,
        defaultSortOrder: "descend",
        sorter: (a, b) => a.empid - b.empid,
        fixed: "left"
      },
      {
        title: "Employee Name",
        dataIndex: "empname",
        key: "empname",
        width: 250,
        defaultSortOrder: "descend",
        sorter: (a, b) => (a.empname ? a.empname.localeCompare(b.empname) : 1),
        fixed: "left"
      },
      {
        title: "Date",
        dataIndex: "tdate",
        key: "tdate",
        width: 100,
        render: date => moment(date).format("DD/MM/YYYY"),
        sorter: (a, b) => a.tdate.localeCompare(b.tdate),
        fixed: "left"
      }
    ];

    this.setState({
      timesheetlist: data,
      columns
    });
  };

  handleModelShow = () => {
    this.setState({ showmodel: !this.state.showmodel });
  };

  render() {
    return (
      <>
        <Modal
          show={this.state.showmodel}
          onHide={this.handleModelShow}
          dialogClassName="mtd-viewdialog"
        >
          <Modal.Header closeButton />
          <Modal.Body>
            <Table
              columns={this.state.columns}
              dataSource={this.state.timesheetlist}
              rowKey="id"
              size="small"
              bordered
              scroll={{ x: "max-content", y: 450 }}
              pagination={{
                pageSizeOptions: ["10", "30", "60", "100", "1000"],
                showSizeChanger: true
              }}
            />
          </Modal.Body>
          <Modal.Footer>
            <Button
              variant="secondary"
              onClick={this.handleModelShow}
              id="close"
            >
              Close
            </Button>

            <CSVLink
              filename={"Time Detail Report.csv"}
              data={this.state.timesheetlist}
              className="btn btn-primary"
            >
              Download me
            </CSVLink>
          </Modal.Footer>
        </Modal>
        <Button variant="danger m-5" onClick={this.handleModelShow}>
          Open Modal
        </Button>
      </>
    );
  }
}

Answer 2

Попробуйте создать один компонент с CSVLink:

const DowndloadTable = ({ data }) => (
    <CSVLink
        className="btn btn-primary"
        filename={"Time Detail Report.csv"}
        data={data}
    >
        Download me
    </CSVLink>
);

// and then in your Monthly_Viewer component:
render() {
    return (
        ...another stuff
        <DowndloadTable data={this.state.timesheetlist} />

У вас проблема, потому что весь компонент Monthly_Viewer перерисовывается, но в приведенном выше случае это будет только DowndloadTable