Skip to main content

sort-rows

Description​

Fires when sorting data by clicking the table header

Usage​

"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 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 { Grid } from "@wx/react-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 },
];

export default function App() {
    const api = useRef(null);

    useEffect(() => {
        if (api.current) {
            api.current.on("sort-rows", (ev) => {
                console.log("The last sorted column:", ev.key);
            });
        }
    }, [api]);

    return (
        <div style={{ padding: "20px" }}>
            <h4>Click the table header to sort</h4>
            <Grid 
                data={data} 
                columns={columns} 
                api={api} 
            />
        </div>
    );
}

Related articles: