Skip to main content

Sorting data

Sorting via UI​

Sorting is enabled by default for all columns. Users can click any column header to sort tasks by that column. Clicking the same header again toggles between ascending and descending order.

For multi-column sorting, hold Ctrl/Meta while clicking additional column headers. Sorting is applied in the order columns are selected — the first clicked column takes the highest priority.

See Sort tasks for a full description of the UI interactions.

Sorting API​

To sort tasks programmatically, call api.exec() with the sort-tasks action:

<script>
    import { Gantt } from "@svar-ui/svelte-gantt";
    import { getData } from "./data";

    const data = getData();

    function init(api) {
        api.exec("sort-tasks", { key: "start", order: "asc" });
    }
</script>

<Gantt {init} tasks={data.tasks} links={data.links} scales={data.scales} />

To apply multi-column sorting, set add: true on additional calls to preserve the existing sort order:

api.exec("sort-tasks", { key: "start", order: "asc" });
api.exec("sort-tasks", { key: "text",  order: "asc", add: true });

Configuring sortable columns​

The columns property controls which columns are sortable via the sort field. By default, sort is true for all columns. Set sort: false to disable sorting for a specific column:

<script>
    import { Gantt } from "@svar-ui/svelte-gantt";
    import { getData } from "./data";

    const data = getData();

    const columns = [
        { id: "text",     header: "Task name",  flexgrow: 1, sort: false },
        { id: "start",    header: "Start date", width: 130 },
        { id: "duration", header: "Duration",   width: 90 },
    ];
</script>

<Gantt tasks={data.tasks} links={data.links} scales={data.scales} {columns} />

Intercepting sorting​

To restrict or customize sorting behavior, use api.intercept() on the sort-tasks action. Return false to cancel the action.

The example below allows sorting only by the "text" column:

<script>
    import { Gantt } from "@svar-ui/svelte-gantt";
    import { getData } from "./data";

    const data = getData();

    function init(api) {
        api.intercept("sort-tasks", ({ key }) => {
            return key === "text";
        });
    }
</script>

<Gantt {init} tasks={data.tasks} links={data.links} scales={data.scales} />

Related samples: