How to Insert an inline Semantic-react-menu into React-Table

I want to add a menu for each item that allows to edit/delete a row.

Use the ReactTable Cell property and define the column as is:

import Moment from 'moment';
import * as React from "react";
import CSSModules from "react-css-modules";
import ReactTable from "react-table";
import "react-table/react-table.css";
import { Button, Confirm, Dimmer, Icon, Loader, Menu } from "semantic-ui-react";
import { history } from "../../_helpers";
import { ModifyButtons } from "../ModifyButtons";
import { TableMenu } from "../TableMenu";
import { WrappedButton } from "../WrappedButton";
const styles = require("./ServicesTable.less");
import "../../_style/custom-semantic.css";

const options = {
  allowMultiple: true
};

@CSSModules(styles, options)
export class ServicesTable extends React.Component<any, any> {
  public state = { open: false };

  public columns = [
    {
      Header: "Name",
      accessor: "name",
      className: "column-center"
    },...,
   {      
     filterable: false,
      sortable: false,
      width: 100,
      Cell: row => (
        <TableMenu
          rowprops={row}
          onRemoveService={this.props.onRemoveService}
        />
      ),
      className: "column-center"
    }

public render() {
    const { services } = this.props;

    if (!services) {
      return null;
    }

    if (services.loading) {
      return (
        <Dimmer active>
          <Loader>Loading</Loader>
        </Dimmer>
      );
    }

    if (services.error) {
      return <div>Error! {services.error.message}</div>;
    }

    return (
      <ReactTable
        filterable
        defaultPageSize={10}
        data={this.props.services.services}
        columns={this.columns}
        className="-striped -highlight"
      />
    );
  }
}

TableMenu.tsx

import * as React from "react";
import { confirmAlert } from "react-confirm-alert";
import "react-confirm-alert/src/react-confirm-alert.css";
import CSSModules from "react-css-modules";
import { Button, Dropdown, Icon, Menu } from "semantic-ui-react";
import { history } from "../../_helpers";

const styles = undefined;
const options = {
  allowMultiple: true
};

@CSSModules(styles, options)
export class TableMenu extends React.Component<any, any> {
  public onClickEditHandler = (e, data) => {
    if (this.props.rowprops.original.team) {
      history.push({
        pathname: `customer/${
          this.props.rowprops.original.team.customer.id
        }/team/${this.props.rowprops.original.team.id}/service/account-rep
          /${this.props.rowprops.original.location}/${
          this.props.rowprops.original.id
        }`
      });
    }
    // Edit team
    else if (this.props.rowprops.original.customer) {
      history.push({
        pathname: `customer/${this.props.rowprops.original.customer.id}/team/${
          this.props.rowprops.row.id
        }`
      });
    }
    // Edit customer
    else if (this.props.rowprops.original.id) {
      history.push({
        pathname: `customer/${this.props.rowprops.original.id}`
      });
    }
  };

  public onClickDeleteHandler = (e, data) => {
    confirmAlert({
      title: "Confirm delete",
      message: "Are you sure?",
      buttons: [
        {
          label: "No",
          onClick: () => {
            return;
          }
        },
        {
          label: "Yes",
          onClick: () => {
            if (this.props.onRemoveCustomer) {
              this.props.onRemoveCustomer(this.props.rowprops.original.id);
            }
            if (this.props.onRemoveTeam) {
              this.props.onRemoveTeam(
                this.props.rowprops.original.customer.id,
                this.props.rowprops.row.id
              );
            }
            if (this.props.onRemoveService) {
              this.props.onRemoveService(
                this.props.rowprops.original.team.customer.id,
                this.props.rowprops.original.team.id,
                this.props.rowprops.original.location,
                this.props.rowprops.original.id
              );
            }
          }
        }
      ]
    });
  };

  public render() {
    const {
      rowprops,
      onRemoveService,
      onRemoveTeam,
      onRemoveCustomer
    } = this.props;

    return (
      <Dropdown icon="sidebar" floating>
        <Dropdown.Menu>
          <Dropdown.Item
            text="Edit"
            icon="edit"
            onClick={this.onClickEditHandler}
          />
          <Dropdown.Item
            text="Delete"
            icon="trash"
            onClick={this.onClickDeleteHandler}
          />
        </Dropdown.Menu>
      </Dropdown>
    );
  }
}

custom-semantic.css

.column-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/*Update for grid menu*/
.rt-tr .rt-td:last-child {
  overflow: visible !important;
}
.rt-tr .rt-td .ui.floating.dropdown .menu {
  left: -50px;
  top: -13px;
}