Skip to main content

Sorting data

Enable sorting​

To enable sorting data by columns in ascending/descending order, set the sort parameter of the needed column in the columns array. You can set it to true for default sorting behavior or provide a custom comparator (a, b) => 1|-1|0 to define column-specific sorting (see the section below).

In the UI, users can sort data by a single column by clicking a column header. For multiple sorting, users hold the Ctrl key and click column headers in the desired order. The sort index appears in the column header for multi-column sorting.

The example below shows how to enable sorting for columns:

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

  const columns = [
    { id: "id", width: 50, sort: true },
    { id: "city", header: "City", width: 160, sort: true },
    { id: "email", header: "Email", width: 250, sort: true },
  ];

</script>

<Grid {data} {columns} />

You can also use the api.exec() method and the sort-rows action to sort data programmatically. The example below shows how to sort data by the id column in the descending order at the initialization.

<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 },
  ];

  const init = (api) => {
    api.exec("sort-rows", { key: "id", order: "desc" });
  };

</script>

<Grid {data} {columns} {init} />

Disable multiple sorting​

To disable multiple sorting, you should apply the add parameter of the sort-rows action by setting its value to false and use the api.intercept() method. In this case it will be possible to sort data only by one column at a time (a user should click the required column header).

<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" },
  ];

  function init(api){
    api.intercept("sort-rows", (ev) => {
      ev.add = false;
    });
  }
</script>

<Grid {data} {columns} {init} />

Sort rows with a custom function​

You can provide a row-level custom sort function when calling sort-rows programmatically. In this case all other parameters of the sort-rows (key, order, and add) are ignored, and sortMarks are not updated.

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

  const init = (api) => {
    // Sort rows by 'stars' descending
    const customSort = (a, b) => b.stars - a.stars;

    api.exec("sort-rows", { sort: customSort });
  };
</script>

<Grid {data} {init} />

At the column level, you can also provide a custom comparator for a specific column by setting column.sort to a function (a, b) => 1|-1|0. This replaces the built-in sorting for that column and updates sortMarks accordingly.

<script>
  import { Grid } from "@svar-ui/svelte-grid";

  const data = [
    { id: 1, name: "Alice", score: 85 },
    { id: 2, name: "Bob", score: 92 },
    { id: 3, name: "Charlie", score: 78 },
  ];

  const columns = [
    // Default sorting
    { id: "name", header: "Name", sort: true },

    // Custom comparator for this column
    { id: "score", header: "Score", sort: (a, b) => b - a },
  ];
</script>

<Grid {data} {columns} />

Control multi-column sorting​

By default, the DataGrid supports sorting by multiple columns. Users can hold the Ctrl key and click multiple column headers to apply sorting in the desired order. The order in which columns are clicked determines the position of each sorting rule in sortMarks. Programmatically, you can control multi-column sorting using the sort-rows action with the add parameter:

  • true — appends the new sorting rule to the end of existing sortMarks (default)
  • number — inserts the sorting rule at the specified index in sortMarks

The add parameter allows you to insert the new sorting rule at a specific position in the sortMarks array:

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

  const init = (api) => {
    // Sort by 'city' first, then insert 'stars' sorting at index 0
    api.exec("sort-rows", { key: "city", order: "asc", add: true });
    api.exec("sort-rows", { key: "stars", order: "desc", add: 0 });
  };
</script>

<Grid {data} {init} />

Related articles: