Triggering a sort on Grid.js programmatically

Question

When I mount the GridJS component and load its data, how can I programmatically trigger the default sort on load? What methods I should call?

I am using gridjs-svelte, but that really does not matter as I can access the underlying Javascript instance.

This question is somewhat similar to the existing default sorting question.

score 1 · Answer 1 · answered Jun 08 '22 at 16:55

In case there is no method, a workaround might be to simply trigger a click on the desired column

const column = document.querySelector('[data-column-id="email"]')
column.click()

Without gridjs-svelte REPL

<script>
    import { Grid } from "gridjs";
    import {onMount} from 'svelte'

    onMount(() => {
        new Grid({
            columns: ["Name", "Email", "Phone Number"],
            sort: true,
            data: [
                ["John", "john@example.com", "(353) 01 222 3333"],
                ["Mark", "mark@gmail.com", "(01) 22 888 4444"],
                ["Eoin", "eoin@gmail.com", "0097 22 654 00033"],
                ["Sarah", "sarahcdd@gmail.com", "+322 876 1233"],
                ["Afshin", "afshin@mail.com", "(353) 22 87 8356"]
            ]
        }).render(document.getElementById("wrapper"));

        const column = document.querySelector('[data-column-id="email"]')
        column.click()
    })

</script>

<div id="wrapper"></div>

<style global>
    @import "https://cdn.jsdelivr.net/npm/gridjs/dist/theme/mermaid.min.css";
</style>

With gridjs-svelte REPL (not sure why it's only working with await tick())

<script>
    import Grid from "gridjs-svelte"
    import {onMount, tick} from 'svelte'

    const columns = ["Name", "Email", "Phone Number"]
    const data = [
        ["John", "john@example.com", "(353) 01 222 3333"],
        ["Mark", "mark@gmail.com", "(01) 22 888 4444"],
        ["Eoin", "eoin@gmail.com", "0097 22 654 00033"],
        ["Sarah", "sarahcdd@gmail.com", "+322 876 1233"],
        ["Afshin", "afshin@mail.com", "(353) 22 87 8356"]
    ]

    onMount(async () => {
        await tick()
        const column = document.querySelector('[data-column-id="email"]')
        column.click()      
    })

</script>

<Grid {data} {columns} sort />

<style global>
    @import "https://cdn.jsdelivr.net/npm/gridjs/dist/theme/mermaid.min.css";
</style>

Triggering a sort on Grid.js programmatically

1 Answers1