[EuiBasicTable] Better empty state

[snide]

By default we should provide a better empty experience for tables.

[smhutch]

Hey folks, 👋

I wanted to mention that this pattern would be very handy to support within data tables. In the project I'm working on, we have an abstraction above EuiBasicTable that replaces the entire table if empty. Something along these lines:

<Panel>
  {items.length ? (
    <ExampleEuiBasicTable {...otherEuiBasicTableProps} items={items} />
  ) : (
    <EuiEmptyPrompt
      title={someEmptyTitle}
      body={someEmptyBody}
      actions={someAction}
    />
  )}
</Panel>

It would be awesome if the EuiBasicTable could render something along these lines, controlled via props.

I see that some plans are being made within #3564 for this 🎉

[github-actions]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[snide]

I'm going to label this a good first issue and provide some design advice for implementation. We should provide a new prop that allows for an empty state, but then also use EuiEmptyPrompt as a default for that prop. As mentioned in this issue earlier, we want to not show the table at all, including the column head and footer. We want to make sure this does hide the search bar or button controls if those items are tied to the table (otherwise you couldn't change the search to see items)

[cchaos]

Hm.. I agree that we should make more use of the EuiEmptyPrompt, but we have to consider the different scenarios that result in no table rows. (Mainly for extra clarification)

1. Nothing exists, ever

Meaning, there isn't even any data to pull from, or the user never created one of these things. This is the perfect place to completely replace the table and table controls for EuiEmptyPrompt, because the consumer can give more details of what they should be doing on that page or how to create the thing.

To implement this, we'd probably want a new prop called emptyPrompt which just extends all the EuiEmptyPrompt props with some set defaults in case they don't care to configure it. But what are the defaults?

2. External search has narrowed the results to none

Meaning, "filtered" results wasn't using the built in search bar. In this instance, I think it's important to detail that the results are being filtered. Usually this is done by still showing the table's controls and columns with just a nice message in place of the rows.

To implement this, I'd assume we'd want to handle it similarly to the EuiSelectabeTemplateSitewide, where we just have props for customizing these messages. In particular this might be noFilteredResultsMessage.

The question though, is then how does the table itself know whether we're in scenario 1 or 2?

3. Results are narrowed to result in none using built-in controls

This is similar to how we'd want scenario 2 to display, but the table component should know that it is being filtered and show the right message.

[github-actions]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[miukimiu]

I'll try to come with a solution and guidelines for all tables and data grid while working on #5026.

[github-actions]

👋 Hi there - this issue hasn't had any activity in 6 months. If the EUI team has not explicitly expressed that this is something on our roadmap, it's unlikely that we'll pick this issue up. We would sincerely appreciate a PR/community contribution if this is something that matters to you! If not, and there is no further activity on this issue for another 6 months (i.e. it's stale for over a year), the issue will be auto-closed.

[github-actions]

❌ Per our previous message, this issue is auto-closing after having been open and inactive for a year. If you strongly feel this is still a high-priority issue, or are interested in contributing, please leave a comment or open a new issue linking to this one for context.