Provide function to AppsTableActions cell

[mbury]

Hi, I want to ask how you resolve case when we must provide function to action cell?

class AppsTableActions extends Component {
  render() {
    const { row, onRmove } = this.props;
    return (
      <button onClick={() => onRmove(row.id)}>
        Remove
      </button>
    );
  }
}

For now I have two idea. First is use redux connect() to provide action creator to AppsTableActions. Second is generate columns by function and bind actions in component constructor:

const pepareCol = ({ onRemove }) => [
  {
    key: 'id',
    header: 'id',
  },
  {
    key: 'action',
    header: 'edit',
    Component: (props) => <ActionsCell {...props} onRemove={onRemove} />,
  },
];

  constructor(props) {
    super(props);
    this.columns = pepareCol({
      onRemove: props.removeEntity,
    });
  }

But maybe exists better solution?

[amir-hadzic]

Hello,

I think the two examples you have are fine, especially connect()-ing the actions component. You can also use componentProps like this:

const pepareCol = ({ onRemove }) => [
  {
    key: 'id',
    header: 'id',
  },
  {
    key: 'action',
    header: 'edit',
    Component: ActionsCell,
    componentProps: { onRemove },
  },
];

  constructor(props) {
    super(props);
    this.columns = pepareCol({
      onRemove: props.removeEntity,
    });
  }

componentProps can be either an object, or a function that receives the row param, and returns an object of props that will be applied on the column component.

I think you may be trying to create a single sematable component where you can provide different callbacks for removing items. Hmm. In that case, I think we could change componentProps so it receives all table props. Then you wouldn't have to generate columns in constructor:

const columns = [
  {
    key: 'id',
    header: 'id',
  },
  {
    key: 'action',
    header: 'edit',
    Component: ActionsCell,
    componentProps: (row, tableProps) => ({
      onRemove: tableProps.onRemove,
    }),
  },
];

This requires some changes in Table, and TableRow.

[amir-hadzic]

If you would like to make a PR for the componentProps changes, let me know if you have some questions.

[mbury]

Thanks for response, Looks interesting. I will try implant it.