New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reordering Datagrid columns (design spec) #1771

Open
gracesnoh opened this Issue Dec 13, 2017 · 2 comments

Comments

Projects
None yet
4 participants
@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

This comment has been minimized.

bangelakos commented Dec 13, 2017

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

@Shijir

This comment has been minimized.

Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment