Skip to main content

sort-rows

Description​

Fires when sorting data by clicking the table header

Usage​

"sort-rows": ({
    key: string | number,
    order?: "asc" | "desc",
    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) 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​

import { useState } from "react";
import { Grid } from "@svar-ui/react-grid";
import { getData } from "./common/data";

export default function App() {
  const { data } = getData();

  const [columns] = useState([
    { 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 handleSortRows = (ev) => {
    console.log("The last sorted column:", ev.key);
    // You can inspect ev.order, ev.add, or provide ev.sort to override default sorting.
    // Returning false will block the sorting:
    // if (ev.key === "id") return false;
  };

  return (
    <div>
      <h4>Click the table header to sort</h4>
      <Grid data={data} columns={columns} onSortRows={handleSortRows} />
    </div>
  );
}

Related articles: