Rendering an action menu in Ant Table on Row hover

user_15474 0
Viewed 2350

I'm using Ant table to display some data. So far so good except the requirement that I need to display an action menu when a particular row hovered over. Here's the mock of what I'm trying to achieve: Ant table with Action menu

Ant table's onRow callback will allow me to get the record that's being hovered over and onRowClassName allows me to pass a class name so I can dynamically apply css on the row hovered over. But I'm stuck on rendering an element at the end of the row like you see in the screenshot.

I'm a bit stumbled on how to go about doing this. Closest thing I came across is this context menu implementation: https://codesandbox.io/s/rm23kroqyo

Appreciate any input.

antd reactjs
1 Answers

One way to do this is to add a column for the actions and add a className for it.

export const columns = [
  { title: `Name`, dataIndex: `name` },
  { title: `Age`, dataIndex: `age` },
  { title: `Address`, dataIndex: `address` },
  {
    title: "",
    dataIndex: "actions",
    render: (actions) =>
      actions &&
      actions.map((action) => (
        <a className="action" href>
          {action}
        </a>
      )),
    className: "actions"
  }
];

add the actions on the data

const dataWithActions = data.map((item) =>
  item.key === "2" ? { ...item, actions: ["Like", "Share"] } : item
);

Then set it's position absolute so it does not take up space

.actions {
  position: absolute;
}

.ant-table-row {
  position: relative;
}

And finally position it when the row is hovered

.ant-table-row:hover .actions {
  display: block;
  height: 54px;
  right: 0;
}

Here's the updated codesandbox: https://codesandbox.io/s/custom-context-menu-table-antd-forked-b6y5c

user_40237340
Related