Empty state pattern for data grid, card vs empty grid

[robyn-bautista]

Hi! I'd like to get more clarity on the empty state pattern for data grids. I saw the conversation here: #2278, but it wasn't clear to me on what is the recommended pattern. I've seen two patterns in the console:

1. An empty state card replaces the table
2. An empty state inside of the table itself

What is the official guidance on this?

Here is an example of how it would be used in our feature: https://www.figma.com/design/JwEuk3tWjR6JcjmKVlHKof/Real-time-assist-configuration?node-id=663-830403&t=ipEsgcpChVRVj7nw-1

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

For addressing the scenario of an empty state in data grids or tables, especially after filtering where there are no results to show, the recommended approach is to use the Empty State pattern. This can be particularly useful when filters return no results or when there are no data to display in the table initially. Here are some guidelines and examples based on the Paste documentation:

1. Use the Empty State Pattern: When filters return no results, it's recommended to use the Empty State pattern. This approach helps in clearly communicating to the users that no results are found based on the applied filters and suggests actions they might take next.

2. Illustration + Text Option: Among the proposed solutions for visualizing empty states in tables, using an illustration along with a text message is a good practice. This method not only makes the message clear but also engages users with a friendly illustration, making the interface feel more approachable and less frustrating when no data is available.

3. Incorporate Call-to-Actions (CTAs): If applicable, include one or more buttons as CTAs. This could be particularly useful for guiding users on what to do next, such as clearing filters, adding new data, or learning more about why no data is available.

4. Consider the Context: The design and messaging of the empty state should be contextually relevant. For instance, if the table is empty because the user has not added any data yet, the message and CTA should guide them on how to add their first item. If it's due to filtering, the message should suggest adjusting filters.

Here is an example of how you might implement an empty state inside a table:

<EmptyState
  icon={<NoDataIllustration decorative={false} title="No results found" />}
  heading="No results found"
  body="Try adjusting your filters, or clear all filters to view all items."
  primaryAction={<Button variant="primary" onClick={handleClearFilters}>Clear filters</Button>}
/>

For more detailed guidance and examples, you can refer to the Empty State pattern documentation here: Empty State Pattern.

Remember, the key is to provide a clear message about why no data is shown and what users can do next. This enhances the user experience by reducing confusion and helping users achieve their goals with your application.

For specific design implementations and to see various examples of empty states, you might also want to check out the Figma file mentioned in the documentation for potential designs: Figma File for Paste Feedback.

If you're considering contributing to the pattern or looking for more specific guidance, the documentation also provides resources for pattern contribution: Pattern Contribution Guide.

I also did a search, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Empty state in tables - Answer (updated: 06/14/2022, similarity score: 90%)
• Feedback on empty states - Answer (updated: 04/04/2023, similarity score: 89%)
• Empty state alternatives? - Answer (updated: 02/27/2024, similarity score: 89%)

[roxanagomez]

Hey @robyn-bautista the version with the card is the latest pattern. Empty state: No data.

Let me know if you need anything else

[robyn-bautista]

thank you!