以编程方式在Grid.js上触发排序

Question

当我挂载GridJS组件并加载其数据时，我如何以编程方式触发加载时的默认排序?我应该调用哪些方法?

我正在使用gridjs-svelte，但这并不重要，因为我可以访问底层Javascript实例。

这个问题有点类似于现有的默认排序问题。

Answer 1

在没有方法的情况下，可以简单地触发对所需列的单击

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

没有gridjs-svelteREPL

<script>
import { Grid } from "gridjs";
import {onMount} from 'svelte'
onMount(() => {
new Grid({
columns: ["Name", "Email", "Phone Number"],
sort: true,
data: [
["John", "[e-mail]", "(353) 01 222 3333"],
["Mark", "[e-mail]", "(01) 22 888 4444"],
["Eoin", "[e-mail]", "0097 22 654 00033"],
["Sarah", "[e-mail]", "[phone]"],
["Afshin", "[e-mail]", "(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>

Withgridjs-svelteREPL(不知道为什么它只与await tick()工作)

<script>
import Grid from "gridjs-svelte"
import {onMount, tick} from 'svelte'
const columns = ["Name", "Email", "Phone Number"]
const data = [
["John", "[e-mail]", "(353) 01 222 3333"],
["Mark", "[e-mail]", "(01) 22 888 4444"],
["Eoin", "[e-mail]", "0097 22 654 00033"],
["Sarah", "[e-mail]", "[phone]"],
["Afshin", "[e-mail]", "(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>