Export csv error (TypeError: this.visibleRows is not a function)

[mzadrazi]

After clicking on ExportCSV button, I am getting "TypeError: this.visibleRows is not a function" error. This error occures only when the exportAll property of exportCSV options is set to false.

I am using following versions of packages:

• react-bootstrap-table-next 2.0.0
• react-bootstrap-table2-filter 1.1.0
• react-bootstrap-table2-toolkit 1.1.1

Here is my code:

import React from 'react';
import {} from 'prop-types';
import { Label } from 'react-bootstrap';
import BootstrapTable from 'react-bootstrap-table-next';
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
import paginationFactory from 'react-bootstrap-table2-paginator';
import ToolkitProvider from 'react-bootstrap-table2-toolkit';

import { RMS_FIELDS_MAPPING } from '../../utils/constants';
import { RMS_COLUMNS, noDataIndication } from '../../utils/tables';
import OpenLink from '../common/OpenLink';
import { formatScore, getColorFromScore } from '../../utils/common';

import ExportCSVButton from '../tables/ExportCSVBButton';

const linkFormatter = (cell, row) => <OpenLink href={`/maturity-scoreboard/${ cell }`} title="Open Service Dashboard" label={ cell }/>

const columns = [
    {
        dataField: 'roletype',
        headerStyle: { width: '120px' },
        filter: textFilter(),
        formatter: linkFormatter,
        sort: true,
        text: RMS_FIELDS_MAPPING['type'],
    },
    {
        csvFormatter: (cell) => formatScore(cell),
        dataField: 'score',
        formatter: (cell, row) => <Label style={{ backgroundColor: getColorFromScore(cell), color: 'white' }}>{ formatScore(cell) }</Label>,
        headerStyle: { width: '140px' },
        sort: true,
        style: { textAlign: 'center' },
        text: 'Maturity Score',
    },
    ...RMS_COLUMNS
];

const ServicesTable = (props) => {
    const { isLoading, services } = props;

    return (
        <ToolkitProvider
            keyField="roletype"
            data={ services }
            columns={ columns }
            exportCSV={ {
                exportAll: false,
                fileName: 'all-services.csv',
            } }
        >
            { props => (
                <React.Fragment>
                    <ExportCSVButton { ...props.csvProps } />
                    <BootstrapTable
                        { ...props.baseProps }
                        defaultSorted={[{
                            dataField: 'roletype',
                            order: 'asc',
                        }]}
                        filter={ filterFactory() }
                        noDataIndication={ noDataIndication(isLoading) }
                        pagination={ paginationFactory({ showTotal: true }) }
                        striped
                    />
                </React.Fragment>
            ) }
        </ToolkitProvider>
    );
}

ServicesTable.defaultProps = {
    services: [],
}

export default ServicesTable;

More information about the error:

[AllenFang]

@mzadrazi if you downgrade to react-bootstrap-table-next@1.4.4, is it work?

[mzadrazi]

@AllenFang I downgraded to react-bootstrap-table-next to 1.4.4 (and paginator to 1.0.4) but the issue is unfortunately still the same :(.

[AllenFang]

@mzadrazi ok, I will check this out, thanks!

[AllenFang]

RELEASE NOTE

Please upgrade react-bootstrap-table-next@2.0.1 and react-bootstrap-table2-toolkit@1.1.2

[mzadrazi]

Thank you very much for the bug fix and for the whole library. It works like a charm now :).