Skip to main content

sort-tasks

Description

Fires when sorting tasks

Usage

"sort-tasks": ({
key:string,
order:"asc"|"desc"
}) => boolean | void;
```

### Parameters

The callback of the **sort-tasks** action can take an object with the following parameters:

- `key` - (required) data field name
- `order` - (required) the sorting direction that can be "asc" or "desc"

:::info
For handling the actions you can use the [Event Bus methods](/api/overview/methods_overview)
:::

### Example

The example below demonstrates how to enable sorting for the text field.

```jsx
import React, { useRef, useEffect } from "react";
import { getData } from "./common/data";
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";

export default function GanttComponent() {
const data = getData();
const apiRef = useRef();

useEffect(() => {
if (apiRef.current) {
apiRef.current.intercept("sort-tasks", (config) => {
return config.key === "text";
});
}
}, [apiRef]);

return <Gantt apiRef={apiRef} tasks={data.tasks} links={data.links} />;
}
```

---

**Related articles**:
- [columns](/api/properties/columns)
- [How to access Gantt API](/api/how_to_access_api)