EUI BasicTable selection updates not reflecting

[tiburon_security]

Hi all, I'm using an EUI BasicTable with the selection feature for performing actions against rows of data. However, when I programatically update the tables selection (for example in response to an action against a row) the table UI selection isn't updated. This is a bit difficult to explain, but here's a code snippet:

Working EUI - CodeSandbox

In this example, I've coded the table such that when you select a row and click the acknowledge button, the selection state is zero'd out, with the intention that the checkbox selection is removed in the table UI. However, while the state is updated, the table UI isn't reflected to render the change. Am I doing something wrong here?

Thanks!

[flash1293 (Joe Reuter)]

In your code the selectedItems state is just bookkeeping what's happening within the table, but it's not passed back into the table.

This means when resetting the state managed in your component:

this.setState({ selectedItems: [] }

The table won't notice at all - it's just affecting the bookkeeping state of your own component.

The state which entries are selected and which are not are completely managed by the table component and are not changeable from the outside.

This is definitely a reasonable feature and it's worth opening a feature request for it here: https://github.com/elastic/eui/issues/new

A workaround for this I can think of is to pass a key prop to the EuiBasicTable component and change that key prop when resetting the selection status.

A different key signals to react that this is another component in the tree and it will set up a fresh instance which will effectively reset the selection state.

[tiburon_security]

This did the trick, thank you! I'll submit a feature request soon.