Skip to main content

sort-rows

Description​

Fires when sorting data by clicking the table header

Usage​

"sort-rows": ({
  key: string,
  order?: "asc" | "desc",
  add?: number| boolean,
  sort?: (a:IRow, b:IRow) => 1|-1|0,
}) => 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) controls multi-column sorting:
    • true — adds the new sorting rule to the end of the existing sortMarks list (default)
    • false — resets previous sorting (single-column mode)
    • number — inserts the new sorting rule at the specified index in the sortMarks object
  • sort – (optional) the function receives row objects as arguments and is applied directly to state.data instead of the default sorter. Returns 1, -1, or 0. When defined, this function is applied to the data and ignores all other properties (key, order, and add), and does not update sortMarks.

Returning false from the event handler will block sorting data.

Example​

<script>
  import { Grid } from "@svar-ui/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 },
  ];

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

<div>
  <h4>Click the table header to sort</h4>
  <Grid {data} {columns} {init} />
</div>

Related articles: