Svelte Pivot Table: New Integration for Modern Web Apps

It's no secret that Svelte has been generating considerable buzz, and our clients have been eager to know if we planned to offer integration. You asked, and we did! We're incredibly excited to share that Flexmonster now provides full integration with Svelte.

For those new to this innovative framework, let's first explore what Svelte is all about and the key factors that have propelled it to such prominence.

About Svelte

If you still haven’t heard about Svelte, here's a short intro: it is an open-source JavaScript framework similar to React and Vue. However, it compiles your code during the build process, so there’s no virtual DOM.

You can see how many people are using it on npm, weekly downloads are higher than 1,500,000:

Its growth can also be seen on npm trends, where it shows a steady 1.5 to 2 million monthly downloads.

According to Stack Overflow insights, Svelte continues to hold a strong position among other frameworks:

You can notice from the results of this survey that even though React remains the most popular one, developers who have tried working with Svelte love it.

Svelte is quite a young framework that actively develops, so it will be well-supported in the future. There are also many active Svelte communities, such as the popular Svelte subreddit or the Official Svelte Discord Server, where people share their projects and help each other.

Why Developers Are Choosing Svelte? 

Rich Harris, Svelte creator, mentions:

“We're not trying to be the most popular framework, we're trying to be the best framework. Sometimes that means making choices that we believe in but that go against the grain of web development trends”.

So, Svelte continues gaining popularity, not by chasing trends, but by staying true to its principles.

Also, many Reddit users agree that Svelte is an excellent option for web development. It is:

• Simple. It has a minimalistic and clean syntax. There’s no need to learn complex boilerplate-heavy patterns. 
• Fast. Svelte compiles your code at build time, making apps smaller and quicker. It doesn’t use a virtual DOM, but turns your code into plain JavaScript that updates the page directly.
• Less code. Compared to other frameworks, you often need fewer lines to do the same thing. It speeds up development and reduces potential bugs.
• Readable and intuitive. The code is easier to read and understand because Svelte uses a familiar structure based on HTML, CSS, and JavaScript, which are well-known to many developers

How to Integrate

So, to integrate Svelte with Flexmonster and create a powerful data visualization, you don’t need to start from scratch; we already have a ready-to-use wrapper to make the smooth integration for you:

Step 1. (optional) Create a Svelte project

If you don’t have a Svelte project, you can easily create it using this command:

npx sv create fm-svelte-app
cd fm-svelte-app

Step 2. Get Flexmonster

Run these commands inside your project to get Flexmonster for Svelte:

npm install svelte-flexmonster --save-exact

We recommend you follow our full Integration with Svelte tutorial for a detailed guide.

We’ve also prepared a GitHub sample for you. Download it to see how the Svelte pivot grid works and try it out on your device.

The sample is more than just a demo, it demonstrates many useful things that you can do with Flexmonster in Svelte. If being more detailed, it includes:

• Svelte Pivot table demo
• Handling events
• Using API calls
• Updating data
• Customizing the Toolbar
• Customizing the grid
• Integration with Highcharts
• Integration with amCharts

We’re also excited to hear your feedback, so after exploring it, don’t forget to share your thoughts!