Tickets - Movable columns in tabular view

[sanmont3drepo]

Description

Product issue: https://github.com/3drepo/3D-Repo-Product-Team/issues/443
As a user I want to be able to maximize the information in tabular view, for that purpose we are providing the ability of sorting the columns in the page.

When the user clicks and hold the column name the column changes colour, then when they drags it there will be a an indication showing where the column will end up in the form of a line. Once the user let go of the mouse button the column order gets updated.

Goals

• As a viewer+ I want to be able to rejigg the order of the columns for a better viewing experience

Tasks

• - defined by the dev -

Related Resources

MockUp

[Didi-Kwan]

Acceptance criteria

• User can hold and drag any column header to a new position in the table.
• Upon release, the column repositions to the new location, and the column order is updated immediately.
• After reordering, all column data must remain correctly aligned with the new header position.
• No data loss, misalignment, or overlapping cells should occur during or after the drag.
• After reordering columns, sorting and resize column width must continue to work as before. Also the state of them should stay the same as before.
• If two or more columns have the same name, dragging one should not affect the other column.
• If two or more columns have the same name, reorder should be based on position, not label.
• If user picks up a column and drops it back in the same place, ensure no visual glitch or data misalignment occurs and no unnecessary re-renders or state updates happen.
• Ensure these UI elements changed when user dragging the column: the column being dragged changes its colour, there should be an indicator showing where the column will end up in the form of a line.
• If user drags the column to the very start or end of the table, ensure correct realignment of headers and data. Especially if horizontal scrolling is involved.
• Make sure user able to reorder the columns when horizontal scrolling is involved.
• Make sure the order of the columns stays the same when user use existing functions such as add/remove models, change to other ticket type back and forth, apply grouping.
• Ensure the reordering of a table also applied to other tables when grouping is applied.
• Refresh the page/Re-enter the tabular view should restore everything back to default state. (e.g. Default ordering of the columns.)