Aim - To replace settings button in griddle with material ui button using Griddle version 0.6.1
Implementation - To replace settings button which shows list of columns to choose from.
I am providing this input to Griddle’s settingIconCompoent prop
getSettings() {
return (
<div>
<RaisedButton
label='Columns'
style={{marginTop: 28}}
primary={true}></RaisedButton>
</div>)
},
and griddle where I am plugging this settings function is
<Griddle
ref={(ref) => {this._griddle = ref}}
useGriddleStyles={false}
columnMetadata={columnMeta}
results={this.getData()}
resultsPerPage={10}
tableClassName='table'
showSettings={true}
settingsText={''}
settingsToggleClassName={'text-hide'}
settingsIconComponent={this.getSettings()}
columns={[
'actions','name', 'age', 'city',
'school', 'totalFamilyMembers',]}/>
It’s working.
Problem - I have to replace settings button in 10 pages but settingsIconCompoent in Griddle only accepts object/string as input and not react class and that is why not able to make it into a separate component
How to make it as an individual entity to use in all those pages without repeating
Griddle Page - https://griddlegriddle.github.io/v0-docs/styling.html