sort-rows
Description
Fires when sorting data by clicking the table headerUsage
"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 columnorder
- (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: