Problem

The UI for the datagrid component in CURATE requires updated styling for design system consistency.

The UX also required improvements as the CURATE search and sort functionality do not affect the datagrid which will confuse the users - this is currently located in a dropdown menu accessed via hover on a column title which is not a clear UX.

Solution

The datagrid view should disabled the image size icons as these have no function.

The datagrid should also be affected by the CURATE sort and search function (rather than being independently controlled). This creates a more consistent UX.

To represent the assignee and label cells which have more data than can fit should use a chip component (outline: 1px #949494 > border-radius: 5px > text-colour: #949494).

The column hover state should remove the dropdown menu - this loses it's functionality with shifting the sort and search functionality - but keep the native sort ASC and DESC toggle.

The grid column configuration settings should be moved into a single location - having access via column headers only is a confusing and less intuitive UX.

The dialogue is the same layout as the native feature but requires some restyling of the UI to match our design system. This contains an outlined select field (outline: 1px #C4C4C4 > border-radius: 8px) with a list of column options (ensure these are stylised correctly and do not use duplicate metadata) with switch toggles in two states: selected (outline: 1.6px #D3D3D3 > circle: #02FFAD) and deselected (outline: 1.6px #D3D3D3 > circle: #D3D3D3). This is divided by a line (outline: 1px #D9DDE9) with 2 secondary buttons (outline: 0.8px #000000).

The row hover state should be #E5E5E5 always. If a user hovers over the assignees or labels overflow (i.e. +1) a tooltip which shows the expanded data should appear.

If a user double clicks on an assignees or labels cell, it would be good UX to open up the existing dialogues.

When a single or multiple row(s) of data is selected by a user, this should be signalled to the user via the footer of the datagrid alongside the 4 icons which allow for a user to: assignee users, label, delete and create a collection.

Adobe XD: https://xd.adobe.com/view/17222d3a-5ff3-486b-91d2-ef7da148119a-4271/

Considered Alternatives

Considered just removing the search and sort functionality then in the datagrid view however this is bad UX as the user will have no information as to why these have suddenly vanished nor have an easy UX to accessing the datagrid native search and sort.