Topic: How to move exportToCSV button in MDBDataTable component?
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>
<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" /> DOWNLOAD CSV
</CSVLink>
</MDBBtn>
</div>
</MDBCardTitle>
</MDBCardHeader>
<MDBCardBody>
<MDBDataTable striped data={ this.props.data } hover sortable={ true } />
</MDBCardBody>
</MDBCard>
Hello,
Well, there is no way to position this button without hacks. We will surely update it to be more flexible (HOC may be a good solution).
Will inform in our changelog: https://mdbootstrap.com/docs/react/changelog/
Best,
Jakub
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 premium commented 6 years ago
We would always welcome the good pull request :))
ithelpdesk@npisorters.com commented 6 years ago
Don't have time, but I added a code sample below
Jakub Mandra staff premium commented 6 years ago
Thank you! This will be helpful :)
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.13.0
- Device: All
- Browser: All
- OS: All
- Provided sample code: No
- Provided link: No