The docs for EuiBasicTable show two ways of adding actions in the "Adding actions table" section: One with config objects and one with passing a render function that includes EuiLink to create the button. The example with config objects has 5 actions which will get rendered in the popover menu. The example with EuiLink has 2 actions which will get rendered inline in the table.
Now the issue we're facing is: If there are 3 custom actions with render functions based on the EuiLink approach, as expected, they'd get rendered in the popover menu too. But then we'll get a React/DOM error because the popover menu renders nested buttons: One as part the popover menu (without a click event) and a nested one because EuiLink used with onClick gets rendered as a button. (This is similar to the problem described in #1428, I guess the difference there was without more complex logic to render the buttons they could move to use the config object approach)
Here are some more thoughts/suggestions what I can think of how we could solve this:
- The config objects could allow both
render and onClick (to do a custom inner rendering without a button and pass the click event to the config object)
- An alternative could be to allow the
name attribute of the config object to be something like name: string | ReactElement | (item: T, enabled: boolean) => ReactElement; instead of just name: string;
The docs for EuiBasicTable show two ways of adding actions in the "Adding actions table" section: One with config objects and one with passing a render function that includes
EuiLinkto create the button. The example with config objects has 5 actions which will get rendered in the popover menu. The example withEuiLinkhas 2 actions which will get rendered inline in the table.Now the issue we're facing is: If there are 3 custom actions with render functions based on the
EuiLinkapproach, as expected, they'd get rendered in the popover menu too. But then we'll get a React/DOM error because the popover menu renders nested buttons: One as part the popover menu (without a click event) and a nested one becauseEuiLinkused withonClickgets rendered as a button. (This is similar to the problem described in #1428, I guess the difference there was without more complex logic to render the buttons they could move to use the config object approach)Here are some more thoughts/suggestions what I can think of how we could solve this:
renderandonClick(to do a custom inner rendering without a button and pass the click event to the config object)nameattribute of the config object to be something likename: string | ReactElement | (item: T, enabled: boolean) => ReactElement;instead of justname: string;