Workaround for Grid multi-column sort on macOS with Command+click or Ctrl+click?

[joelparkerhenderson]

I'm hoping to use Grid with multi-column sort on macOS, and what I'm seeing in the Grid documentation is to use Ctrl-click, which doesn't work the same on macOS. Claude suggests this workaround; is there a better/smarter way? Thanks so much.

Here's what the workaround does:

1. Tracks the Command key - A handleHeaderClick function captures event.metaKey (which is the Command key on macOS) when the header is clicked

2. Intercepts sort-rows - The init callback registers an interceptor on the sort-rows action. When Command was pressed, it sets ev.add = true to enable multi-column sorting

3. Wraps the Grid - A div with onclick={handleHeaderClick} wraps the Grid to capture click events before they reach the headerNow multi-column sorting works with:

• macOS: Command (⌘) + click
• Windows/Linux: Ctrl + click (unchanged, still works)

Sources:

• https://docs.svar.dev/svelte/grid/guides/sorting_data/
• https://docs.svar.dev/svelte/grid/api/actions/sort-rows/

Script:

// Workaround for macOS: Command+click for multi-column sort.
// SVAR uses Ctrl+click, but on macOS Ctrl+click triggers context menu.
// Track if Command (metaKey) was pressed during last header click.
let metaKeyPressed = false;

function handleHeaderClick(event) {
    metaKeyPressed = event.metaKey;
}

let api;
function init(gridApi) {
    api = gridApi;
    // Intercept sort-rows to enable multi-sort when Command is pressed on macOS
    api.intercept("sort-rows", (ev) => {
        if (metaKeyPressed) {
            ev.add = true;
        }
        metaKeyPressed = false;
    });
}

HTML:

<!-- Render the SVAR Svelte DataGrid. -->
<Grid {data} {columns} />
<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
<div onclick={handleHeaderClick}>
    <Grid {data} {columns} {init} />
</div>

[Natasha-eng]

Hi @joelparkerhenderson ,
This inconsistency is a bug in the Grid library, as it doesn't natively support Command-click for multi-sort on macOS.
We will fix this in one of the future updates by improving the cross-platform handling. In the meantime, your workaround is a valid temporary solution.

[joelparkerhenderson]

Thank you. Can you add this info to the documentation please? (Similar to the other issue, my goal is to drive developers to try SVAR, and so I'm keen to get these kinds of minor issues at least into the tutorial doc so the tutorial works right away)