Griddle only showing columns in columnMeta array in setting after updating to version 0.7

Question

Just upgraded griddle and react packages to latest. Issue is griddle only showing columnMeta in setting after updating to version 0.7

I need to add all the columns in columnMeta array otherwise, they are not listed in the settings section

    let columnMeta = [
      {
        columnName: 'actions',
        order: 1,
        displayName: 'Actions',
        customComponent: this.getActions,
      },
      {
        columnName: 'imgUrls',
        customComponent: this.getImageComponent,
      },
      {
        columnName: 'name',
        customComponent: this.getNameComponent,
      },
      {
        columnName: 'block',
        customComponent: this.getMe,
      },
];

tested by adding this last column block.

package.json is

  "dependencies": {
    "draft-js": "^0.9.1",
    "draft-js-export-html": "^0.5.2",
    "draft-js-import-html": "^0.3.2",
    "externalify": "^0.1.0",
    "fbjs": "^0.8.8",
    "fibers": "^1.0.15",
    "formsy-react": "^0.19.0",
    "googleapis": "^16.1.0",
    "griddle-react": "^0.7.1",
    "imports": "^1.0.0",
    "keycode": "^2.1.8",
    "kisi-client": "^5.0.3",
    "mailgun-js": "^0.7.11",
    "material-ui": "v0.16.6",
    "meteor-node-stubs": "^0.2.4",
    "moment": "^2.17.1",
    "moment-timezone": "^0.5.11",
    "multiparty": "^4.1.2",
    "radium": "^0.18.1",
    "react": "15.4.2",
    "react-addons-pure-render-mixin": "15.4.2",
    "react-addons-shallow-compare": "15.4.2",
    "react-dom": "15.4.2",
    "react-event-listener": "^0.4.0",
    "react-router": "^3.0.1",
    "react-rte-gc": "0.11.6",
    "react-tap-event-plugin": "^2.0.1",
    "react-widgets": "^3.4.5",
    "scroll": "^2.0.0",
    "simpl-schema": "0.0.3",
    "simple-assign": "^0.1.0",
    "twilio": "^2.11.0",
    "underscore": "^1.8.3"
}

Getting no error or issue in console, what could be the reason is any idea its Meteor + ReactJS project

Answer 1

To get columns in griddle we need to use one more prop inside griddle

  <Griddle
    ref={(ref) => {this._griddle = ref}}
    useGriddleStyles={false}
    columnMetadata={columnMeta}
    results={this.getData()}
    columns={['id', 'name', 'age']} />

All the fields provided to columns prop will be displayed initally when we open page with griddle table

Hope this helps