Skip to content

Instantly share code, notes, and snippets.

@AllenFang
Created November 14, 2016 15:35
Show Gist options
  • Select an option

  • Save AllenFang/9e64138307e054940e0f3b67143da1cd to your computer and use it in GitHub Desktop.

Select an option

Save AllenFang/9e64138307e054940e0f3b67143da1cd to your computer and use it in GitHub Desktop.
class DefaultCustomExportButtonTable extends React.Component {
handleExportCSVButtonClick = (onClick) => {
// Custom your onClick event here,
// it's not necessary to implement this function if you have no any process before onClick
console.log('This is my custom function for ExportCSVButton click event');
onClick();
}
createCustomExportCSVButton = (onClick) => {
return (
<ExportCSVButton
btnText='CustomExportText'
btnContextual='btn-danger'
className='my-custom-class'
btnGlyphicon='glyphicon-edit'
onClick={ e => this.handleExportCSVButtonClick(onClick) }/>
);
// If you want have more power to custom the child of ExportCSVButton,
// you can do it like following
// return (
// <ExportCSVButton
// btnContextual='btn-warning'
// className='my-custom-class'
// onClick={ () => this.handleExportCSVButtonClick(onClick) }>
// { ... }
// </ExportCSVButton>
// );
}
render() {
const options = {
exportCSVBtn: this.createCustomExportCSVButton
};
return (
<BootstrapTable data={ products } options={ options } exportCSV>
<TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
<TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
<TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
</BootstrapTable>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment