Introduction
We’re very excited to announce the release of version 2.2 of our SVAR Svelte components library! With this update, we continue to deliver complex, enterprise-ready solutions for Svelte apps with free, open-source licenses.
Version 2.2 brings new features and bug fixes to our Svelte Gantt and DataGrid components, as well as some small enhancements to the Core library and Editor. We’ve also improved the demo sections with better navigation and added reference links to each demo’s source code on GitHub for your convenience.
What’s New in Gantt Chart
This is the major update for SVAR Svelte Gantt that includes some long-awaited features and UX optimizations. These changes make the Gantt chart more customizable and suitable for a wider range of use cases where a clear timeline is needed.
Flexible Time Units
Version 2.2 introduces much-requested support for hours duration unit, which can be defined with the new durationUnit property. If durationUnit is set to “hour”, task duration will be measured in hours, and end users will be able to select date and time within the task edit form.
Docs | Demo
Also, tasks can now be rendered with minute-level precision, thanks to the new “minute” value of the lengthUnit property.
Docs | Demo
Custom Scales
SVAR Svelte Gantt v2.2 introduces support for custom time scale units, allowing you to divide the timeline into custom periods, such as sprints, decades, or any other stage with fixed or variable duration. This gives you greater control and flexibility over how time scale is represented in the chart.
Docs | Demo
Adjusting Scales with Start/End Dates
When your Gantt chart has predefined start/end dates, you can now use the autoScale property to control whether time scale will be fixed or can adjust to data upon changes, especially when the chart is initially empty or when tasks are added or modified.
Docs | Demo
Task Grid: Multi-Column Sorting, Editing and Context Menu
This update brings several grid-focused features that simplify task management and allow end users to easily control columns visibility:
- Multi-column sorting,
- In-cell editing with 4 built-in editors (text, combo, richselect, datepicker), plus the ability to customize them - see demo,
- Context menu to show/hide grid columns - see demo.
Task Edit Form Changes
Starting from v.2.2 task edit form should be added with the standalone Editor based on SVAR Svelte Editor instead of editorShape config. Now to enable task edit form, you need to import the Editor from the wx-svelte-gantt package:
<script> import { Gantt, Editor } from "wx-svelte-gantt"; let api = $state();</script>
<Gantt bind:this={api} {...otherProps} /><Editor {api} />This new Editor makes the task edit form much more customizable. It allows you to:
- Configure controls inside the form with greater flexibility,
- Display the form as either a sidebar or a modal popup,
- Choose whether to save changes automatically or via a Save button,
- Enable form validation.
Hotkeys Support
We’ve also added hotkeys for the most common user actions – copy, cut, paste, remove tasks, grid navigation shortcuts, and quick access to the task editor.
Docs
UX Improvements
We’ve added the resizer line with toggle buttons to expand or collapse grid and chart views in both compact and fullscreen modes. This new toggle control lets users switch between three views: Grid only, Chart only, or both sections side by side. It gives users better control over their workspace.
As a side effect, the “action” column is now used only for adding tasks. This means you can easily remove it by excluding it from the grid columns, giving you full control over the column layout.
Another improvement: the Gantt chart’s time scale now stretches to the full height of the container, even when the task list is shorter. This ensures a cleaner, more consistent layout, especially in charts with few tasks.
See the complete changelog for SVAR Svelte Gantt v.2.2.
What’s New in DataGrid
SVAR Svelte DataGrid v.2.2 comes with the significant enhancements that make data management more powerful and user-friendly.
Undo/Redo
Since SVAR Svelte DataGrid supports rich editing features (in-cell or via the editor panel), we’ve now added support for Undo/Redo functionality. End users can easily undo or redo any actions they perform on the table, such as adding, updating, or deleting records; and expanding, resizing, or hiding columns.
Common hotkeys are supported: ctrl+z for undo, and ctrl+y for redo. You can also set up and customize Undo/Redo buttons and disable them depending on the steps to undo (redo).
Docs | Demo
Advanced Filtering with SVAR Filter
Version 2.2 introduces integration between the DataGrid and the recently released SVAR Svelte Filter. This allows users to filter data using multiple criteria, build complex queries and combine filters with AND/OR logic at runtime. SVAR Filter combines an intuitive UI with powerful filtering logic under the hood.
Docs | Demo
Responsive Mode
The new responsive mode makes it easy to adapt the DataGrid to different screen or page sizes, ensuring it looks good on any device. When this mode is enabled, you can configure the following for each screen width:
- A different set of columns with custom parameters;
- Common sizes of table, header and footer cells;
- Custom styles via CSS classes: font, spacing, etc.
Different/Disabled Editors for Column Cells
With this new feature, you can configure which cells are editable at the column editor level. It also allows you to assign different editors to individual cells within the same column, which is great for handling non-homogeneous, spreadsheet-like data.
Docs | Demo
See the complete changelog for SVAR Svelte DataGrid.
What’s New in Editor
SVAR Svelte Editor v2.2 comes with the following new features:
- Overlay for readonly mode – ensures the editor layout looks clean even when all fields are empty;
- Hotkeys for common actions like saving or closing the form as well as deleting the record.
See the complete changelog for SVAR Svelte Editor.
What’s New in Core Library
Version 2.2 includes some bug fixes for the Core components library, and also introduces several enhancements:
- The updated DatePicker API allows developers to define which action buttons (Today, Clear, Done) are shown, enabling more control over the UI;
- UX enhancements for the Pager component: navigation buttons are now disabled when there are no more pages, and text labels support localization.
See the complete changelog for SVAR Svelte Core.
Wrapping Up
This update brings lots of valuable new features that benefit both developers and end users. We’ve listened to your feedback and provided better flexibility to our Gantt chart. Meanwhile, DataGrid has evolved into a more sophisticated component, ready to power complex, data-driven apps.
The new version is available via npm:
npm install wx-svelte-ganttnpm install wx-svelte-gridnpm install wx-svelte-corenpm install wx-svelte-editorWe’ll be happy to receive your feedback so feel free to share it on SVAR GitHub or our forum.
Happy Svelte coding!