Best approach to have actions column with buttons. When hit to open a modal outside Griddle.

[christopher-rain]

Hi,

I'm trying to have an Actions column with Edit and View buttons. I am using a customComponent.

const GriddleActionColumn = ({value}) => {
    return (
        <span>
            <a onClick={} className="btn btn-sm btn-outline blue-madison"><i className="fa fa-edit"></i> Edit </a>
            <a href={value} className="btn btn-sm btn-outline blue-madison"><i className="fa fa-search"></i> View </a>
        </span>
    );
}

I need to somehow grab the onClick event and open a Modal.

I also tried making this component connected to my Redux store.

import React from 'react';
import {connect} from 'react-redux';
import { editAccount } from '../actions';

class ListActions extends React.Component {
    render() {
        const { value } = this.props;

        return (
            <span>
                <a onClick={ () => { this.props.editAccount({value); } } className="btn btn-sm btn-outline blue-madison"><i className="fa fa-edit"></i> Edit </a>
            </span>
        );
    }
}

export default connect(null, { editAccount } )(ListActions);

but i got an error when clicking the Edit button:
Uncaught TypeError: Cannot read property 'map' of undefined dataSelectors.js:246

/** Gets the griddleIds for the visible rows */
var visibleRowIdsSelector = exports.visibleRowIdsSelector = (0, _reselect.createSelector)(dataSelector, function (currentPageData) {
  return currentPageData.map(function (c) {
    return c.get('griddleKey');
  });
});

at return currentPageData.map(function (c) {

Any idea what is the best approach to get the onClick event in the button? Again my goal is to have actions col with actions buttons. When clicking Edit I want to communicate outside Griddle and show a popup.

Thanks.

[sww314]

Also related: #680