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: