[EuiDataGrid] Need to handle better "no data" scenarios and loading states

[elizabetdev]

As we can see from the screenshot (https://codesandbox.io/s/datagrid-header-forked-svk7y?file=/index.js:2560-2571) when no data is available the EuiDataGrid only show the header cells, toolbar and pagination.

This behavior can look like a bug. Users don't know why is the header cells showing, why is the pagination clickable but they can't see any data.

So, we should fix the design to better handle "no data" scenarios.

Design improvement

• We should provide a default empty state (just a text?) and probably a way to customize the text. If there's pagination and no data, the pagination should get disabled.
• Also we should provide some loading states and handle better how cells are loaded on scroll.
• We need guidelines for loading, empty states, and results.

Bug to fix

• [x] As we can see from the CodeSandbox example 4, when we pass a custom className to EuiDataGrid the Full screen button gets the class. It shouldn't. Fixed with #5050

[elizabetdev]

Example of the current EuiDataGrid loading new data:

https://user-images.githubusercontent.com/2750668/129760222-0d9699e1-a717-438d-93f8-4974600cfb74.mov

[flash1293]

Especially for tables on a dashboard, adding a central app-controlled UI element would be helpful, also wrt aligning tables with other chart types:

Please add an option to render a react element centered over the grid as part of this issue

[github-actions[bot]]

👋 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.