[Draft] Table Improvements

[mdefazio]

Table Improvements

The following are proposed changes to our EuiBasicTable (and EuiInMemoryTable). We have started to document patterns for some of these areas and so would like to discuss if it makes sense to build these into EUI and/or update our examples on our doc site.

Loading states:

• Are we able to provide a better loading state out-of-the-box with this component?

Empty states:

We recently updated our empty prompts for when there is no data behind a table (user needs to create something). But our empty states for the following scenarios could be improved.

• No results due to search query or filters

Selection:

• Display page count related to total item count
• Allow to select all items on all pages
• Allow clearing of selected items across pages
• Provide recommendation for bulk action button

Sorting requirements:

• Sort by multiple columns/fields
• Provide the option to sort by multiple fields and reorder the sorting order. (Example in Data Grid)
• Sorting should provide a customizable schema per field (Example in Data Grid)
• Determine any UI / UX improvements to our current sorting capability

Grouping requirements:

• Allow the table to be grouped by a single field.
• Must be an enum field type: field with specific set of values
• Field types such as text, number and date fields can only be sorted, and do not allow for grouping
• Tags should be excluded initially from this first iteration: We will focus on fields where only a single value can be applied. For example, you can assign multiple tags per object. But a case can only have a specific status (Open, In progress, Closed).

---

Related discussions

• Search and filtering

Things to note

• DataGrid provides a multi-level sorting capability: Potentially use a direct lift of that UI
• Security's Alerts table data grid provides grouping: These suggestions are heavily influenced by this design with some modifications to feel more inline with EUI.

[mdefazio]

Sorting

• Allow sorting by multiple fields
• Allow sorting based on custom schema (i.e., Severity: Critical -> High -> Medium -> Low)
• Allow re-ordering and ability to easily clear sorting
• Improve visibility of sorted column(s).

Screenshot--2023-08-29--Table.Designs.-.UI.Updates.mp4

[mdefazio]

Selection

We should provide a consistent pattern for selecting rows on a table. Currently these are handled differently across our implementations. The following is an attempt to find a single pattern that could work for all most use cases.

• Show page and total count above table in a consistent way
• Show bulk action buttons in a consistent way that does not involve the search bar
• Allow for bulk selecting across all pages easily
• Provide guidance on when and where to show these actions so it doesn't unnecessarily clutter the UI.

Screenshot--2023-08-28--React.App.mp4