EuiInMemoryTable - re-rendering all table rows on row mouseover

[nreese]

EuiInMemoryTable - re-rendering all table rows on row mouseover. This causes enough of a performance problem to cause the dev tools to freeze up after a while

Table set-up

renderTag = (item) => {
      console.log("render column");
      return (
        <div>{item.attributes.title}</div>
      );

  }

  renderTable = () => {
    return (
      <EuiInMemoryTable
        loading={this.state.isFetchingItems}
        items={this.state.tags}
        columns={[
          {
            name: 'Title',
            render: this.renderTag
          }
        ]}
        pagination={true}
        sorting={true}
      />
    );
  }

cc @uboness

[uboness]

this should be fixed in sass I think... right now it keeps the hover row in the state (while it really shouldn't) @snide mind looking into it?

[uboness]

After looking closer at it, I don't think css/sass is enough. The main problem with this is that we currently need to keep track of the hovered row in the state as we change the rendering of the item actions based on that. There are two options I to resolve this I think:

1. revisit the design decision of only showing the items on hover (this decision should be made regardless of implementation challenges... if we (dave?) believe that the current behaviour is the preferred one... we should stick to it.

2. Change the implementation to hold a ref to the actions, and instead of re-rendering the whole table every time, just how & hide the actions directly using the ref.

[snide]

I haven't looked too deep into this, but we definitely want to keep actions hidden until hover/focus so you don't overwhelm people. It's perfectly fine to handle this in CSS with something like the below. You'll want to use visibility/opacity instead of display so that it'll be accessible.

tr:hover .myTableActions {
  opacity: 0;
  visibility: hidden;
}

tr:hover .myTableActions,
.myTableActions:focus
{
  opacity: 1;
  visibility: visible;
}

[uboness]

:) I guess it can be handled in css... Awesome! (BTW, we're using opacity now for the exact same reasons)

[snide]

Updated my snippet. Focus would need to be on the button, not the row. But yeah, this can be CSS.