How to make input to Griddle settingIconComponent resusable in Meteor + React App

Question

Please provide input if it is possible or not. If possible then how ?

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

Answer 1

Did some research and Griddle version 1.0 provide a setting component out of the box, so if possible use that

But here for Griddle version 0.x. This is what I did. Created a ref to Griddle Component

<Griddle
  ref = {(ref) => {this.mygriddle = ref}}>

Now we can call function toggleColumnChooser which controls opening and closing of panel showing all the columns

this.mygriddle.toggleColumnChooser();

and based on this we can open and close and completely hide settings button

create a new component with this button and use it by calling a function which toggles columns panel

Hope this make sense who needed solution

Cheers