How to move exportToCSV button in MDBDataTable component?

Topic: How to move exportToCSV button in MDBDataTable component?

ithelpdesk@npisorters.com free asked 5 years ago

Expected behavior Add some prop to position the button at the top or bottom of the table Actual behavior Always is put at the bottom of the table which people could miss at the bottom of pages. Resources (screenshots, code snippets etc.)

We would like to position the button at the top of the table without using a CSS hack.

<MDBCard>
                <MDBCardHeader>
                    <MDBCardTitle>
                        Data
                    </MDBCardTitle>
                </MDBCardHeader>
                <MDBCardBody>
                    <MDBDataTable striped data={ this.props.data } hover sortable={ true } exportToCSV />
                </MDBCardBody>
            </MDBCard>

Add comment

ithelpdesk@npisorters.com free answered 5 years ago

1 0 Best answer

<pre class="prettyprint"><code><MDBCard>
                <MDBCardHeader>
                    <MDBCardTitle>
                        <div>Graph Data ( Total Pieces: { this.props.count } )</div>
                        <div className="flex-row d-flex justify-content-end">
                            <MDBBtn size="sm" color="primary" style={ { border: 'none' } }
                                    onClick={ this.handleButtonClick } role="button" tag="a">
                                <CSVLink className="btn btn-primary btn-sm" id="csvLink" style={ {
                                    border: 'none',
                                    color: 'inherit',
                                    padding: '0px',
                                    font: 'inherit',
                                    outline: 'inherit',
                                    zIndex: 'inherit',
                                    boxShadow: 'none'
                                } } onClick={ ( e ) => {
                                    e.stopPropagation();
                                } }
                                         filename={ 'BinSummaryReport_' + process.env.REACT_APP_SORTER_NAME.replace( " ", "" ) + "_" + moment().format( 'YYYY_MM_DD_HH_mm_ss' ) + '.csv' }
                                         headers={ this.props.data.zipColumns } data={ this.props.data.rows }>
                                    <FontAwesomeIcon icon="download" />&nbsp;DOWNLOAD CSV
                                </CSVLink>
                            </MDBBtn>
                        </div>
                    </MDBCardTitle>
                </MDBCardHeader>
                <MDBCardBody>
                    <MDBDataTable striped data={ this.props.data } hover sortable={ true } />
                </MDBCardBody>
            </MDBCard>
</code></pre>

Please insert min. 20 characters.

<MDBCard>
                <MDBCardHeader>
                    <MDBCardTitle>
                        <div>Graph Data ( Total Pieces: { this.props.count } )</div>
                        <div className="flex-row d-flex justify-content-end">
                            <MDBBtn size="sm" color="primary" style={ { border: 'none' } }
                                    onClick={ this.handleButtonClick } role="button" tag="a">
                                <CSVLink className="btn btn-primary btn-sm" id="csvLink" style={ {
                                    border: 'none',
                                    color: 'inherit',
                                    padding: '0px',
                                    font: 'inherit',
                                    outline: 'inherit',
                                    zIndex: 'inherit',
                                    boxShadow: 'none'
                                } } onClick={ ( e ) => {
                                    e.stopPropagation();
                                } }
                                         filename={ 'BinSummaryReport_' + process.env.REACT_APP_SORTER_NAME.replace( " ", "" ) + "_" + moment().format( 'YYYY_MM_DD_HH_mm_ss' ) + '.csv' }
                                         headers={ this.props.data.zipColumns } data={ this.props.data.rows }>
                                    <FontAwesomeIcon icon="download" />&nbsp;DOWNLOAD CSV
                                </CSVLink>
                            </MDBBtn>
                        </div>
                    </MDBCardTitle>
                </MDBCardHeader>
                <MDBCardBody>
                    <MDBDataTable striped data={ this.props.data } hover sortable={ true } />
                </MDBCardBody>
            </MDBCard>

Add comment

ithelpdesk@npisorters.com free answered 5 years ago

0 0 Best answer

I just reinvented the wheel with a button that served my purpose using react-csv (since it supports microsoft browsers) so no worries. Thanks for the quick response!

Jakub Mandra staff commented 5 years ago

We would always welcome the good pull request :))

ithelpdesk@npisorters.com free commented 5 years ago

Don't have time, but I added a code sample below

Jakub Mandra staff commented 5 years ago

Thank you! This will be helpful :)

Add comment

Jakub Mandra staff answered 5 years ago