Configuring the grid (tasks tree) area
The grid with tasks tree can be used for quick navigation.
By default, the tasks tree area contains 4 columns:
- Task name
- Start date
- Duration
- '+' column. A special column with the '+' button which allows users to add tasks
Configuring columns
Columns with default parameters are applied by default and you don't need to specify the columns objects.
Default columns array you can see here: columns.
Adding a column
If you want to add a new column, add the columns object to the array and specify its id parameter in the task object. id is the mandatory parameter which defines the content of cells and the cell will take the value of the matching property from a task by default.
<script>
import { Gantt } from "wx-svelte-gantt";
const columns = [
{ id: "holder", header: "Holder", width: 90, align: "center" },
//other columns
];
const tasks = [
{
id: 1,
start: new Date(2022, 2, 4),
end: new Date(2023, 2, 4),
progress: 20,
parent: 1,
type: "task",
holder: "Nick",
},
//other tasks
]
</script>
<Gantt {tasks} {columns} />
Configuring columns width
To add columns with the fixed width, set the width value, the default value is 120.
To make the width of columns flexible, apply the flexgrow parameter of the columns
property. It specifies specifies how much space (width) relative to the grid width the column will take (it will take no effect on columns with the set width); the property is specified as a number and if flexgrow
is set to 1 in one column only, the column will take the full available width.
Example:
<script>
import { getData } from "../data";
import { Gantt } from "wx-svelte-gantt";
const data = getData();
const columns = [
{ id: "text", header: "Task name", flexgrow: 2 },
{
id: "start",
header: "Start date",
flexgrow: 1,
align: "center",
},
{
id: "duration",
header: "Duration",
align: "center",
flexgrow: 1,
},
{
id: "add-task",
header: "",
width: 50,
align: "center",
},
];
</script>
<Gantt
tasks={data.tasks}
links={data.links}
scales={data.scales}
{columns}
/>
Disabling the tasks reordering
By default, a user can reorder tasks in the grid area with drag&drop. To disable the tasks ordering feature, you can apply the api.intercept()
method to handle the drag-task
action.
<script>
import { getData } from "./data";
import { Gantt } from "wx-svelte-gantt";
const data = getData();
api.intercept("drag-task", ev => {
if (typeof ev.top !== "undefined")
return false;
});
</script>
<Gantt
columns={data.columns}
tasks={data.tasks} />
Another way to disable the feature is to switch to the read-only mode.
Hiding the grid area
To hide the area with tasks tree, set the columns
property to false:
<script>
import { getData } from "./data";
import { Gantt } from "wx-svelte-gantt";
const data = getData();
</script>
<Gantt
columns={false}
tasks={data.tasks} />
Adding a header menu
You can add a header menu to columns in the grid area to dynamically hide and show them via the HeaderMenu. To add a header menu, you should import HeaderMenu from "wx-svelte-gantt" and then place the Gantt tag inside the HeaderMenu tag.
<script>
import { Gantt, HeaderMenu } from "wx-svelte-gantt";
</script>
<HeaderMenu {api} ...>
<Gantt bind:this={api} ... />
</HeaderMenu>
The description of HeaderMenu properties you can see here.
The example below shows how to add a header menu to the grid columns and make possible to hide the "start" and "duration" columns:
<script>
import { getData } from "../data";
import { Gantt, HeaderMenu } from "wx-svelte-gantt";
const data = getData();
const columns = { start: true, duration: true };
let api = $state();
</script>
<HeaderMenu {api} {columns}>
<Gantt
bind:this={api}
tasks={data.tasks}
links={data.links}
scales={data.scales}
/>
</HeaderMenu>
Adding custom HTML content to cells
Gantt allows adding custom HTML to grid (tasks tree) cells.
Adding components
Basically, what you need is four simple steps:
- create a component (using HTML or ready-made components from the wx-svelte-core library)
- in the component, access Gantt grid properties via
$props
, if needed - import the configured component to the application page with Gantt
- add this component to the needed cell in Gantt grid
Accessing Gantt grid properties in components
Components in grid cells have access to the following data via $props
:
api
- Grid API, using which you can call actions or listen to themrow
- task data objectcolumn
- column data (its id, dimensions, etc.)
The example below demonstrates how to customize cells by adding images to them.
<script>
let { row } = $props();
const url = "https://svar.dev/demos/grid/assets/avatars/";
const user = $derived(users.find(u => u.id == row.assigned));
const avatar = $derived(
user ? `${url}${user.label.replace(" ", "_")}.png` : ""
);
</script>
<div class="container">
<div class="avatar">
{#if avatar}
<div class="user-avatar">
<img class="user-photo" alt="" src={avatar} />
</div>
{/if}
</div>
<div>{user?.label ?? ""}</div>
</div>
<style>
.container {
display: flex;
align-items: center;
padding: 0 4px;
}
.avatar {
width: 40px;
}
.user-avatar {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #dfe2e6;
text-align: center;
}
.user-photo {
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #dfe2e6;
}
</style>
Now you can import your component and apply it to a cell by adding its name to the cell
property of a column:
<script>
import { getData } from "../data";
import { Gantt } from "wx-svelte-gantt";
import AvatarCell from "../custom/AvatarCell.svelte";
let { skinSettings } = $props();
const columns = [
{ id: "text", header: "Task name", width: 220 },
{ id: "assigned", header: "Assigned", width: 160, cell: AvatarCell },
{ id: "start", header: "Start Date", width: 100 },
];
const data = getData();
</script>
<Gantt
{...skinSettings}
tasks={data.tasks}
links={data.links}
scales={data.scales}
{columns}
/>
Applying in-built inline editors
To apply the inline editor to column cells, set the editor
parameter of the columns
property to the required value ("text" | "combo" | "datepicker" | "richselect").
Example:
<script>
import { getData } from "../data";
import { Gantt } from "wx-svelte-gantt";
let { skinSettings } = $props();
const data = getData();
const columns = [
{
id: "text",
header: "Task name",
width: 170,
sort: true,
editor: "text",
},
{
id: "start",
header: "Start date",
width: 120,
align: "center",
sort: true,
editor: "datepicker",
},
];
</script>
<Gantt
{...skinSettings}
tasks={data.tasks}
links={data.links}
scales={data.scales}
{columns}
/>
Customizing built-in editors
You can apply a template and custom Svelte component to the cell editor (except the "text" type editor). In this case, column "editor" should be an object with "type" and "config". "config" allows to set a custom component in the "cell" property.
Please note that for the "combo" editor, the cell component will be applied to dropdown options only, while for 'datepicker" to the input field.
First, you need to prepare a custom component file. Components in editor cells have access to the data
property via $props:
data
- inline editors data (for example, for combo and richselect it's an item from options, for datepicker - date value)
Let's consider a custom component for values of inline editors in "start" column. The component will show formatted date and calendar icon:
<script>
let { data } = $props();
const options = { year: "numeric", month: "numeric", day: "numeric"};
</script>
{#if data}
<div class="container">
<span>{data.toLocaleString("en-US", options)}</span>
<i class="icon wxi-calendar"></i>
</div>
{/if}
<style>
.container {
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.icon {
display: inline-flex;
align-items: center;
font-size: 20px;
color: #b5b5b5;
}
</style>
Apply this component in "cell" property of an inline editor config:
<script>
import { getData } from "../data";
import { Gantt } from "wx-svelte-gantt";
import DateCell from "../custom/DateCell.svelte";
const data = getData();
const columns = [
{ id: "text", header: "Task name", flexgrow: 1 },
{
id: "start",
header: "Start date",
width: 120,
align: "center",
editor: {
type: "datepicker",
config: {
cell: DateCell
}
}
}
];
</script>
<Gantt
tasks={data.tasks}
links={data.links}
scales={data.scales}
{columns}
/>