Skip to content
This repository has been archived by the owner. It is now read-only.

Reordering Datagrid columns (design spec) #1771

Closed
gracesnoh opened this issue Dec 13, 2017 · 10 comments
Closed

Reordering Datagrid columns (design spec) #1771

gracesnoh opened this issue Dec 13, 2017 · 10 comments
Labels
component: datagrid resolution: enhancement request type: enhancement

Comments

@gracesnoh
Copy link

@gracesnoh gracesnoh commented Dec 13, 2017

Description

Datagrid columns can be reordered by dragging the column header in the datagrid.
basic

Usage

To manipulate the order of columns and enable users to visually compare relevant information side-by-side

Behavior

When a column header is dragged, a new object the same width of the column header and containing the column name will be dragged with the cursor. The original column header and contents will be greyed out, indicating its previous position.
behavior_1
The column can be dragged from anywhere inside of the column header. If the column is sortable, the column name is clickable. If filtering is enabled, the filter icon is also clickable.
description_2
When the midpoint of the dragged column enters the range of a column’s width, a drop target will be triggered. The drop target is a 2px wide purple line that appears at the left-most edge of a column.
description_3
description_4

To drag a column to the far right, the midpoint must surpass the edge of the last column and still be within the datagrid. If the column header being dragged is completely outside of the datagrid, the drop target will not appear.

description_5

description_6

Horizontal Scrolling

When there is horizontal scrolling applied to a datagrid, dragging the column over the edge of the datagrid will automatically scroll the datagrid to reveal columns. The farther away from the datagrid the object is dragged, the faster it will scroll.

scrolling

Invalid drop

When the entire column header is dragged out of the datagrid range, the cursor will become disabled. If the column is dropped out of range, the dragged column will return to the column’s original position and fade to opacity: 0.

The original column header will change back to opacity: 1 when the dragged column header returns to the original position.

invalid

Other datagrid examples

Single selection

single_selection

Single row selection and action

single_action

Sorting and filtering

sorting_filtering

Keyboard accessibility

Users can drag and drop columns using keyboard controls. Tabbing to the column header object and pressing space bar will activate drag and drop mode.

Then users can use the arrow keys to move the drop target left and right. Pressing space bar again will confirm the action and drop the column in its new place.

keyboard

Related Issues: #145 and #620

@bangelakos
Copy link

@bangelakos bangelakos commented Dec 13, 2017

Will there be an ability to save the state of the grid once it has been re-ordered?

@Shijir
Copy link
Contributor

@Shijir Shijir commented Dec 13, 2017

@bangelakos I think we will expose public Input/Output for controlling the column orders. So users can figure out the position order of each column as well as change them.

@mathisscott mathisscott added this to the 1.1 milestone Dec 14, 2018
@mathisscott mathisscott removed this from the 1.1 milestone Dec 14, 2018
@mathisscott mathisscott added this to the 2.0 milestone Dec 14, 2018
@mathisscott mathisscott removed this from the 2.0 milestone Feb 27, 2019
@mathisscott mathisscott added this to the 2.0 Stretch milestone Feb 27, 2019
@mathisscott mathisscott removed this from the Post 2.0 milestone Jun 18, 2019
@mathisscott mathisscott added this to the 2.1 milestone Jun 18, 2019
@Jinnie Jinnie removed this from the 2.2.0 milestone Sep 5, 2019
@Jinnie Jinnie added this to the Post 2.0 milestone Sep 5, 2019
@gnomeontherun gnomeontherun removed the ! label Nov 11, 2019
@mathisscott mathisscott removed this from the Post 2.0 milestone Jan 10, 2020
@aavelyn
Copy link

@aavelyn aavelyn commented Jan 14, 2020

Hi there, this feature would be massively appreciated. We use datagrids to display 20+ columns.
Is there any ETA?

@mathisscott
Copy link
Contributor

@mathisscott mathisscott commented Jan 14, 2020

@Shijir ☝️

@Shijir
Copy link
Contributor

@Shijir Shijir commented Jan 14, 2020

Hi @aavelyn , we have a PR for this issue. You can follow it here: #4020

@namitabandal
Copy link

@namitabandal namitabandal commented May 26, 2020

@mathisscott Any updates on the ETA of this feature?

@Shijir
Copy link
Contributor

@Shijir Shijir commented May 26, 2020

@namitabandal as I mentioned above, we have the PR for the feature. You can follow it here: #4020. It's currently blocked because of issues we found in Angular Ivy. Once those Angular Ivy issues are resolved, we should be able to move forward and merge the PR into the master.

@namitabandal
Copy link

@namitabandal namitabandal commented May 27, 2020

@Shijir Thanks for your quick response. Waiting for this feature to get merged ASAP.

@gnomeontherun gnomeontherun added this to Designs & Feature Requests in Sorting Exercise Sep 14, 2020
@gnomeontherun gnomeontherun added resolution: enhancement request and removed status: under consideration labels Feb 4, 2021
@gnomeontherun
Copy link
Contributor

@gnomeontherun gnomeontherun commented Feb 4, 2021

The feature request here has been captured into our list and we’re going to take it into consideration as we develop Clarity Core capabilities. In an effort to clean up our backlog and focus our attention, I’m going to close this as captured in our feature requests. Please follow our development and releases to see when we release relevant components to make this possible. Future feature requests can be made in our GitHub Discussions.

Sorting Exercise automation moved this from Designs & Feature Requests to Done Feb 4, 2021
@github-actions
Copy link

@github-actions github-actions bot commented Feb 19, 2021

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.

@github-actions github-actions bot locked and limited conversation to collaborators Feb 19, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
component: datagrid resolution: enhancement request type: enhancement
Projects
Development

No branches or pull requests

8 participants