[UX Proposal] Replace Table components with DataGrid components

[kamingleung]

The Indexes page in Index Management provides users a view of their indexes with important information such as Health, statuses, and metrics.

Problem

However, users are having trouble reading and adjusting information in table of indexes.

• The width of the table columns are fixed and content gets truncated automatically (E.g.: Long index names get truncated Index Management UI: Name Width and Row Count #848)
• Users are unable to resize the columns
• Users are unable to hide/show columns

Proposal

We are proposing to replace the Table component with the Data Grid component for the following pages:

• Indexes
• Policy managed indexes

By utilizing the Data Grid component, users can:

• Resize columns
• Adjust information density
• Hide/show columns

Example:

Help wanted

In this issue, I propose we explore and produce mockups on how the pages would look like with the updated Data Grid component, so that there is clear guidance for implementation. Mockups should include:

• Indexes page
• Policy managed indexes page

[kamingleung]

@likeanushkaa Will you be interested in exploring the UX on this?

[likeanushkaa]

Yes @kamingleung . I would like to take this up. Do you have a deadline in mind?

[kamingleung]

Hi @likeanushkaa, thank you for following this.
I think we can start exploring this now since folks have started working on a PR. We can use the aligned deliverables to provide guidance to the PR. Do you want to take a first iteration and we can start discussing here? How much effort do you think it will take?

[likeanushkaa]

Hello, is this issue still open?