Griddle

Griddle supports getting data from Row into Cell.

First we need two helpers: row data selector and connect-wrapper:

import { connect } from 'react-redux';

const rowDataSelector = (state, { griddleKey }) => {
  return state
    .get('data')
    .find(rowMap => rowMap.get('griddleKey') === griddleKey)
    .toJSON();
};

const enhancedWithRowData = connect((state, props) => {
  return {
    // rowData will be available into MyCustomComponent
    rowData: rowDataSelector(state, props)
  };
});

MyCustomComponent:

function MyCustomComponent({ value, griddleKey, rowData }) {
  return (
    <div className="MyCustomComponent">
      Person <strong>{value}</strong> from city: <em>{rowData.city}</em>
    </div>
  );
}

With enhancedWithRowData helper customComponent will have access to Row data:

const data = [
  {
    "name": "Mayer Leonard",
    "city": "Kapowsin"
  },
  {
    "name": "Koch Becker",
    "city": "Johnsonburg"
  }
];

<Griddle
  data={data}
  plugins={[plugins.LocalPlugin]}
  components={{
    Layout: ({ Table }) => <Table />
  }}
  pageProperties={{
    pageSize: 2
  }}
  >
  <RowDefinition>
    <ColumnDefinition
      id="name"
      title="Persons"
      customComponent={enhancedWithRowData(MyCustomComponent)}
    />
  </RowDefinition>
</Griddle>

Example:

Persons
Person Mayer Leonard from city: Kapowsin
Person Koch Becker from city: Johnsonburg
Topics:

Griddle supports getting data from Row into Cell.

First we need two helpers: row data selector and connect-wrapper:

import { connect } from 'react-redux';

const rowDataSelector = (state, { griddleKey }) => {
  return state
    .get('data')
    .find(rowMap => rowMap.get('griddleKey') === griddleKey)
    .toJSON();
};

const enhancedWithRowData = connect((state, props) => {
  return {
    // rowData will be available into MyCustomComponent
    rowData: rowDataSelector(state, props)
  };
});

MyCustomComponent:

function MyCustomComponent({ value, griddleKey, rowData }) {
  return (
    <div className="MyCustomComponent">
      Person <strong>{value}</strong> from city: <em>{rowData.city}</em>
    </div>
  );
}

With enhancedWithRowData helper customComponent will have access to Row data:

const data = [
  {
    "name": "Mayer Leonard",
    "city": "Kapowsin"
  },
  {
    "name": "Koch Becker",
    "city": "Johnsonburg"
  }
];

<Griddle
  data={data}
  plugins={[plugins.LocalPlugin]}
  components={{
    Layout: ({ Table }) => <Table />
  }}
  pageProperties={{
    pageSize: 2
  }}
  >
  <RowDefinition>
    <ColumnDefinition
      id="name"
      title="Persons"
      customComponent={enhancedWithRowData(MyCustomComponent)}
    />
  </RowDefinition>
</Griddle>

Example:

Persons
Person Mayer Leonard from city: Kapowsin
Person Koch Becker from city: Johnsonburg