DEV Community

Cover image for ⭐ SVAR Svelte 2.2: Advanced DataGrid & Gantt Components
Olga T.
Olga T.

Posted on

⭐ SVAR Svelte 2.2: Advanced DataGrid & Gantt Components

#webdev #programming #javascript #svelte

Introduction

Building feature-rich UI components like data tables or complex dashboards for web apps from scratch is always challenging. You can spend weeks on custom solutions, and complexity explodes as you add features while juggling accessibility, cross-browser compatibility, and maintainable code.

SVAR Svelte 2.2 aims to solve this with advanced, well-documented, and customizable components - DataGrid, Gantt Chart, Core library of form controls, Editor (form builder), and more. This latest update delivers the advanced features and flexibility for data tables and Gantt charts right out of the box.

With more customization options, responsive mode, editing and filtering capabilities, SVAR Svelte 2.2 gives developers more freedom to integrate the components into enterprise-ready, data-intensive applications.

Getting Started

Ready to try it out? Install the components you need via npm:

npm install wx-svelte-gantt
npm install wx-svelte-grid
npm install wx-svelte-editor
npm install wx-svelte-core
Enter fullscreen mode Exit fullscreen mode

🔗 Useful links:

  • Documentation – Quick start guides and API references
  • Demos – See all features in action
  • GitHub - Source code & issues

Found these components useful? Give a ⭐ on GitHub and share any feedback you might have!

Gantt Chart

Version 2.2 represents a major leap forward for SVAR Svelte Gantt, an interactive and beautifully-designed component for creating project timelines and intuitive workflow visualization. This update brings some long-awaited features and UX optimizations.

Svelte Gantt v2.2 - Custom Scale Units

Feature Highlights:

  • Flexible time units: support for hours duration unit and the ability to render tasks with minutes precision. This gives developers more control over the task visualization.

  • Custom scales: divide the timeline into custom periods, such as sprints, decades, or any other stage with fixed or variable duration. The scales are now not limited to standard calendar date units (month, week, day, etc).

  • Task grid features: multi-column sorting, in-cell editing, and context menu in the header to show/hide grid columns. Now users can find and manage tasks right in the grid, as well as control columns visibility.

  • Hotkeys support: shortcuts for common actions: copy/cut/paste/remove tasks, grid cells navigation, and quick task editing. This ensures better UX and accessibility of the Gantt chart.

These changes make the Gantt chart more flexible and suitable for a wider range of use cases where a clear timeline is needed.

DataGrid

SVAR Svelte DataGrid v2.2 comes with the significant enhancements that make data management more powerful, ready for production apps, and user-friendly.

Svelte DataGrid - Advanced Filtering

Feature Highlights:

  • Undo/Redo: changes in the datagrid can be reverted using buttons or standard hotkeys. This improves the usability and efficiency of working with table data, and users can work more confidently, knowing they can easily undo accidental edits or deletions.

  • Advanced filtering: integration with SVAR Filter allows building complex queries (including nested filters with AND/OR logic). Users can quickly find and work with the exact data they need, even in large, complex datasets. This can be highly useful for apps in finance, project management, inventory, or CRM.

  • Responsive mode: define table layout, sizes, and styles depending on the screen width. You can now make a custom view for each screen size so your datagrid looks readable and clean across all devices.

  • Column-level cell editors: configure which cells are editable and assign different editors to individual cells at the column level, useful for non-uniform data.

Editor & Core Library

The new version of SVAR Svelte Editor, a configurable edit form component, comes with the following new features:

  • Overlay for readonly mode: ensures the editor layout looks clean even when all fields are empty,
  • Hotkeys support: for common actions like saving or closing the form as well as deleting the record. So users can work with the edit forms quicker and more intuitively.

Version 2.2 also introduces several enhancements for the SVAR Svelte Core library - a collection of form controls, popups, and basic UI components. The date picker and paging controls received some UI and usability improvements.

Summing Up

SVAR Svelte 2.2 delivers the advanced DataGrid and Gantt functionality that real-world applications demand - from minute-precision timelines to complex data filtering with undo/redo support.

Whether you need to build Svelte project management dashboards, financial reporting tools, or data-heavy admin panels, SVAR Svelte components will help you ship faster.

Ready to dive deeper? Check out the complete v2.2 changelog for all the details.

Top comments (0)