Sort Options Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the table: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Sort button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same SortBody component and share the block's state, so the rules you set in the copy are there in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

The first rule decides the order, the second only orders rows the first leaves tied, and the third only those still tied after it. Rows that tie on every rule keep the order the page loaded them in, so the sort is stable and the same on every device. Move up and Move down change which rule counts first. With Due date up and then Priority down, the two tasks due on Oct 16 are ordered Urgent before Medium; the preview's numbered column heads show which rule decides what.

A second rule on the same field could never break a tie the first one left, so the fields a rule already uses are unavailable in the others, and Add a level offers the first field that is still free. Priority sorts by rank, Low then Medium then High then Urgent, not alphabetically; Assignee and Title use a locale-aware comparison; Due date compares real dates.

The first five of the six rows, sorted as the rules say. On a phone the Assignee column folds into the Task cell as a second line, so a rule on Assignee is still visible. The sorted columns are weighted in the head and the cells and carry a number and an arrow, never a colour alone.

All of it. The six tasks are a typed list and Apply sort only re-sorts the drawn table in this tab and says so in a polite message. In your app send the rules, a list of field and direction, to your API or sort a query with them, and keep the comparator for rows already on the page; Apply says "unchanged" instead of re-running when nothing differs.

Yes. The real dialog is named by its title and described by its sentence, focus starts on the first field and stays inside until the dialog closes, and Escape, Cancel and the close button return focus to Sort. The rules are a labelled list of native selects and segment groups, each named for its field, and every move is said in a polite message. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. The copy shown on load moves no focus; Escape inside it, Cancel and its close button close it and put focus on the button.