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 |
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 |