AllenFang / react-bootstrap-table

A Bootstrap table built with React.js
https://allenfang.github.io/react-bootstrap-table/
MIT License
2.24k stars 782 forks source link

issue with export to csv custom button in react bootstrap table #1998

Closed upaksh closed 6 years ago

upaksh commented 6 years ago

I have a custom export to csv button in my code which calls the handleExportCSV() function on the bootstrap table. But theere is an error - 'Uncaught TypeError: Cannot read property 'export' of undefined'

Here is the code snippet:

...
function renderTable(record_set, columns, per_page_list, size_per_page, column_format) {
    var ReactBsTable = window.BootstrapTable;
    var Table = function (_React$Component) {
        _inherits(Table, _React$Component);

        function Table() {
            _classCallCheck(this, Table);

            var _this = _possibleConstructorReturn(this, (Table.__proto__ || Object.getPrototypeOf(Table)).call(this));

            _this.state = {};
            return _this;
        }

        _createClass(Table, [{
            key: 'handlerClickExportCsv',
            value: function handlerClickExportCsv() {console.log(this.refs.bootstrapTable);
                this.refs.bootstrapTable.handleExportCSV();
            }
        },
            {
            key: 'render',
            value: function render() {
                var options = {
                    ...
                };

                var columnsList = columns.map(function (column, index) {
                        var colRef = 'columnref' + (index + 1);
                        this.state[colRef] = false;

                        return React.createElement(
                                TableHeaderColumn,
                                {   
                                    ref: colRef,
                                    dataField: column,
                                    hidden: this.state[colRef],
                                },
                                column
                        );
                }, this);

                return React.createElement(
                    'div',
                    { id: 'bootstrapTableContainer' },
                    React.createElement(
                        'button',
                        { type: 'button', onClick: this.handlerClickExportCsv.bind(this), className: 'btn btn-success react-bs-table-csv-btn'},
                        'Export to CSV'
                    ),
                    React.createElement(
                        BootstrapTable,
                        { ref: 'bootstrapTable', data: record_set, ... },
                        columnsList
                    )
                );
            }
        }]);

        return Table;
    }(React.Component);

    ReactDOM.render(React.createElement(Table, null), document.getElementById("..."));
}

The function gets called and but somehow the the error is coming from reactdom js.

upaksh commented 6 years ago

This one is solved. I was rendering the id column outside the columns.map function. Took it inside in the columnsListand the issue is solved.