antd table export to csv by react-csv MAKE table slow

Question

I am using antd table and I would like to export data to csv so I used the react-csv and It worked. But after adding the react-csv, my antd table is too slow to select the row, scroll. If I remove the react-csv, table is fast enough.

Here is how I used:

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>
        )
    }
}

And I got a warning :

Warning: componentWillReceiveProps has been renamed, and is not recommended for use.............

Please update the following components: CSVLink

Is there any wrong in my render? why react-csv make table slow?

Please check if this helps https://stackoverflow.com/questions/48760815/export-to-csv-button-in-react-table — Rishi Raj, Nov 04 '19 at 04:29

score 1 · Answer 1 · answered Nov 04 '19 at 11:48

Actually, this is an issue which has not yet been fixed. I would recommend using another library or something if you want to render a large list.

I have set up a code sandbox. In my case, antd table becomes slow if I select 1000 / page otherwise it's fine. It depends on the machine.

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>
      </>
    );
  }
}

zemil · Answer 2 · 2019-11-04T05:16:53.927

0

Try to make a single component with 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} />

You have the problem because whole Monthly_Viewer component rerenders but in the case above it will be only DowndloadTable

edited Nov 04 '19 at 05:16

answered Nov 04 '19 at 05:09

zemil

3,235
2
24
33

I tried but it's still slow, I noticed its because of data because currently, records are over 20k. So I just only assign the data if the user clicks the export button. So now first times it fast but now the problem is I can't detect whether the file is downloaded or not. If file is already downloaded, I just need to clear the data again. – Loran Nov 04 '19 at 06:34

antd table export to csv by react-csv MAKE table slow

2 Answers2