Skip to main content

sort-rows

Description​

Fires when sorting data by clicking the table header

Usage​

onSortRows: ({
    key: string | number,
    order?: "asc" | "desc",
    add?: boolean
}) => boolean|void;

Parameters​

The callback of the event 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​

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);
    // 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: