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

gracesnoh opened this Issue Dec 13, 2017 · 2 comments


None yet
4 participants

gracesnoh commented Dec 13, 2017


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


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


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.
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.
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.

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.



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.


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.


Other datagrid examples

Single selection


Single row selection and action


Sorting and 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.


Related Issues: #145 and #620


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?


This comment has been minimized.


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