EuiTables enable selection management from outside of component

[justinkambic]

I'm using an EuiInMemoryTable and wanted to allow a parent component to cancel all selections in the nested table. At the moment I can replace the array I'm maintaining in the parent component and updating on the table's onSelectionChange prop, but I can't tell the table to deselect items via props.

It would be useful to be able to tell a table to update the selected items:

render() {
  const { items } = this.state;
  return <EuiInMemoryTable items={items} selectedItems={[]} />;
}

We can presently allow the user to simply use the table's top selection box to deselect all items, but in some cases we may want to clear the selection automatically.

[jen-huang]

++ would be super useful

[arulselvan]

Me too facing same scenario with EuiBasicTable, adding would be great!

[andrew-goldstein]

++
I’m working with a table that must support two use cases:

1. Selected items in a table are deleted when the user clicks a “delete” button.

The documentaiton in the Adding selection to a BasicTable example at https://elastic.github.io/eui/#/display/tables makes implementing this case straightfoward (thanks!).

2. Selected items are mutated (made “favorites”), but not deleted.

In scenario 1, the following example code from Adding selection to a BasicTable resets the selection state of the component that owns the table when the user clicks delete:

  onClickDelete = () => {
    const { selectedItems } = this.state;
    store.deleteUsers(...selectedItems.map(user => user.id));

    this.setState({
      selectedItems: []
    });
  };

In use case #1, after performing IO to delete the selected items from the server, the selectedItems in the state of the component that owns the table will be in synch with what’s rendered in the table, assuming the server-side delete was successful. This is true because the deleted items won’t be rendered when the new data (from the server) is passed down to the table as props. (There is no “selection state” to render for something that does not exist. 😉 )

In use case #2, we would like to clear the selection state of all selected items after performing IO (just like scenario 1). The code might look something like this:

  onClickAddToFavorites = () => {
    const { selectedItems } = this.state;
    store.addToFavorites(...selectedItems.map(user => user.id));

    this.setState({
      selectedItems: []
    });
  };

The challenge with the code above is I’m not sure how to pass down the empty selectedItems back to the table. Unlike use case 1, the previously selected items still exist (they are not deleted.)

So in use case 2, when the updated data from the server is rendered in the table, the table (correctly) renders the new state of the items (they are shown as “favorites” with a ⭐), but the checkboxes remain checked, because the table does not know about this change to state:

    this.setState({
      selectedItems: []
    });

[alabarga]

A simpler case is to define initial selection for the table

it could be a property in the component

<EuiIBasicTable items={items} selectedItems={selectedItems} />

or as a property similar to selectable in the selection properties

  const selectOptions = {
    selectable: e => e.selectable,
    selected: e => e.selected,
    onSelectionChange,
  };

<EuiIBasicTable items={items} seelction={selectOptions} />

[ashikmeerankutty]

This issue is fixed and can be closed 👍

[chandlerprall]

Closed by #3418