Griddle ignoring Custom columnMeta and my custom LinkComponent.

[michaelcuneo]

Griddle version

"griddle-react": "^1.13.1",

Expected Behavior

Show Event Column as a list of links from a hidden field of data named Link.

Actual Behavior

Ignores columnMeta with Custom linkComponent.

Steps to reproduce

I have a custom Griddle setup for an event listing... where the Event field should show a Link as the data. But it fails to register the customComponent... it appears to be completely ignoring my columnMeta setup.

ProgrammePage.js

...
import Griddle, {
  plugins,
} from 'griddle-react';

import data from './Data';

/* eslint-disable react/prefer-stateless-function */
export class ProgrammePage extends React.PureComponent {
  render() {
    const NewLayout = ({ Pagination, Table }) => (
      <div>
        <Pagination />
        <Table />
      </div>
    );

    const columnMeta = [
      {
        columnName: 'Key',
        locked: false,
        visible: false,
      },
      {
        columnName: 'Day',
        customComponent: LinkComponent,
        locked: false,
        visible: true,
        DisplayName: 'Testing',
      },
      {
        columnName: 'Date',
        locked: false,
        visible: true,
      },
      {
        columnName: 'Time',
        locked: false,
        visible: true,
      },
      {
        columnName: 'Event',
        locked: false,
        visible: true,
      },
      {
        columnName: 'Venue',
        locked: false,
        visible: true,
      },
      {
        columnName: 'Link',
        locked: true,
        visible: false,
      },
    ];

    const styleConfig = {
      icons: {
        TableHeadingCell: {
          sortDescendingIcon: '▼',
          sortAscendingIcon: '▲',
        },
      },
      styles: {
        Table: {
          width: '90vw',
          background: 'rgba(0, 0, 0, 0.2)',
          borderRadius: '0px 10px 10px 10px',
        },
        Row: {
          textAlign: 'right',
        },
        Cell: {
          padding: '5px 20px 5px 20px',
        },
        PageDropdown: {
          display: 'hidden',
          background: 'darkgray',
        },
        Pagination: {
          display: 'hidden',
          textAlign: 'center',
          width: 'auto',
          color: 'white',
          background: 'rgba(0, 0, 0, 0.2)',
          borderRadius: '10px 10px 0px 0px',
          padding: '5px',
        },
      },
    };

   return [

...

        <GriddleDiv>
          <Griddle
            styleConfig={styleConfig}
            data={data}
            columnMetadata={columnMeta}
            components={{ Layout: NewLayout }}
            plugins={[plugins.LocalPlugin, plugins.PositionPlugin]}
          />
        </GriddleDiv>

...

export default ProgrammePage;

LinkComponent.js

import React from 'react';
import Link from 'react-router-dom';
import PropTypes from 'prop-types';

class LinkComponent extends React.PureComponent {
  render() {
    console.log(this.props);
    /* We don't get a console log here beause the LinkComponent is being ignored */
    return <Link href={this.props.url}>{this.props.value}</Link>;
  }
}

LinkComponent.propTypes = {
  value: PropTypes.string,
  url: PropTypes.string,
};

export default LinkComponent;

Pull request with failing test or storybook story with issue

While this step is not necessary, a failing test(s) and/or a storybook story will help us resolve the issue much more easily. Please see the README for more information.

[michaelcuneo]

It's o.k. I realise I was reading an old document.

[dahlbyk]

@michaelcuneo we seem to be getting quite a few people here with questions based on v0 config. What docs were you looking at, and how did you get there? We could probably update to point folks to the v1 docs.

[michaelcuneo]

The version of the docs wasn’t apparent to me at the time, could have been v0. I just typed my question into google then followed the instructions. I think the method of doing links in the correct documentation isn’t as apparent as the old documentation, so people miss it and keep searching for better instruction.