Skip to main content

sort-rows

Description​

Fires when sorting data by clicking the table header

Usage​

"sort-rows": ({
    key: string | number,
    order?: string,
    add?: boolean
}) => boolean|void;

Parameters​

The callback of the action takes an object with the following parameters:

  • key - (required) the id of a column
  • order - (optional) the sorting order: "asc" (default) or "desc"
  • add - (optional) enables or disables sorting data in multiple columns; if set to true (default), each new sorting will be applied with the previous one.

Returning false from the event handler will block sorting data.

Example​

<script>
    import { Grid } from "@wx/svelte-grid";
    import { getData } from "./common/data";
    const { data } = getData();

    let columns = [
        { id: "id", width: 50, sort: true },
        { id: "city", header: "City", width: 160, sort: true },
        { id: "email", header: "Email", width: 250, sort: true },
        { id: "firstName", header: "First Name", sort: true },
        { id: "lastName", header: "Last Name", sort: true },
    ];

    let api;

    $: if (api) {
        api.on("sort-rows", (ev) => {
            console.log("The last sorted column:", ev.key);
        });
    }
</script>

<div style="padding: 20px;">
 <h4>Click the table header to sort</h4>
 <Grid 
     {data} 
     {columns} 
     bind:api />
</div>

Related articles: