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.
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.
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.
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 row selection and action
Sorting and filtering
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.